I Know I Should Use SVGs But I Don't Know How

Most people are using SVGs in their front end code, but according to Advanced Web Ranking.com, only 3% of sites are using them to their full potential. In this talk we will go through the lesser known features of SVGs and how they'll save you time in development.

Transcript

1. I KNOW I SHOULD USE SVGs BUT 
 DON’T KNOW HOW
2. Hello! COLIN LORD Senior Front End Developer Modea @colinlord @modea
4. modea.com/careers
5. Hello! COLIN LORD Senior Front End Developer Modea @colinlord @modea
7. There’s more to say.
10. Why are SVGs awesome? • Smaller files (if used properly)
11. SVG vs JPG SVG (0.5k) JPG (12k)
12. Why are SVGs awesome? • Smaller files (if used properly) • HDPI ready
13. SVG vs JPG SVG (0.5k) JPG (12k)
14. SVG vs JPG SVG (0.5k) JPG (21k)
15. Why are SVGs awesome? • Smaller files (if used properly) • HDPI ready • Fully supported in all modern browsers
17. 97% Global Browser Support
19. • Smaller files (if used properly) • HDPI ready • Fully supported in all modern browsers Why are SVGs awesome? • Easy to animate • Manipulate with CSS and JavaScript • Perfect for responsive sites
23. Not every image should (or can) be an SVG.
24. 1. Image Tag <img src=“my-awesome.svg” />
26. 2. CSS Backgrounds .svg {background: url(“my-awesome.svg”);}
28. SVG IS NOT LOADED INTO THE DOM
29. 3. SVG Right In Your HTML
31. 97% Global Usage - Inline SVG http:/ /advancedwebranking.com/html/#svg-overview
32. Why wouldn’t we just use this every time?
34. 4. SVG Sprite
38. SVG sprites are NOTHING like this.
39. <svg width="0" height="0" style="display: none;”> </svg>
40. <svg width="0" height="0" style="display: none;”> <symbol id="svg-facebook" viewBox="0 0 50 50”> </symbol> <symbol id="svg-twitter" viewBox="0 0 50 50”> </symbol> </svg>
41. <svg width="0" height="0" style="display: none;”> <symbol id="svg-facebook" viewBox="0 0 50 50”> <title>Facebook</title> <!-- svg code goes here --> </symbol> <symbol id="svg-twitter" viewBox="0 0 50 50”> <title>Twitter</title> <!-- svg code goes here --> </symbol> </svg>
42. <div class="social-icons"> <svg> <use xlink:href="#svg-facebook"></use> </svg> <svg> <use xlink:href="#svg-twitter"></use> </svg> </div>
44. 1. Image Tag 2. CSS Backgrounds 3. SVG Right In Your HTML 4. SVG Sprite
48. 1. Image Tag 2. CSS Backgrounds 3. SVG Right In Your HTML 4. SVG Sprite
49. <img> CSS HTML Sprite Smaller file sizes Caching Clean HTML Repeating the same SVG Implementation speed Animation Icon sets HDPI & any width/height DOM Manipulation
50. • Smaller files • Fully supported in all modern browsers • Easy to animate • Manipulate with CSS and JavaScript • Always optimized for HDPI screens • Perfect for responsive sites Why are SVGs awesome?
51. They save you time! Why are SVGs awesome?
52. THANKS! Let’s chat. Twitter @colinlord Skype @colinlord Email hello@colinlord.com Codepen codepen.io/colinlord Slides bit.ly/svg-ct2017