Nice things with SVG

Original Article ↗ Hacker News Discussion ↗

CSS Animation, Games, and Interactivity

  • Several commenters only now realized SVG can be animated purely with CSS, without JS.
  • People speculate about SVG-based games (e.g., Asteroids, Tetris) and share past projects that used SVG for smoothly animated games, including a Doom-style engine with SVG as the map editor.
  • Some argue canvas is more performant for games, but SVG is nicer for DOM integration, debugging, and accessibility.

Reuse, Entities, and Internal Complexity

  • Discussion of using XML entities in inline DTDs as “constants” (lengths, angles) in SVG; browsers tend to support this, but many tools ignore DTDs due to DoS concerns (e.g., “billion laughs”).
  • Contrast between entities (resolved at parse time, like macros) and <use>/<symbol> (live DOM clones with overridable properties).
  • SVG cloning via <use> is highlighted for building fractals and repeated shapes, but very complex SVGs can still lock up or crash renderers.

Tooling, Performance, and Cross‑Browser Issues

  • Strong sentiment that SVG is powerful but underused, largely due to:
    • Complex features rendering differently across browsers.
    • Many renderers only implementing subsets of the spec.
    • Large/complex SVGs being slow versus PDFs.
    • Tooling issues: Inkscape dominates as a native SVG editor but has quirks and non-portable extensions; other tools treat SVG as a lossy export format.
  • Some note Safari and SMIL/animation bugs can even kill tabs; others stress that complex animated SVG often hits nasty edge cases.

AI, Libraries, and Learning Resources

  • Mixed views on LLMs: some see improving results with iterative prompting; others say they’re still poor at novel shapes.
  • A recent research approach using Neural Radiance Fields for SVG is mentioned; code has just been released.
  • Several links to talks and books on SVG paths, animation, and text layout; consensus that the depth of the spec is underappreciated.

Use Cases, UX, and Styling

  • Tailwind + SVG is praised for simple hover/transform effects.
  • Examples shared: diagramming that respects dark/light mode with pure CSS, SVG-driven manufacturing/plotting workflows, SVG-based games and visualizations.
  • One landing page with heavy SVG/CSS effects is criticized as laggy and over-stylized on some hardware, sparking a side debate about hardware/browser performance.

Security, Architecture, and Alternatives

  • SVG is flagged as a potential injection vector; one commenter had to harden an app after a pen test.
  • Some wish for a minimal, simpler vector format instead of full SVG, and others dream of a browser that only runs WASM and displays SVG, skipping HTML/JS.
  • A contrarian view frames intricate SVG/CSS “hacks” as evidence the web stack is ill-suited to rich multimedia, compared to game engines or Flash-era tooling.