Adding SVG to your Divi Theme WordPress Installation.

Just discovered the power of SVG? Wish to incorporate SVG imagery into your very own Divi Theme website? This Divi tutorial is for you.


What is SVG?

SVG is a Vector Graphic based on XML and used currently in a variety of different ways. SVG offers greater control over imagery used on your website – it works in conjunction with CSS and JS. You can’t edit colors of PNG or JPEG images with CSS, making SVG images incredibly versatile.

Currently, WordPress doesn’t offer much ‘out of the box’ support for SVG and isn’t likely to anytime soon. You can use SVG with WordPress, but you have to tell it to accept SVG utilising the code I will show you below.

As SVG images are way more versatile than standard imagery, they open up the possibility of malicious code being inserted into them. It is important, therefore, that if you are using SVG images from FREE resources, you ensure that the images are from reputable sources.

The consequences of uploading an SVG image that is malicious, aka has a virus in it or filled with spam, can hurt the functionality of your website and even, in some cases, affect your SEO.

So, here’s how to add SVG functionality to your Divi Theme WordPress website.

Ideally, you should have a child theme set up on your website where you can make edits to your theme that won’t get overwritten once your theme gets updated, more on Divi Child Themes here.

If you are using a Child Theme, you’ll already have a functions.php file.

Go to appearance, within the WordPress Dashboard, hover over it and select ‘Editor’.

Navigate to the Functions.php file within your Child Theme and add the following code.

// // // Allow SVG uploads

function allow_svgimg_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svgimg_types');

// // // Allow SVG Uploads End

If your WordPress install isn’t letting you edit the functions.php file from within the WP dashboard, you’ll probably need to edit it via an FTP client. Find out more about using an FTP Client with Divi Theme here.

And there you have it, try it out and see it work for yourself.

Download and SVG file to your computer, head over to your WordPress Media Library and upload the SVG.

TIP! The SVG image won’t show a preview in the WP Media Library, so it’s important that you give the file a name that describes what it is. This will help you from getting confused if you happen to have multiple SVG images on your site.