• Have I committed to holding a presentation in 4 weeks? Yup. 🙋‍♀️
  • Do I know anything about the topic SVG animation? Nope. 🤷‍♀️
  • Will this be a most excellent way to learn? Oh yes. 👩‍💻

Scalable Vector Graphics (SVG) is a language for describing 2D graphics in XML.
– 🍒 Pocket Guide to Writing SVG by Joni Trythall

🦕 MDN web docs is another resource to keep in an open tab these next weeks.

I’ve worked with vector graphics in Adobe Illustrator for 15 years, and a couple of years with SVG (that doesn’t move). I’ve got a decent enough grasp of the vector graphics part with points on a coordinate system. But…

What does it actually mean that SVG is XML…?

Hypertext Markup Language Extensible Markup Language
describes presentation describes content
used to display data used to transport data
all tags are predefined has no predefined tags
you can’t define any custom tags you have to define custom tags

Nice! Here’s how I now understand the part about XML not having predefined tags:

It doesn’t mean I can write SVG containing with any random element I define, the browser wouldn’t understand my <cocktail-glass-shape>. But the W3C SVG Working Group could leverage the language XML to define a <cocktail-glass-shape>. In the case of SVG, this part of XML is not that relevant for me as an <svg> coder. The XML language feature to define my own tags becomes way more interesting in other settings.