Platinum Support

SVG element

Last Update: May 27, 2025

Add and delete the element

The widget 2 SVG element 1

To access and use a element:

  1. In Elementor Editor, click +.
    All available elements are displayed.

  2. Click or drag the element to the canvas. For more information, see Add elements to a page.

To delete the element:

  1. On the canvas, select the element by clicking it.
  2. 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.

The result 2 SVG element 3

Additional use cases 

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

Add an SVG element: Step-by-step

  1. On the canvas, create a grid container with one row and three columns. For details, see Create a Grid container.
    1 create a grid scaled SVG element 5
    You can add the elements to the grid.
    2 add an SVG widget scaled SVG element 7
  2. Add an SVG widget to the leftmost column. For details, see Add elements to a page.
    3 in the panel click the image field scaled SVG element 9
  3. In the panel, click the image field.
    4 Choose an SVG 2 SVG element 11
  4. Add an SVG image to the widget. For details, see Adding images and icons.
  5. Repeat for each of the widgets.
    5 add all the svgs scaled SVG element 13
    Let’s make the icons clickable for ease of use.
    6 click the envelope scaled SVG element 15
  6. Click the envelope icon.  
    7 Click the plus icon 1 SVG element 17
  7. In the panel, click the plus symbol next to Link. 
    8 enter the ling address 2 SVG element 19
  8. Enter the mailto link in the text box.
    9 toggle open in new window 1 SVG element 21
  9. (Optional) Toggle Open in a new tab to on if you want the link to open in a new tab.
    10 finished scaled SVG element 23
    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.

General tab 5 SVG element 25

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

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

Style tab 3 SVG element 27

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.

On this page

Share this article