WordPress ships with a pretty advanced media management system. Through it, you are able to upload various image formats such as PNG and JPG. While this is great, it may come as a surprise to learn WordPress does not natively support vector graphics yet — primarily due to security considerations we have listed below.
Thankfully, the WordPress community has stepped up providing a few ways to make support Scalable Vector Graphics (SVG) files play nicely with WordPress. Once your WordPress site is SVG compatible, you’ll be able to optimize your existing website logos and graphics with this more ‘modern’ image type.
So what will we cover? First, we’ll go over what exactly SVG files are, their benefits, and from that, why you may decide to use them as opposed to other images formats. Once we have cleared that out the way, we’ll show you how to enable SVG support within your WordPress website. Ready? Let’s get started!
What is an SVG?
SVG files are a type of vector image. This image format is formed very differently from more traditional image types. For example, a JPG is made up of thousands of pixels which forms the image you see. A vector or SVG file on the other hand does not contain pixels, instead, it acts in a more schema/data map type format outlining a set of written instructions to create two-dimensional images. This gives it several unique benefits over other image types.
Should I use an SVG?
Given the structure of SVG files they do come with certain advantages, and for certain use cases would be the new recommended image format wherever possible. First and foremost, as they are simply a set of written instructions in a sort of schema format, the display size of an SVG can easily be manipulated without impacting the quality of the image. Gone are the days of trying to resize that JPG just to find the quality degrading very quickly!
SVG files also benefit the file size department as they tend to be significantly smaller compared to more traditional file types. Smaller file size images tend to translate to faster performance for your website visitors which can result in positive gains.
Enabling SVG support in WordPress
To enable SVG support we’re going to use a plugin that should cover your needs as well as give you various options to help improve security.
Using a Plugin
The first step is to select an SVG plugin and install it within your WordPress admin area. For this, we recommend SVG Support (which we actually use on this website).
You can search for SVG within the WordPress Admin area -> Plugins -> Add New and click on the Install & Activate buttons to get started.
Once you have installed the plugin, you should see a new menu item under the Settings left sidebar menu called SVG Support.
Clicking on this menu item will provide you with a description of how to use the plugin as well as contain various admin configuration settings, including the ability to restrict uploading SVG files to administrators only. We recommend you enable/select this option.
Once ready, click on the blue Save Changes button and you should be able to upload SVG graphics through your media manager as if you were uploading a traditional image file format.
