How to Add SVG Files into Divi

Dec 7, 2022 | Divi Theme, WordPress Wednesday

Step-by-step tutorial on how to add in SVG files into the Divi WordPress builder or theme. You’ll use this free WordPress plugin and the code module.

How to Download SVG files – 2:48
If you want to use the free Chrome SVG Export extension here’s the link –

Full Video Transcript:

Are you running on the Divi Theme or using the Divi Builder and you’re trying to connect in an SVG file? Hey, y’all, right now Divi doesn’t just natively have a default option for SVGs, so what we need to do are two extra little steps. I’m gonna show you how to plug it in. We’re gonna stay all in the budget of free and I’ll show you how to download an SVG maybe from somebody else’s website and plug it in easily as well.

Hey, y’all. My name is Kori Ashton and I love the Divi Theme. I have an entire playlist dedicated to that incredible page builder so be sure to check that out. Click like and subscribe. And click that little bell so that you get a notification every time I’m publishing great new content for that Divi Builder. Hey, let’s get to the tutorial. So be sure to just go ahead and back up your website. You can do that typically through your hosting provider and just be certain that everything’s up to date here. Let’s jump into plugins and click add new. You’re gonna do a search for SVG. Once you find that, you’ll find one right here that is SVG Support, okay? Just phenomenal reviews. Look at this stuff. Woo, just awesome. Let’s click install now and of course, we’re gonna click activate. And y’all, that’s all you have to do. Now, Divi is ready to rock and roll for you. All right, so let me show you how to drop them into your page or post or really any place you can drop in that code module for Divi. So I’m gonna go to the front side of my website. I’m gonna click enable the visual builder. Let’s open that up so we can get in here and edit.

Now, instead of using the image module that we have right here we can get rid of that and let’s use the code module. Open that up. Now you should have gone ahead and grabbed your SVG code, right? So you’ve got that on your clipboard. If you haven’t, pause this for a minute, jump over, and grab your SVG file. Once you have that in place, you can come right here into this code area and it should look like this, right? It’s gonna drop right in, put all the code in place, and you can see it appear right here. Of course, the wonder of SVG Files is the ability to just change anything you need to change on it. So you can change the height, the width, everything you need to change on it, right? Click the check mark and your SVG file is loaded in there perfectly. If you need to adjust the alignment, you’ll go into that design tab, right? So this is our content. Go up here to that design tab, click on the text and you’ll go in and you’ll align it center of your module if you need to do that as well though. Super simple, easy to do, and now you’re off and running. Your entire website is ready for any SVG file.

For those who may not have your own SVGs and you’re trying to either maybe transition them from an old website onto a new Divi website, there is a Chrome add-on. Probably any browser has an add-on, but I’m using SVG Export. Let me show you what that looks like. This really cool extension right here again, totally for free. You can add this to your Chrome browser and any website you go to you can activate this little extension and it will open up all of their SVG Files for you. Just as an example, this is Elements Envato. You can go to any website you wanted to, open up that extension, run that extension. I’m gonna just click on it, and then it automatically kicks open another window on your browser and there’s every single SVG file that they’ve got on that page. So you can grab one, just click on the little three dots and you have different ways of copying the code and you can manipulate the size if you’d like to. So for the sake of this, I’m just gonna go ahead and make it nice and big so you can see it easily. And I’m gonna grab the actual raw code, grab that right there. You can also export it as a png or a jpeg. It’s really cool.

I’m gonna jump back over to my Divi website and I’m gonna go right here to the right side and click code. And I’m going to paste in now that SVG file that I grabbed from that extension. And of course it’s white, right? So no worries. We can put a background on that, right? So that we can still see that. Really cool. There it is. There’s that cool SVG file sitting there. So a nice background on that. And again, going to that design tab and move that over. Of course, you can add all the spacing you wanna add to it, right? Put 20 around it, give it a little bit of padding, give it a little bit of love, right? Give it some space so it breathes a little bit. Have all sorts of fun. That little SVG extension though, SVG Export Chrome extension has been a lifesaver for me.

Y’all, I hope this was helpful for you! I love the Divi Builder! Obviously, you do as well. So please stick around, click like and subscribe. Let me know if you have any Divi questions as well. I’ll try to answer them for you. I’ll see y’all. Next WordPress, Wednesday. Bye, everyone!

Get a WordPress Website for $1/Day


Hey Y’all – Thanks for watching. Each week I’m creating videos just like this one to help you improve your online marketing. Be sure to subscribe so that you get access to each video. If you have questions about a process, product, or service that I’ve mentioned in a video, please reach out directly to the authors of that item first. If there is a question about something specific I’ve shared, comment in the thread and I will reply within a day or two.

To get my attention more quickly Tweet me @KoriAshton

From freelancer to entrepreneur to c-suite, Kori Ashton has spent over twenty years in the digital marketing space. She built up a WordPress agency that sold in 2017 and spends most of her time now growing her new company Press Happi and consulting with industry brands and agencies on improving customer retention with persona-driven development.

WordPress Wednesday –

SEO Tips & Resources –

Beginner WordPress –

Kori’s Toolbox –

***** WEBSITE:
***** STORE:
***** TWITTER: