Intro

Scalable Vector Graphics, or SVGs, are supported on all modern web browsers.

There are two ways to use SVGs:

1. With the Image Element

2. With the Raw HTML Element and the <svg> HTML tag

Using SVGs with the Image Element

Since SVGs are image files, they can be added to an Image Element just like a JPEG or PNG. You can upload them to the worksheet or right into the Image Element by dragging and dropping them.

Using SVGs with the Raw HTML Element

If you want more control over your SVG, you can also paste the SVG code into a Raw HTML Element.

In some cases, you may want to apply styles to our SVGs using the Fill style property for hover states. The fill property is scoped to SVG tags only. You can take advantage of The.com's Raw HTML Element which allows us to write plain HTML. In this case, you will paste in (or write, if you are brave) a valid HTML SVG tag.

Adding an SVG

The SVG tag doesn't have an Src attribute, so you can't link an image to it. You must use the SVG's defining code instead. If you have an SVG in Adobe Illustrator, you can get the code by going to File > Export > Export As and then click Export and Yes. An SVG Options popup will appear. Click the Show Code button which will open the code in a text editor. Copy this code.

Back on our Page editor, create a new Raw HTML Element and paste this code into the text attribute. You can delete the generated "id" and "data-layer" attributes from the code or add any that you like, such as a custom class.

If our SVG file has a fill that is not purely black or white (#000000 or #FFFFFF), then our SVG code will include some style attributes that will overwrite any styling you apply to them in the Page Sheet editor. The SVG code will look something like this:

Delete the <style> tag or just the "fill" style since you want to use the Fill property through the editor to set the SVG's color (you could do this for hover styles).

Styling an SVG

You need to nest the Raw HTML Element in a Div in order to style the SVG. Apply styles to the parent Div.