Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How i learned to stop using icon fonts and love SVG

1,878 views

Published on

Once upon a time, icon fonts were the exciting new tools we used to build better websites. That time has passed, yet most of us are still relying on a tool that’s no longer relevant in the landscape of the modern web. In this talk, I’ll discuss the various merits of making the switch to SVG and some neat things you can do with SVG. We’ll touch on various use cases, and present some ideas for determining the workflow that’s best suited to your individual needs. We’ll provide some practical tips and tools for using SVG sprites more easily and efficiently in your work. We’ll also discuss ideas for implementing SVG within WordPress themes and plugins in a simple, consistent manner. Along the way, we’ll discuss various challenges you may encounter, and how to approach them. By the time we’re done, you’ll be fully armed to start using SVG today!

Published in: Design
  • Be the first to comment

How i learned to stop using icon fonts and love SVG

  1. 1. and SVG How I learned to stop using icon fonts
  2. 2. Hello!
  3. 3. 1000WORDS A picture is worth
  4. 4. Tree Woods Forest
  5. 5. 7 6 6 4 51 9 1 9 8B 2 Coyuya El Rosario Autobuses del Norte La Villa - Basílica Eduardo Molina San Antonio Abad Pantitlán Impulsora Nezahualcóyotl Villa de Aragón Bosque de Aragón Deportivo Oceanía Oceanía Terminal Aérea Hangares Agrícola Or Canal de Sa PueblaCiudad Deportiva VelódromoMixiuhca Zaragoza Gómez Farías Boulevard Puerto Aéreo Balbuena Moctezuma Romero RubioRicardo Flores Magón San Lázaro Canal del Norte Candelaria Merced Fray Servando Jamaica Tepito Morelos LagunillaGaribaldi Allende Zócalo Isabel la Católica Pino Suárez Chabacano San Juan de Letrán Salto del Agua Bellas Artes Hidalgo Guerrero Aragón Talismán Consulado → La Raza Bondojito Martín Carrera Deportivo 18 de Marzo Potrero Lindavista Insituto del Petróleo VallejoNorte 45FerreríaAzcapotzalcoTezozómoc Aquiles Serdán Camarones Refinería San Joaquín Polanco Auditorio Constituyentes Buenavista Tlatelolco Misterios Valle Gómez Juárez RevoluciónSan Cosme NormalColegio Militar PopotlaCuitláhuacPanteones Cuatro Caminos Tacuba Observatorio Tacubaya Juanacatlán Chapultepec Sevilla Insurgentes Cuauhtémoc Balderas Doctores Obrera Niños Héroes Hospital General Centro MédicoPatriotismo Chilpancingo Lázaro Cárdenas Viaducto
  6. 6. ICONSmake for better communication
  7. 7. Menu
  8. 8. ICONSmake for better websites
  9. 9. 38!
  10. 10. SPRITELYCSS solutions
  11. 11. .twitter-icon { background-position: 102px -48px; }
  12. 12. RESCUE! Icon fonts to the
  13. 13. HACK Icon fonts are a
  14. 14. SVG. What’s next?
  15. 15. <svg> <path class="heart" d="M25.79,10.7a4.77,4.77,..." /> </svg>
  16. 16. BOTHER? Why should I
  17. 17. REASONSyou should switch to SVG 5
  18. 18. SEMANTICS. Perhaps you care about 1
  19. 19. 2 ACCESSIBILITYis better out-of-the-box.
  20. 20. <svg> <title>Heart</title> <desc>A fluorescent teal heart.</desc> <path class="heart" d="M25.79,10.7a4.77,4.77,..." /> </svg>
  21. 21. LOOKBETTER Your icons are going to 3
  22. 22. .heart { fill: #B9FDFE; }
  23. 23. .heart { fill: none; stroke: #B9FDFE; stroke-width: 2px; }
  24. 24. .heart { fill: #B9FDFE; } .arrow { fill: #FD80E5; }
  25. 25. .arrow { transition: all 0.5s ease-in; transform: translate
 (20, -20); }
  26. 26. FAILUREis an awful lot less likely. 4
  27. 27. BROWSERS Happier 5
  28. 28. 4.73per cent of global browser usage
  29. 29. OKAYI’m convinced. WHATNEXT?
  30. 30. POISON Choose your
  31. 31. DATAURI
  32. 32. .skull-icon { background-image: url(‘data:image/svg +xmldata:application/octet- stream;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3J nLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgoJPHN0eWxl IHR5cGU9InRleHQvY3NzIj4KCS5oZWFydCB7CgkJZmlsbDogI2I2Z mRmTQsNS42NSw3LjQ3LDguNDEsMi41NC0yLjc2LDUuMTItNS40OSw 3LjUtOC40MSwxLjczLTIuMTEsMi45MS0zLjg1LDIuMzgtNi42M2gw WiIgLz4KPC9zdmc+Cg…’); background-repeat: no-repeat; background-position: 50% 50%; height: 1em; width: 1em; }
  33. 33. <span class=“skull-icon”> </span>
  34. 34. FRAGMENT
 IDENTIFIER
  35. 35. <svg> <path class="heart" d="M25.79,10.7a4.77,4.77,..." /> <path class="skull-outline" d="M1.02,12.39,7a,..." /> <circle class="skull-eye" cx="60" cy="60" r="10" /> <circle class="skull-eye" cx="80" cy="60" r="10" /> <...> <view id="heart-icon" viewBox="0 0 32 32"> <view id="skull-icon" viewBox="64 0 32 32"> </svg>
  36. 36. <img src="icons.svg#skull-icon">
  37. 37. SYMBOL
  38. 38. <svg style="display: none"> <symbol id="heart-icon"> <...> </symbol> <symbol id="skull-icon"> <...> </symbol> </svg>
  39. 39. <svg class="skull-icon"> <use xlink:href="#skull-icon"></use> <svg>
  40. 40. <svg class="skull-icon"> <use xlink:href="icons.svg#skull-icon"></use> <svg>
  41. 41. BESTFRIEND Reusable, modular code is your
  42. 42. <?php themeslug_icon( 'skull' ); ?>
  43. 43. [themeslug-icon name="skull"]
  44. 44. TASKRUNNERSYour other best friend forever.
  45. 45. SOCIALMENUS? But what about my
  46. 46. add_filter( 'wp_nav_menu_objects', 'themeslug_social_menu' );
  47. 47. <a href=“http://twitter.com/sarahsemark”>Twitter</a>
  48. 48. <a href=“http://twitter.com/sarahsemark”> <svg class=“twitter-icon”> … </svg> <span class=“screen-reader-text”>Twitter</span> </a>
  49. 49. THANKSFORFLYING!
  50. 50. QUESTIONS? @sarahsemark github.com/sarahmonster/easy-as-svg triggersandsparks.com/talks/svg-icons

×