An in-depth SVG tutorial

see also

• When SVG almost got network support for raw sockets - broad coverage of what can be achieved with SVG
  • SVG can do THAT?!
• TinyVG – an alternative binary encoded vector graphics format
• SVGs that feel like GIFs / HN - Some examples from Wikipedia (no JS in any) - that are using anime and some interactive.

Tutorials

• An interactive guide to SVG paths
• An SVG primer
• Shape refs
  • arrow marker on an SVG <line> element - example / redblobgames
  • dashed line
• SVGs beyond mere shapes
• Structuring, Grouping, and Referencing in SVG — The <g>, <use>, <defs> and <symbol> Elements
• parametric SVG
• Little Design Things

Tools / Application

• Inkscape
• SVG Editor (vscode)
• Karbon - Create clipart, logos, illustrations or photorealistic vector images

Libs

• Cairo as a SVG backend

References

• MDN reference site for SVG