How To Add SVG To WordPress

WordPress supports multiple image formats out of the box, including .jpg, .jpeg, .png, and .gif. However, it doesn’t enable you to use Scalable Vector Graphics (SVGs), which is one of the most flexible image types out there. Fortunately, learning how to add SVG to WordPress is quite simple.

To enable this image format, all you need to do is tweak a couple of files. After that, you’ll be able to use SVGs within your content as regular images, logos, and more. What’s more, WordPress works flawlessly with SVGs once you’ve enabled the file type.

In this article, we’re going to talk about what SVGs are and why they’re so useful. Let’s get started!

What Scalable Vector Graphics (SVGs) are

SVGs are ideal for simple images without too many complex elements, such as icons.

SVG isn’t an image format per se. In fact, it’s actually a markup language that’s used to create two-dimensional images composed of vectors. This may sound complex in theory, but in practice, you’ll use SVGs in the same situations as you would any other images.

This matters because SVGs have some benefits over more common image types, such as PNG and JPG.

For example:

• They take up less space. Instead of pixels, SVGs are composed of vectors. So your images will weigh less, which should help your site load faster.
• You can scale them easily. As you may know, there are limits to how far you can scale up regular images before they start looking terrible. That isn’t the case with SVGs, as vectors can be scaled upwards or downwards without any loss in quality (or change in file size).
• You can animate SVGs with CSS. Vectors can be animated using CSS, which can make for some unique effects (we’ll talk more about this later).

Creating your own SVGs can be difficult if you don’t have a background in design. However, you can always look for SVG stock images, or ask your designer if they can replicate some of your site’s elements using the format.

Keep in mind that the more complex an image is, the harder it will be to replicate it using vectors. In other words, SVGs make a good alternative for simple graphics such as logos and icons but don’t work as well for photographs.

How to add SVG to WordPress manually

As we mentioned earlier, WordPress doesn’t support SVGs out of the box. However, you can either enable this feature manually. Let’s to try do it together!

Modify your site’s functions.php file

Add it to your theme-specific functions.php file depending on the approach you’re more comfortable with. If you bought it theme or if you aren’t to developing current theme, then create child-theme and write code into functions.php of the child-theme.

(Editor’s note: Doing this in your theme’s functions file is actually the recommended approach.)

Open functions.php and will scroll to the bottom and paste this code snippet there:

function add_file_types_to_uploads($file_types){
          $new_filetypes = array();
          $new_filetypes['svg'] = 'image/svg+xml';
          $file_types = array_merge($file_types, $new_filetypes );

          return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Save your changes to the file and close it. Then you can return to your dashboard and test your new feature by uploading an SVG file to your media library, which should work without a hitch!

In Conclusion

SVGs are one of the most interesting image types you can use on your website. Not only does their scalability make them a good option for responsive sites, you can also animate them so they can substitute for GIFs in certain situations. Plus, enabling them in WordPress is remarkably simple.

Just modify your functions.php file to add support for SVG.