Adding SVG Icons and Images in Elementor

The tutorial guide to enable vector graphics support in Elementor

SVG icons and images in Elementor

Today, in this article, you will learn how to add SVG files to WordPress specifically using Elementor.

How about using images that can be infinitely resized without losing quality or sharpness? Can you imagine how useful this is for responsive design? This is what SVG has best we can implement this feature inside WordPress.

Helo! Ed Francisco here and I'll show you how to use the Elementor SVG file library for insert SVG icons and graphics in WordPress as opposed to the use of traditional bitmap images on the web.

First of all, let's understand what SVG is.

What is SVG?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics formed through mathematical expressions whose entered instructions produce filled shapes and which supports interactivity and animation.

If you work with Adobe Illustrator, Inkscape or Corel Draw you know they generate vector files and SVG is one of them.

Unlike bitmap image files (such as JPG, PNG, GIF, etc) vectors are not pixels. The pixel, as it has a physical dimension, loses sharpness when resized. Which is not the case with SVG and vector files. You can increase or decrease the size without loss of resolution or blur. They are extremely lightweight and keep your pages streamlined.

Difference between Bitmap and Vector Image – By Wikipedia

SVG images can be used in logos, as icons even as backgrounds and can be modified through CSS and Javascript.

Inserting SVG graphics via the Element Icon Widget Controls

As of version 2.6 of Elementor, support for inserting vector graphics became native without the need to use plugins for this.

With this you can use any widget to insert icons that through its controls you can insert two types of SVG resources into your Elementor site:

  • icons;
  • SVG images.

I'll show you how to proceed starting with the images.

Inserting SVG images into Elementor

To insert an SVG image into Elementor you can use any of the platform's native icon widgets (icons, icon list, social icons), but if this is the first one you insert it will need to be upload enabled. See how to proceed.

1 – In the widget search field type “icon” then choose which widget you want to choose by dragging it to the page interface.

choosing widget

2 – Then place the Mouse over the icon symbol in the icon editing area and click on the “Upload SVG” option.

SVG upload option

3 – A warning message will appear about the risks of using SVG files even though Elementor is executing processes to eliminate malicious code (I'll talk more about security later on). You must click Activate .

SVG support activation

4 – You will be redirected to the media library, where you can choose between the images that are present there or upload an image on your computer.

media library

5 – The image will then be inserted into the block you dragged the widget to.

inserted image

Styling inset image

After you insert the image the widget offers, on the content tab, link insertion, alignment and preview mode (default, stacked and framed) and on the styling tab options where you can set the element color, and with slider controls , the size, if you want to rotate it and hover effects.

SVG stylization

Security Issues Involving SVG Files

You already know that Elementor will try to protect the system if it identifies malicious SVG files. That's because WordPress doesn't support SVG file uploads by default for security reasons.

SVG files contain code in markup language XML, similar to HTML. Your browser parses the XML markup language to display the image. However, this opens your website to potential XML vulnerabilities such as gaining unauthorized access to user data, triggering brute force attacks and other attacks.

This may cause the following error when uploading an SVG image.

invalid format

“Invalid SVG Format, file not uploaded for security reasons” .

Solution 1 for unsent file - Optimization

Not that this directly influences security, but it is recommended that you save SVG files from applications like Illustrator, without the built-in styles, to allow Elementor to style the icon.

For this in the save tab “SVG Options” in CSS Properties choose option “Presentation Attributes”.

After that you can do an online optimization through the website SVGOMG that will be able to “clean up” your file so that it will be accepted for upload into the media library.

You can either upload your SVG using the “Open SVG” or the option “Paste Markup” to put the XML code provided by Illustrator according to the video I'll leave below.

SVGOMG

Go to the Markup tab and make adjustments as per the video. Then click the blue button to download the optimized SVG file.

download SVG

After this process, upload the file again.

approved file validated

Solution 2 for unsent file - Sanitization with plugin

SAFE SVG

Although in all practical cases that I needed method 1 was enough there is a plugin that promises to upload SVG safely. It's about the Save SVG

The function of this plugin is to make sure that SVG images are sanitized to prevent file vulnerabilities from affecting your website.

Its use is simple. Just install and activate. The free version does not need to do any settings.

Where to find good SVG image sources

If you don't have time to create your own SVG images a good resource is to visit the site Flaticon which is one of the largest vector image banks on the internet.

Inserting SVG Icons into Elementor

To insert an SVG icon into Elementor you can use any of the platform's native icon widgets (icons, icon list, social icons).

1 – In the widget search field type “icon” then choose which widget you want to choose by dragging it to the page interface.

2 – Then place the mouse over the icon symbol in the icon editing area and click on the “Icon library” option.

icon library option

3 – You will have access to the SVG Font Awesome 5 font library added in this version of Elementor, which has a performance for loading pages. Navigate through the different options in the Icon Library and select the icon of your choice and click Insert .

Styling the inserted icon

After you insert the icon the widget offers, in the content tab, link insertion, alignment and visualization mode (default, stacked and framed) and in the styling tab options where you can set the element's color, and with slider controls , the size, if you want to rotate it and hover effects.

Inserting custom icons

Maybe you haven't found it in the Icon Library the icon you want. Then you insert an icon from an external source into the library. The process is simple, just click on the option “Upload”

icon library

Only problem that this feature is only for those who have the PRO version of Elementor installed on WordPress. But it is still possible to upload the icons through the plugin Custom Icons for Elementor.

Install the plugin. To learn how to install plugins read this article.

You will have access to icon upload interface access menu Custom Icons. And you can customize your icons using the website Flaticon together with the website fontello.

Custom Icons for Elementor

Custom Icon Construction Process

1 – Go to the Flaticon website and choose an image that you want to turn into an icon and download the image.

2 – Then go to the folder where the downloaded file is and drag it into the fontello website in the Custom Icons field.

drag icon

3 – The image will appear in this field as a thumbnail. Click on it to select.

select icon

4 – Then go to the Download Webfont button and click to download it.

download webfont

5 – Go to the upload interface of the Custom Icons and upload the downloaded file.

upload fontello

6 – Return to the page that is editing the Elementor, reload it and perform the process of inserting an icon through a widget as already shown in this article.

7 – You will see that the Icon Library shows access to the insert you created in Fontello. Select the icon and click Insert .

custom font icon library

8 – The icon will be inserted in the desired area.

custom inserted icon

Conclusion

I tried to give you the ways that from the version of Elementor you will allow you to insert SVG files into your WordPress sites. These files will be used more and more where it can be more rewarding to apply than the application of bitmap images. Of course there will always be room for both vector images and bitmaps. The project's need will define the use.

If the choice is SVG, it is important to always be aware of security issues, sanitizing the files and verifying their origin.

I believe that this relationship between Responsive Design, SVG, Elementor and WordPress will evolve a lot to the point of forcing us to always be updating this article. And this will be a sign of more features and facilities for the WordPress user.

And what do you think of the feature for enabling SVG files in Elementor? Give your opinion in the comments!

Enjoy and share this article with friends. Also share about our Elementor course, O WP Elementor which presents applications of the main features of this tool.

Hug!

Ed Francisco

Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.

Speaking of code, I believe HTML is the most remarkable web technology that has allowed me to get to where I am, and also write these lines about me for you.

I have a degree in Production Technology (this is where I got to know HTML) and a Technician in Digital Production, Web and Multimedia (where I improved my knowledge of HTML).

I'm from São Paulo from the East Zone. I ventured trying to unravel the mysteries of the web since 2008.