Learn How To Animate SVG
- 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.