SVG element

Add and delete the element

Add the element to the canvas

To access and use a element:

In Elementor Editor, click +.
All available elements are displayed.
Click or drag the element to the canvas. For more information, see Add elements to a page.

Delete the element

To delete the element:

On the canvas, select the element by clicking it.
Press the delete key on your keyboard. For more information, see Delete elements from a page.

What is the SVG element?

SVG (Scalable Vector Graphics) is an XML-based image format used for creating two-dimensional vector graphics. SVG graphics can be scaled without losing quality, making it ideal for website graphics, icons, and illustrations.

The SVG widget allows you to incorporate SVG graphics into your webpage as a separate element.

See all the options available with the SVG element.

Common use case

Hunter is creating a call to action section and wants to use SVG illustrations as icons.

Additional use cases

Infographs.
Simple lightweight images that allow your page to load more quickly.

Add an SVG element: Step-by-step

On the canvas, create a grid container with one row and three columns. For details, see Create a Grid container.

You can add the elements to the grid.
Add an SVG widget to the leftmost column. For details, see Add elements to a page.
In the panel, click the image field.
Add an SVG image to the widget. For details, see Adding images and icons.
Repeat for each of the widgets.

Let’s make the icons clickable for ease of use.
Click the envelope icon.
In the panel, click the plus symbol next to Link.
Enter the mailto link in the text box.
(Optional) Toggle Open in a new tab to on if you want the link to open in a new tab.

The call-to-action section is ready.

Settings for the SVG element

You can customize your elements using content and style, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this element.

SVG

Click to add an SVG file. For details, see Adding images and icons.

Link

Click the plus sign to enter a link. Visitors clicking the SVG file will open the link.

Style options

See the individual articles on Style options:

Note

The SVG widget allows you to add color to your SVG files. However, the file needs to be formatted properly. The fill color needs to be set to pure black (#000000) and exported with no fill property. You will then be able to add your own fill color using the color field of the Typography section in the Style tab.