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…?
| HTML | 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.