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!

1. really
and SVG
How I learnt to stop using icon fonts

2. Hello!

7. 1000WORDS
A picture is worth

9. Tree Woods Forest

10. 🍆🙈🦄

12. 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

13. ICONSmake for better communication

17. Menu

18. ICONSmake for better websites

20. 38!

21. SPRITELYCSS solutions

23. .twitter-icon {
background-position: 102px -48px;
}

24. RESCUE!
Icon fonts to the

25. HACK
Icon fonts are a

26. SVG.
What’s next?

27. <svg>
<path class="heart" d="M25.79,10.7a4.77,4.77,..." />
</svg>

30. BOTHER?
Why should I

31. REASONSyou should switch to SVG
5

32. SEMANTICS.
Perhaps you care about
1

33. 2 ACCESSIBILITYis better out-of-the-box.

34. <svg>
<title>Heart</title>
<desc>A fluorescent teal heart.</desc>
<path class="heart" d="M25.79,10.7a4.77,4.77,..." />
</svg>

36. LOOKBETTER
Your icons are going to
3

37. .heart {
fill: #B9FDFE;
}

38. .heart {
fill: none;
stroke: #B9FDFE;
stroke-width: 2px;
}

39. .heart {
fill: #B9FDFE;
}
.arrow {
fill: #FD80E5;
}

40. .arrow {
transition: all 0.5s ease-in;
transform: translate
(20, -20);
}

41. FAILUREis an awful lot less likely.
4

46. BROWSERS
Happier
5

48. 4.5per cent of global browser usage

49. OKAYI’m convinced.
HOWDOIDOIT?

50. POISON
Choose your

51. DATAURI

52. .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;
}

53. <span class=“skull-icon”> </span>

54. SYMBOL

55. <svg style="display: none">
<symbol id="heart-icon">
<...>
</symbol>
<symbol id="skull-icon">
<...>
</symbol>
</svg>

56. <svg class="skull-icon">
<use xlink:href="#skull-icon"></use>
<svg>

57. <svg class="skull-icon">
<use xlink:href="icons.svg#skull-icon"></use>
<svg>

58. BESTFRIEND
Reusable, modular code is your

59. <?php themeslug_icon( 'skull' ); ?>

60. [themeslug-icon name="skull"]

61. TASKRUNNERSYour other best friend forever.

63. SOCIALMENUS?
But what about my

64. add_filter( 'wp_nav_menu_objects', 'themeslug_social_menu' );

65. <a href=“http://twitter.com/sarahsemark”>Twitter</a>

66. <a href=“http://twitter.com/sarahsemark”>
<svg class=“twitter-icon”>
…
</svg>
<span class=“screen-reader-text”>Twitter</span>
</a>

67. JETPACKsocial menus

68. add_theme_support( ‘jetpack-social-menu‘ );
function themeslug_social_menu() {
if ( has_nav_menu( ‘jetpack-social-menu‘ ) ) : ?>
<nav class=“jetpack-social-navigation” role=“navigation”>
<?php
wp_nav_menu( array (
‘theme_location’ => ‘jetpack-social-menu’,
‘link_before’ => ‘’,
‘link_after’ => ‘’,
) );
?>
</nav>
<?php endif;
}

69. REACT?
what if I’m using

70. const SkullIcon = React.createClass( {
render() {
return(
<svg className=“skull-icon”>
…
</svg>
)
}
} );

71. ACCESSIBLE?
How do I make sure all this is

72. <svg aria-hidden="true">
<use xlink:href="#skull-icon"></use>
</svg>

73. <svg role="img" aria-labelledby=“skull-title">
<title id="#skull-title">skull</title>
<use xlink:href="#skull-icon"></use>
</svg>

74. <a href="#" aria-label="Delete all items">
<svg>
<use xlink:href="#skull-icon"></use>
</svg>
</a>

75. FALLBACKS
a quick word about

76. <svg>
…
<image src="skull.png" xlink:href=""/>
</svg>

77. THANKSFORFLYING!

78. QUESTIONS?
@sarahsemark
github.com/sarahmonster/easy-as-svg
triggersandsparks.com/talks/svg-icons