Using SVGs in Avada

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.

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. With Avada 7.7, we have provided a Global Option to allow for the uploading of SVG files. This can be found under Performance > SVG Media Upload.

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 How To Set Your Logo & Favicons in Avada doc or the video below for more infomation on that aspect of SVG usage.

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.

Step 5: Save / Export As SVG
Finally, now your artwork is created, sized, outlined and combined, you can export it as a Scalable Vector Graphic (SVG). Depending on your version of Illustrator, the saving method will be different. For Adobe Illustrator CC, choose File > Export > SVG (read more at Adobe’s Support Site). In previous versions of Adobe Illustrator, navigate to File > Save As and select SVG. Note: You can save with all of the default settings.

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

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:

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:

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