Working with Scalable Vector Graphics in WordPress
What SVGs are and how they work
Why SVGs are important
Icon fonts and why they are bad
How we can use SVGs
Questions
Russell Heimlich
(like the maneuver)
Senior Developer at nclud
Professional Toddler Chaser
SVGs define points and shapes in relation to one another in space.
JPG, GIF, TIFF, BMP are all bitmap image formats.
Color bitmaps are a grid of color values
|
![]() |
SVG | Bitmap |
Graphics need to be as crisp and as performant as possible.
Icon fonts are font files that contain symbols instead of letters or numbers.
(See Font Awesome)Icon fonts are an ugly hack!
Font icons use characters that get read aloud by screenreaders
Icon fonts use unicode characters to display their icon which can conflict with emoji.
See Etsy's Four Stars and a Horse bugWhen icon fonts fail…
SVGs can be just as flexible as icon fonts without the downsides.
Seriously, Don’t Use Icon Fonts by Tyler Sticka
Ten reasons we switched from an icon font to SVG by Ian Feather
As an <img>
<img src="/path/to/my.svg" alt="A gnarly tiger">
As a background image
.image {
background-image: url(/path/to/my.svg);
background-repeat: no-repeat;
height: 800px;
width: 800px;
}
<div class="image">
<span class="visually-hidden-text">A mighty tiger!</span>
</div>
Defining an SVG Sprite
<svg>
<defs>
<symbol id="icon-1">
<!-- Paths and shapes for first SVG -->
</symbol>
<symbol id="icon-2">
<!-- Paths and shapes for second SVG -->
</symbol>
<!-- Keep going for however many you need -->
</defs>
</svg>
Using an SVG Sprite
<svg class="icon icon-1">
<use xlink:href="#icon-1"></use>
</svg>
<svg class="icon icon-2">
<use xlink:href="#icon-2"></use>
</svg>
Inlining an SVG Where We Want It
<svg>
<path d="..."></path>
</svg>
Using <img>
or CSS background-image
offers no control of what is inside <svg>
element
SVG sprites need to load all of the SVG elements on the page whether you use them or not
Inlining SVG requires lots of copy and pasting
Loading SVG Inline is AWESOME!
Just need a pinch of CSS
svg.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}
Only use an SVG when you need it
No extra HTTP requests
Control of <svg>
elements
Takes on size and color of parent element
But what about all of that copy and pasting?
Enable SVGs in the Media Library with the SVG Support plugin.
Or add this snippet to functions.php
function enable_svg_mime_types( $mimes = array() ) {
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'enable_svg_mime_types', 10, 1 );
Function for inlining SVGs
function wp_get_svg( $path = '', $args = array() ) {
if ( ! $path ) {
return;
}
$defaults = array(
'role' => 'image',
'css_class' => '',
);
$args = wp_parse_args( $args, $defaults );
$role_attr = $args['role'];
$css_class = $args['css_class'];
if ( is_array( $css_class ) ) {
$css_class = implode( ' ', $css_class );
}
if ( file_exists( $path ) ) {
$svg = file_get_contents( $path );
$svg = preg_replace( '/(width|height)="[\d\.]+"/i', '', $svg );
$svg = str_replace( '<svg ',
'<svg class="' . esc_attr( $css_class ) . '" role="' . esc_attr( $role_attr ) . '" ',
$svg );
return $svg;
}
}
Helper function we can use in markup
function wp_svg_icon( $icon = '' ) {
if ( ! $icon ) {
return;
}
$path = get_template_directory() . '/icons/' . $icon . '.svg';
$args = array(
'css_class' => 'icon icon-' . $icon,
);
return wp_get_svg( $path, $args );
}
Code in our theme
<h1><?php the_title(); ?></h1>
<p><?php echo wp_svg_icon( 'icon-1' ); ?></p>
The rendered markup
<h1>My Awesome Post Title</h1>
<p>
<svg class="icon icon-icon-1" role="image">
<path d="..."></path>
</svg>
</p>
Folder structure of icons
We can make as many helper functions as we want for different directories of SVGs.
(See complete code snippet)SVGO https://github.com/svg/svgo
SVGO UI https://github.com/svg/svgo-gui
SVGO in Action
Using SVG - CSS-Tricks.com
Mega List of SVG Information - CSS-Tricks.com
SVG Pocket Guide - Joni Trythall
Amelia Bellamy-Royds CodePen Collections - Amelia Bellamy-Royds
Now you can't say you didn't know