Using SVG in Avada

Using SVG in Avada

02/12/2018

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.

IMPORTANT NOTE: Please keep in mind that for SVG to work properly in the Logo and other Theme Options areas, you will have to set the width and height dimensions in the file itself, before you upload it. If there are no dimensions set on the SVG itself, then it will not appear.

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.

SVG in Avada > Resizing SVGs

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:

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

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept