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

E7d267d701125e7eb3c746e642685579?s=47 Colin Lord
September 21, 2017

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.

E7d267d701125e7eb3c746e642685579?s=128

Colin Lord

September 21, 2017
Tweet

Transcript

  1. I KNOW I SHOULD USE SVGs BUT 
 DON’T KNOW

    HOW
  2. Hello! COLIN LORD Senior Front End Developer Modea @colinlord @modea

  3. None
  4. modea.com/careers

  5. Hello! COLIN LORD Senior Front End Developer Modea @colinlord @modea

  6. None
  7. There’s more to say.

  8. None
  9. None
  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
  16. None
  17. 97% Global Browser Support

  18. None
  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
  20. None
  21. None
  22. None
  23. Not every image should (or can) be an SVG.

  24. 1. Image Tag <img src=“my-awesome.svg” />

  25. None
  26. 2. CSS Backgrounds .svg {background: url(“my-awesome.svg”);}

  27. None
  28. SVG IS NOT LOADED INTO THE DOM

  29. 3. SVG Right In Your HTML

  30. None
  31. 97% Global Usage - Inline SVG http:/ /advancedwebranking.com/html/#svg-overview

  32. Why wouldn’t we just use this every time?

  33. None
  34. 4. SVG Sprite

  35. None
  36. None
  37. None
  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>
  43. None
  44. 1. Image Tag 2. CSS Backgrounds 3. SVG Right In

    Your HTML 4. SVG Sprite
  45. None
  46. None
  47. None
  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