Basic Pattern Repository
A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.
A Friendly Introduction to SVG • Josh W. Comeau
A fantastic explanation of the building blocks of SVG, illustrated—as always—with Josh’s interactive examples.
Related links
Google font to SVG path
Cassie pointed me to this very nifty tool (that she plans to use in your SVG animation workshop): choose font from Google Fonts, type some text, and get the glyphs immediately translated into an SVG!
Lea Verou on Twitter
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:
<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>Useful for quick apps when you can’t be bothered to design a favicon!
SVG Artista
A handy tool for tweaking the animations in your SVGs.
Smashing TV — Webinars and Live Sessions — Smashing Magazine
Don’t miss this—a masterclass in SVG animation with Cassie (I refuse to use the W word). Mark your calendar: August 20th.
Related posts
Speedier tunes
Improving performance with containment.
Workaround
Browsers and bugs.
Inlining SVG background images in CSS with custom properties
A clever technique I learned from Trys.
Animating
A few examples of animation on the web.
Sparklining
Pimping my home page at Indie Web Camp Nuremberg.