A presentation at WordCamp Raleigh in in Raleigh, NC, USA by Colin Lord
If you see a Coke bottle in any slides, look for some additional links or information.
https://caniuse.com/#search=svg
SVG with JavaScript: https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/
https://abookapart.com/products/practical-svg
https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg
DOM: Document Object Model https://css-tricks.com/dom/
97% Global Usage - Inline SVG http://advancedwebranking.com/html/#svg-overview
For historical purposes and remembering more painful times: https://css-tricks.com/css-sprites/
You probably don’t want to use sprites today!
Depending on your implementation, you will probably want to place this at the top or bottom of your page or template. Think of an SVG sprite kind of like a JavaScript library or a CSS file.
Accessible SVGs: https://css-tricks.com/accessible-svgs/
https://github.com/iconic/SVGInjector
Slides bit.ly/wcraleigh-svg Twitter @colinlord Email hello@colinlord.com Codepen codepen.io/colinlord
Thanks for downloading the speaker notes. I’ve been a big fan of using SVGs the last couple years and hopefully you can tell that it’s something I like talking about! If you ever have a pesky question, feel free to send me a message. The best way to get my attention is probably on Twitter but you can use my email as well.
Using SVG images are a lot like going to the gym. We all know we should be using them when we write our front end code, but we end up putting it off for another project down the road. And when SVGs are used, they are often implemented in a way that doesn’t unlock their full potential.
During this presentation, we’ll discuss the best practices for SVG implementation and how they vary depending on the size and audience of your site. We will also go through what an SVG sprite is, how to create one, and why they’re awesome. According to Advanced Web Ranking.com, only 3% of sites on the internet use this technique…but 97% of browsers support it!
After this talk, you’ll be ready to work on your SVGs like you’ll be ready to work on your summer body!
The following resources were mentioned during the presentation or are useful additional information.
Chris Coyier's book about all things SVGs.
A great blog post that outlines the best time to use each of the four primary web image types.
Statistics on the ways that developers are currently implementing SVGs in their code.
Information about how to make sure your SVGs meet level A, AA, or AAA accessibility compliance.
Information about the deprecated xlink:href attribute. In the near future you will likely want to use both xlink:href and href.
This is an example of an SVG that uses JavaScript to always display the current date.
Here’s what was said about this presentation on social media.
for free. You
can too.