How to Use SVG Files With WordPress

First Question: Why Use SVG Files With WordPress?

Answer: File size. SVG Graphics Files can reduce image file size by 99%. With the use of SVG files, we’ve reduced the entire load size of https://tastyplacement.com to 311k at the time of this writing.

SVG stands for Scalable Vector Graphics. Because an SVG file is vector-based, the image is essentially a tiny text file that defines image elements by vector position, not by storing byte-hungry, pixel-by-pixel information.

Lower file size/weight means faster loading times on all devices. Faster loading means a better user experience, lower bounce rates, and higher search rankings (so says Google, my friends).

Here’s a sample, here is a PNG file, compressed as aggressively as possible. At 800 x 344 pixels, weighs 44k:

But what can be done with SVG? The following file, which is infinitely expandable in display size, comes in at a slender 8k:

Some Limitations (and Dangers) With SVG Files in the WordPress Environment

First of all, SVG files are not native to WordPress–the media gallery doesn’t recognize the files. We’ll return to that in a minute. Second, SVG files, while rendered by modern browsers as graphics, are really text/script files. SVG files can contain exploits. So, if you maintain a website that allows the public to upload SVG files, you’d be exposing your site and site visitors to exploits. Remember I said that.

There is a third danger, and that is that older browsers may not render SVG files at all, or in an unexpected way. Microsoft’s IE8 and older are reported to not support SVG rendering. But I care so little about pandering to IE, that I haven’t even bothered to test it.

Setting WordPress to Support SVG

Okay, so WordPress doesn’t natively support SVG. There are a ton of ways to set WordPress to accept SVG files but most are not secure, and most do not enable thumbnails in the WordPress media gallery. Solution? There is a plugin that addresses both: the Save SVG plugin (link to repository files). Safe SVG does two things: it offers basic security sanitization, and it enables management of SVG files in the WordPress media gallery.

Next Steps With SVG

SVG files can be challenging to work with, they can’t be edited with traditional graphics software like Gimp and Photoshop. An SVG is more akin to an Adobe Illustrator file. Photographs aren’t suitable for SVG, but logos and patterns can be adapted to SVG quite easily.

The SVG sample above was created with Inskape SVG editing software. I struggled with that program for about the first hour but then found my sea legs and made some good progress. The “W” WordPress logo I got from the WordPress media kit and overlayed it on the pattern image with Inkscape.

Good luck with this–it’s a real benefit if your goals are site loading speed for your WordPress site.