Create and Manage SVG Spritemaps in the WordPress Media Library

If you try to upload an SVG in WordPress, you’ll discover that it doesn’t yet have native support for adding SVGs to the media library. However, it’s easy to add them to WordPress’ allowed mime types to remove the restriction via a plugin.

Many users are eager to use SVGs, especially for logos, because of their many advantages over traditional graphics. SVGs can scale to any size without losing quality, which means they will look great on retina displays. They can also be easily styled via CSS to add multiple colors, gradients, filters, etc.

SVG Spritemap is a relatively new plugin that allows you to upload SVGs to the media library. It also adds the ability to create and manage an SVG spritemap, which lets you display and manipulate the images separately while including them in one larger file to reduce HTTP requests.

Once you install the plugin, you’ll find SVG Spritemap under the Media menu. You’ll see that you cannot create a spritemap until you upload a few SVGs.

The usage instructions outline the general workflow for using SVG Spritemaps:

1. Install and activate the WordPress plugin.
2. Add SVG images through the Media Uploader.
3. Select the SVGs for the spritemap in Settings > Media > SVG Spritemap.

You can add SVGs to the medial library as you normally would and they will be displayed like any other file. I’ve added a handful from Flaticon.com as an example:

Navigate back to SVG Spritemap and you’ll see all of your available SVGs. Click on the images you want to add to your new spritemap.

Click on “Update SVG Spritemap” to add your selections. Those files will now be listed as “In Use.” The defs.svg spritemap is automatically generated by the plugin.

Below you will see the URL displayed for the SVG spritemap along with the estimated filesize, which represents the combined filesize of all the SVGs. It doesn’t factor in the gzip compression, so the live filesize is likely to be much smaller than the estimation.

You can reference individual sprites by appending #: and the name of the sprite to this URL, i.e.:

[html light=”true”]<svg><use xlink:href="http://www.test.dev/wp-content/plugins/svg-spritemap/defs.svg#:bunny"></svg>[/html]

You can now display your SVGs on the frontend and further customize them with CSS.

SVG Browser Support

Before using SVG Spritemap, you should be aware that IE8 does not support external SVG display, but all other major browsers are SVG-capable. This may or may not be important to you. Jonathan Neal, the plugin’s author, has created a way around this with his SVG for Everybody project, which adds special assistance to browsers to display external SVG spritemaps.

If you want an easy way to add SVGs to WordPress and create your own SVG spritemap, this plugin gives you a nice interface for generating it automatically. After testing, I can confirm that it works as advertised. Download SVG Spritemap for free from WordPress.org.