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.

svg-spritemap

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:

add-svg

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.

create-svg-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.:

<svg><use xlink:href="http://www.test.dev/wp-content/plugins/svg-spritemap/defs.svg#:bunny"></svg>

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

svg-bunny

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.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

1 Comment


  1. This is cool. I was just thinking about svg and the media uploader last night. Giving end users the ability to use an svg for a logo through the media library is pretty awesome but the downside that I see is – how do you handle fall backs?

    It would be great if you could also upload a png and specify it as a fallback for browsers that don’t support svg. Maybe someone far smarter than me has a solution?

    Report

Comments are closed.