How to svg base64 encoding: size overhead, limits, and optimisation tips
- Step 1Calculate your Base64 size — Formula: Base64 size ≈ original bytes × 1.37. A 2 KB SVG becomes ~2.74 KB Base64. For JSON, account for JSON string escaping adding a further ~1%.
- Step 2Minimise overhead by optimising first — Run your SVG through the Metadata Scrubber and Minifier before encoding. Every byte saved before encoding saves 1.37 bytes in Base64 output.
- Step 3Check limits for your target context — JSON body: effectively unlimited. CSS file: aim for under 100 KB total. HTML attribute: no formal limit but over 50 KB impacts HTML parse time. Email HTML: stay under 2 MB total.
Frequently asked questions
Why exactly 33% Base64 overhead?+
Base64 encodes 3 input bytes as 4 ASCII characters — a 33.3% increase by definition. Padding characters add a fraction more. Line breaks (every 76 characters in MIME-style encoding) add ~1.3%.
Is there a way to reduce Base64 overhead?+
Optimise the SVG source before encoding — every byte saved reduces Base64 output by 1.37 bytes. You cannot reduce the Base64 encoding overhead itself; it's a mathematical property of the algorithm.
What is the maximum Base64 string length browsers can handle?+
Modern browsers support data URIs of at least 2 MB (Chrome supports over 32 MB). The practical limit is CSS parse time and JS string memory — keep individual Base64 SVGs under 100 KB.
Does the JAD tool produce standard RFC 4648 Base64?+
Yes. The output is standard Base64 (RFC 4648) without line breaks. Use the Advanced option for MIME-safe output with line breaks every 76 characters, if your target requires it.
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.