Notes on SVG, data URIs, and the front-end
Short, opinionated writing on inline SVG, encoding tradeoffs, and shipping cleaner UI code.
- 6 min read
Inline SVG in React — Component vs Data URI, When to Use Each
React gives you two ways to use SVG: as a component or as a data URI in an <img> tag. Both work — see the tradeoffs on bundle size, styling, interactivity, and when to pick each.
Read post - 5 min read
Use SVG as a CSS Background Image — Inline with Data URIs
Inline any SVG as a CSS background-image with a URL-encoded data URI. Zero network requests, no extra files, full styling control. Complete working example inside.
Read post - 4 min read
Data URI vs Base64 for SVG — Which Encoding to Use
URL-encoded SVG data URIs add ~3-12% overhead versus Base64's flat 33%. See the byte-size comparison and when to use each format in production CSS.
Read post