SVG Triangle of Compromise

Original Article ↗ Hacker News Discussion ↗

Rendering quality and browser limitations

  • Multiple comments report SVG not scaling cleanly in real apps (e.g., card games, timelines). Text and icons blur or become unreadable at various sizes, with “magic” CSS workarounds and browser‑specific quirks.
  • Experiments with extreme viewBox sizes (10⁹, 10⁻⁹, Earth‑orbit scale, 84,000 km wide diagrams) show browsers and tools fail or misrender: either nothing appears, things get clamped, or browsers consume excessive memory.
  • Even moderate ranges (e.g., 0–86,400 units for seconds in a day) can break in some browsers, forcing rescaling.
  • Some tools and browsers approximate circles with Bézier curves; past issues showed visible discrepancies at high zoom, though these may be improved now.
  • Chrome sometimes lacks antialiasing for SVGs on low‑res displays, making it unsuitable for kiosk‑style UIs.

“Stylable” vs interactive vs cacheable

  • There is debate over what “stylable” means:
    • One view: any SVG can be statically styled via internal <style> or attributes.
    • Another: “stylable” means inheriting CSS from the parent document and reacting to selectors like button:hover > svg, which only works when SVG is inline, not via <img> or cross‑document <iframe>.
    • Others suggest the article is really about interactivity (scripts, hover states, links) rather than mere styling.
  • Consensus that <img> SVGs are easy to cache but effectively opaque to the page’s CSS and interaction; inline SVG is fully controllable but repeated and not cache‑friendly.

Workarounds: reuse, sprites, and components

  • <use href="...#id"> and <defs>/<symbol> are highlighted as powerful for reusing shapes/icons and building sprite sheets; they help with caching and avoid duplication, but have limits:
    • Cross‑origin use is restricted and not CORS‑configurable.
    • Some features (e.g., data: URLs in <use>) have been removed.
  • Techniques mentioned:
    • SVG sprites with object-position to toggle icon states on hover.
    • External SVG icon sets with multiple color variants in separate files.
    • Using <template> + JavaScript, or JS frameworks (React, SPAs) to inline and cache SVG via bundled JS.
    • CSS mask-image with IDs for static, color‑controlled icons.

HTML includes and templating gaps

  • Several comments argue the deeper problem is HTML’s lack of a native “include snippet” feature for reuse and caching of shared fragments (including SVG).
  • Proposed or existing mechanisms: server‑side includes, XSLT, custom elements (e.g., html-include), Turbo Frames, or a hypothetical <partial> tag.
  • There is interest in a standardized client‑side include mechanism; an open HTML spec issue on this is referenced.

Site theming / CSS nesting issues

  • Some readers see a broken dark‑mode diagram (black on black), likely due to reliance on CSS nesting, which is unsupported on older browsers and devices.
  • Others report the dark theme and SVG colors render correctly in up‑to‑date browsers, suggesting compatibility rather than design is the main issue.