Using SVGs in Avada

Last Update: October 31, 2025

Scalable Vector Graphics (SVG) files can be selected and used in Avada as regular images, logos, icons, and more. SVG files are scalable, usually much smaller in file size, and can also be animated using CSS. For more information on SVG files, please follow this link.

Avada Logo

For use in content areas, if you prefer, you can use CSS to size any SVGs. Please see below for the various aspects of SVG creation and usage.

Uploading SVG files in Avada

By default, WordPress does not allow the uploading of SVG files. You can use a plugin to get around this, but with Avada, it’s not neccesary. We have provided a Global Option to allow for the uploading of SVG files. This can be found under Performance > SVG Media Upload.

Using SVG Files As Site Logos

SVG files make great logos. They are small sized, and completely scalable. Which means you only need to upload one logo file, and control its size with the Column size, and / or the Image Max Width option. This is good for page load times, as opposed to having multiple images uploaded for various scenarios.

Our recommended method for SVG logos is to use the Image Element in a Header Layout Section. See the video below for more information on that aspect of SVG usage.

For privacy reasons YouTube needs your permission to be loaded.

Creating an SVG Logo with Adobe Illustrator

  • Step 1​​​ – Open Adobe Illustrator & Create a New Project

    To create an SVG file, we need to use a program that can create and manipulate vector artwork. The industry standard for this is Adobe Illustrator.

  • Step 2​​​​ – Create Your Icon or Artwork
    On your new project canvas in Adobe Illustrator, create your desired artwork or icon, then resize the artboard to fit the size of your icon/artwork or resize your icon/artwork to fit the size of your artboard, either one is fine. Ensure the artboard is slightly larger on all sides than your icon/artwork.

  • Step 3​​​​ – Create Artwork Outlines
    The next step is to create outlines of your artwork. To do this, with your icon/artwork highlighted drag a rectangle around your entire canvas, right click, and click on Create Outlines.

  • Step 4​​​ – Combine Your Outlines Into A Single Shape
    The next step is to combine your outlines into a single shape, you can do this by navigating to the Pathfinder window in Adobe Illustrator, with all of your outlines selected (you can use the same method as Step 3, drag a rectangle around it all with your mouse), click on the “Combine Shapes” Shape mode in the pathfinder window. Under the Shape Modes: Heading it’s the first icon on the left.

Adding an SVG via the Code Block Element

  • Step 1​​​ – Accessing the SVG Code

    Take your .SVG file and open it up in your preferred code editor. This will show you all of the code that makes up your SVG.

  • Step 2​​​​ – Adding the SVG Code to your Avada Website
    Select all of the code from your code editor, copy it and then paste it into a Code Block element on your Avada website. Save the Element.

  • Step 3​​​​ – All done!
    The SVG you created is now visible on your website wherever you’d like it to be thanks to the Avada Code Block element. No uploading of files is required for this method. It’s what’s known as an inline SVG.

That said, in most cases, it will be easier to use the Image Element than the Code Block Element

Styling an SVG with CSS

SVGs are just like any other element, and can be styled just like any other HTML element.
For example, this is a 50px black circle:

Copy to Clipboard

If you add a class to the svg tag, you can then target the class and write CSS to do whatever you want with it:

Copy to Clipboard

And just like other HTML elements, you can write your CSS inline, so instead of you can define dimension like:

Copy to Clipboard

In this article