How to using svg base64 for cms platforms, pdf generators, and legacy apis
- Step 1Identify the target format — Does your legacy system accept HTML img tags? Use the data URI format: img src='data:image/svg+xml;base64,...'. Does it accept raw text in a description field? Use the raw Base64 string.
- Step 2Encode your SVG — Run the SVG through the JAD Base64 encoder. For legacy HTML contexts, use the data URI prefix. Note the encoded output size — very large SVGs may hit CMS field length limits.
- Step 3Embed and test — Paste the encoded SVG into your legacy system. Test rendering across the platforms you support, especially older CMS admin panels that may sanitise HTML.
Frequently asked questions
Will Base64 SVGs survive HTML sanitisation in a CMS?+
It depends on the sanitiser's configuration. Most allow img src with data URIs. Some security-focused sanitisers (like DOMPurify) strip data URIs by default — check your CMS's allowed attributes list.
How do I use SVG Base64 in a Salesforce Email Template?+
Salesforce blocks external image domains by default. Using Base64 SVG in img src='data:image/svg+xml;base64,...' embeds the image directly, bypassing domain restrictions.
Does WordPress support Base64 SVG in post content?+
WordPress strips SVG markup by default for security. Base64 SVGs in img src are allowed since the image is not interpreted as SVG markup. Full inline SVG requires plugin whitelisting.
What happens to Base64 SVG in a Word document export?+
When exporting HTML with Base64 SVGs to DOCX, most converters (Pandoc, LibreOffice) interpret the data URI and embed the image correctly. Test your specific conversion toolchain.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.