Description
hey @rsm0128 i'd like to add a feature to encode svgs on the server so we can render them from the CMS using something like this:
i got that working here:
https://github.com/funkhaus/components/blob/updates/app/components/svg-loader.vue
You can use this endpoint to see how the SVGs are being returned in acf here:
https://jhpiego.flywheelsites.com/wp-json/fuxt/v1/post?uri=about-us&fields=acf
in partners acf field this is what is being returned:
"acf": {
"image_and_text": [],
"partners": [
{
"id": 202,
"src": "https://jhpiego.flywheelsites.com/wp-content/uploads/2025/02/Pabst.svg",
"width": 0,
"height": 0,
"alt": "",
"caption": "",
"title": "Pabst",
"description": "",
"mime_type": {},
"html": "<img src=\"https://jhpiego.flywheelsites.com/wp-content/uploads/2025/02/Pabst.svg\" class=\"attachment-full size-full\" alt=\"\" decoding=\"async\" loading=\"lazy\" />",
"srcset": "[https://jhpiego.flywheelsites.com/wp-content/uploads/2025/02/Pabst.svg 0w](https://jhpiego.flywheelsites.com/wp-content/uploads/2025/02/Pabst.svg%200w)",
"sizes": "0px",
"meta": {
"filesize": 20632
},
"acf": [],
"type": "image"
},
i think i field like encodedContent or something like that is what we want to return the svg like so:
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMS45OSAyQzYuNDcgMiAyIDYuNDggMiAxMnM0LjQ3IDEwIDkuOTkgMTBDMTcuNTIgMjIgMjIgMTcuNTIgMjIgMTJTMTcuNTIgMiAxMS45OSAyem0zLjMgMTQuNzFMMTEgMTIuNDFWN2gydjQuNTlsMy43MSAzLjcxbC0xLjQyIDEuNDF6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48L3N2Zz4=
then it should all work.
Let me know if you have any questions or other ideas, thanks!