Using SVG in Avada
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.
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.
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.
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.
Resizing an SVG file in the code
Step 1: Open the SVG file in a text editor
An SVG file is just code. Open the file in your chosen text editor.
Step 2: Locate and edit the dimensions
Towards the top of the code, you will see the pixel dimensions to display the svg at. Change these to your desired size, remembering to keep the aspect ratio the same as the original file.
Step 3: Save your file
Step 4: Upload your file
Now you can upload the svg through your media library or through the Avada Theme Options panel.
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.
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:
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: