I recently had the opportunity to speak for to the Advanced WordPress group in Austin. Special thanks to Corey Ellis for putting it all together. Here are my slides and demo videos from the talk. We had two cameras on the room, so if I find a video of the presentation show up I’ll hook that in here as well.

The main idea: SVG is not so scary. If you know HTML and CSS, you have what you need in your toolbelt to start playing with SVG. This short light introduction focuses on using SVGs as Icons making use of the <use> element.

Slides

Standalone Slides

Demo Videos

Getting icons from the Noun project and making use of them by literally inlining the code into a very basic HTML page.

 

Building off the first demo, rather than use the SVG code directly, we move it to a <defs> block and place <use> tags in the markup where we would like the SVGs to display.

 

Finally, to make use of browser caching, we move our SVG definitions to an external file and reference them in our existing <use> tags.

Other Resources

And Much Much More…

This really only scratches the surface of SVGs and what they can do. The above resources can certainly help you take SVGs further, but it’s a very big world. Take it a piece at a time. Start with icons, then maybe play with one of the other topics, animation, etc. But the main thing:

Go use SVG!