How to style SVG with CSS in WordPress

I use SVG files in my websites in place of image files wherever I can. I love the ease of changing the properties of an SVG ‘image’ such as the colour. In particular the small file-size (relatively to a PNG or JPEG image) and ability to scale whilst maintaining visual quality are winners for me.

WordPress, by default, doesn’t allow the insertion of inline SVG into pages nor posts. Importing into the media library also isn’t by default permitted. There are plugins available that mostly allow for adding SVG files into the media library and then displaying the SVG file via an IMG tag. The issue with this method is that it isn’t possible to then adjust the properties of the SVG using CSS. For example if you wanted to change the colour of an SVG inserted into WordPress using an IMG tag, then .class { fill: #ffffff; } nor .class { color: #ffffff; } nor any other means will work.

Fortunately there is a plugin available that will both allow for adding a SVG file to the file manager in addition to in-lining the SVG image.

The Plugin to add and inline SVG in WordPress

SVG Support is the plugin that solves the various WordPress SVG issues for us. The plugin does the following:

1. Allows for adding SVG files into the WordPress media library.
2. Inserts SVG files into pages and posts inside the HTML IMG tag.
3. Optionally adds a new class to the inserted IMG tag
4. Optionally inlines the SVG image.

The last two items above are by default not enabled when you activate the plugin. To enable the two options:

1. Go to the settings page for the plugin.
2. Click ‘Yes’ next to the Enable Advanced Mode? question.
3. Save the change.
4. Click ‘Yes’ next to the Automatically insert class? question.
5. Save the change.

How to style SVG images in WordPress

Now that the SVG is in-lined in your page or post you may use CSS to style the ‘image’. The SVG Support plugin by default adds a class of style-svg to each in-lined SVG. This means that, for example, to change the colour of the file you’ll add the following CSS:

.style-svg {
    fill: #fff;
}

Have fun. You are now able to use CSS in WordPress to style your SVG images.