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
SVG Background Color in CSS — Mask, Image, or Inline
SVG background color usually means one of three jobs: paint behind artwork, recolor a one-color icon, or keep a multicolor graphic. Here is which CSS technique to use, and when a mask is the wrong tool.
Read post - 5 min read
SVG Favicon in 2026 — Inline with a Data URI
Ship a single SVG favicon as an inline data URI. Crisp at any size, supports dark mode via prefers-color-scheme, no extra HTTP request. Full example with legacy .ico fallback.
Read post - 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
