Using SVGs in WordPress

February 1, 2015

Filed Under: Front-End Design

SVGs are hot stuff in front-end web design these days, and I’m on board the SVG train. They’re lightweight, they look great on all sizes and types of screens, and you can style them with CSS, which opens up all sorts of fun stuff. But this post isn’t going to be SVG apologetics. It’s going to be a rundown of how exactly you get an SVG into your site in Drupal or WordPress.

1. Getting Your SVG Ready

For this tutorial, we’re going to go through the process of using an SVG logo in your header. We’re going to assume that a graphic designer gave you a file called logo.svg, and you have to take it from there.

In your theme directory, create a folder called “images,” if you haven’t already. Inside that folder, create one called “svg.” You can name these whatever you want, but there’s probably no reason to get weird with it. Drop your logo.svg file into the svg folder.

Now, you’re going to want to open your SVG. But wait! Don’t double click. If you double click, it’ll open in Illustrator or your web browser or some weird program that you didn’t know you had that will just give you an error message anyway. Instead, right-click or option click on it, select “open with,” and then use your text editor. (Sublime Text, Textmate, a notepad file, whatever.)

You will see something that looks like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="brecynlogo_xA0_Image_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" viewBox="-107.7 92.9 994 496.8" enable-background="new -107.7 92.9 994 496.8" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M740.2,144.1c-2.8,1.7-5.7,3.5-8.5,5.5c-5,3.3-10,6.8-15.3,10c-6.8,4.4-13.5,8.5-20.1,12.9
		c-8.3,5.2-16.4,10.7-24.6,15.9c-7,4.6-14,9.2-20.9,13.7c-5,3.3-10,6.1-15,9.2c-6.5,3.9-13.1,7.8-19.6,11.8
		c-7.2,4.1-14.2,8.5-21.4,12.6c-6.1,3.7-12.4,7.2-18.5,10.7c-8.7,5.2-17.2,10.5-25.9,15.5c-6.5,3.9-13.1,7.6-19.6,11.6

This is just the start of the file. SVGs are long — they’re describing an image in code, after all. The part that’s relevant to us right now are the top two lines, the one that starts with SVG spec or one of the great tutorials out there.

Save the file and never look at the SVG code again.

A Note on Compressing SVGs

It is considered a best practice to compress your SVGs in something like compressor.io. However, not once in actual practice has that or any other compressor reduced one of my SVGs by a substantial amount. I’m not sure whether the designers I work with are pre-compressing them or if I’m just doing something wrong. And, since we’re using these SVGs inline (I’ll explain that in more detail further on), they’re going to be g-zipped anyway, which reduces their size further. So just know that it’s best practice to compress your SVGs just like any other image, but don’t feel dumb or alone if it doesn’t do anything.

Putting Your SVG In Your HTML

There are a number of ways you can use SVG in your HTML. You can use it like a regular image, a background image, or — what we’re going to do — inline, as in the SVG code is going to be dropped straight into your HTML. Chris Coyier covers the pros and cons of these options over on CSS Tricks, but we’re inlining the SVG mainly because it’s relatively hassle free and it allows you to style the SVG with CSS, which is one of the big benefits of using SVG in the first place.

To inline your SVG, you could just copy and paste it into your header.php file in your theme and call it good. But, as you’ll remember from the ugly code file you opened a moment ago, SVGs are usually long and clunky. If it’s sitting in your header.php, it’s annoying and opens you up to accidentally messing with it, which is best avoided.

So we’re going to use a bit of PHP to inline the SVG for us so that we don’t have to look at its ugly innards ever again. Here’s the PHP:

<?php 
  $logo = get_template_directory();
  $logo .= "/images/logo.svg";
  include($logo);
?>

That code gets our template root directory, adds our specific file location to the end of it, and then includes it in our file. (This code is for WordPress. For Drupal, use path_to_theme instead of get_template_directory.

Bonus PHP Function

The code above is great, and will work perfectly. But, if you’re using multiple SVGs, you can save yourself some time/space and be a better, non-repetitive coder by creating a function. Open up your functions.php file, and put this code in there:

function inline_svg($name) {
  $file = get_template_directory();
  $file .= "/images/" . $name . ".svg";
  include($file);
}

Now, in your header.php, you can get rid of the code we used above and replace it with:

<?php 
inline_svg(logo);
?>

With this function, you just give it the name of your file (without the svg file type), and it does all the work of getting the file path and outputting it into your HTML. This isn’t completely necessary, but it’s probably a better way to do it.

One Last Thing on Inlining SVGs

You can add a class directly to your SVG if you want, but I find that it’s best to wrap it in something. In this case, since it’s a logo in our header, we’re going to wrap it in a link tag and give the link the class. So our final code will look like this:

<a href="/" class="logo">
<?php 
inline_svg(logo);
?>
</a>

Enabling CSS Styling

As it stands, you can now style your SVG with CSS. Remember that with SVG, instead of “color,” you use “fill.” So to make your SVG white normally and blue when you hover over it or focus on it, you’d do this:

.logo svg {
  fill: white;
}

.logo:hover svg,
.logo:focus svg {
 fill: blue;
}

Easy, right? There are a few gotchas, though. Occasionally, I’ve tried to color an SVG, and only parts of it have turned that color. That means there’s something funky with the SVG file, which is totally okay. With your web browser’s inspector tool, inspect the part of the SVG that didn’t turn the right color. Each element within the SVG has an XML tag, usually something like . If it’s all the paths that aren’t turning your color, just target the with your CSS:

.logo svg,
.logo svg path {
  fill: white;
}

.logo:hover svg,
.logo:hover svg path,
.logo:focus svg,
.logo:focus svg path {
 fill: blue;
}

That should do the trick. If it doesn’t, it’s likely that there’s an inline style applied to the SVG element for some reason, which you can go in and remove, or override with specificity in your CSS.

You can do a lot more than color your SVGs with CSS. I usually size my SVGs with CSS, and you can also animate them, rotate them, or do whatever other crazy CSS shenanigans you’d like. At cptc.edu, I hide a section of the logo on smaller-screen views.

Fallback for Non-SVG Browsers

SVGs don’t work in browsers before Internet Explorer 9, and IE9-11 sometimes do some unexpected things with the sizing and viewport, but in my experience it’s not an issue if you sized your SVG through CSS.

If you want to support browsers before IE9, you’ll want to display a fallback PNG image. You can either detect SVG support with Modernizr, or you can put some CSS in an IE8 and below stylesheet. If you’re using Modernizr, your code will look something like this:

.no-svg .logo {
  display: block;
  width: 200px; // however wide your image is
  height: 100px; // however tall your image is
  background-image: url(images/logo.png);
}

.no-svg .logo svg {
  display: none;
}

What we’re doing here is we’re taking our link and making it a block element the size of our image, and then we’re using our PNG logo as the background. We’re then hiding the SVG itself, which isn’t necessary, but it makes me feel better to know that it will be completely hidden.

You’re all done. Happy SVGing!