SVG Tutorial

Original Article ↗ Hacker News Discussion ↗

An SVG-focused advent calendar of tutorials is drawing praise for making vector graphics approachable, with step‑by‑step lessons that cover everything from basic shapes and paths to gradients, clipping, animation, and data‑driven diagrams. Commenters compare workflows such as hand‑coding SVG versus exporting from tools like Figma or Illustrator, and highlight powerful combinations like SVG with React, as well as features like `<foreignObject>` and inline styles for interactivity. They also note practical trade‑offs—caching vs. inlining, browser quirks on mobile, UI nits on the site—and suggest that understanding SVG “under the hood” remains valuable even as higher‑level generators and AI tools emerge.

Overall reception of the SVG tutorial

  • Strongly positive reactions; many say it “clicked” concepts they’d meant to learn for years.
  • Appreciated as a structured, incremental series (one concept per day) with fun, themed examples (Christmas tree, bell, clock, etc.).
  • Some find the advent calendar UI charming but inconvenient for quick navigation; a Table of Contents was suggested and later added.

Authoring SVG: hand-coded vs design tools

  • Common workflow: designers use Illustrator/Figma/Inkscape; developers then clean up and hand-edit the SVG, especially for interactivity and optimization.
  • Simple icons (arrows, hamburger menus) are often hand-coded directly. Complex shapes and curves are usually drawn visually and exported.
  • Discussion highlights SVG as both a graphic format and readable XML that can be manipulated, animated, and generated programmatically.

SVG + React and programmatic graphics

  • Many describe success using inline SVG in React/Preact to build interactive components, charts, games, music tools, and even laser-cutter patterns.
  • Pros: easy event handling (onmouseover, click), CSS styling, composability, and data-driven diagrams.
  • Cons: inlined SVG can’t be cached separately, leading to repeated bytes across components and pages. Canvas may be more performant for heavy graphics.

Text, layout, and styling

  • Text alignment and multi-line text in SVG are widely seen as painful. text-anchor is useful but fiddly; some resort to trial-and-error or code generation.
  • foreignObject is praised as powerful for embedding HTML (links, images, flexbox layouts) inside SVG.
  • Inline <style> with classes is confirmed as a way to keep SVG self-contained.

Browser quirks and bugs

  • Some examples (gradients, clip-path motifs, mobile rendering) break or degrade on Firefox/Edge for Android and certain mobile Chrome setups.
  • Several broken links and small navigation bugs in the tutorial were reported and fixed.

Reuse, optimization, and patterns

  • Suggestions to avoid duplication using <defs>, <use>, clipPath, and symbols to make SVGs more maintainable.
  • Caching and file-size reduction are recurring concerns.

Other topics

  • Brief debate about “tag” vs “element” terminology; consensus is that precision is nice but not essential for learners.
  • Mention of tools like Boxy SVG, online path editors, and Satori (HTML/React → SVG) as complementary approaches.
  • Final open question about whether code assistants could generate SVG from descriptions; no clear answer given.