Back to contents

How to display SVG image files on Elementor-built pages with JetElements Inline SVG widget

This particular tutorial explains how to use the powerful JetElements Inline SVG, one of the multiple widgets for Elementor.

What is an SVG image?

SVG stands for Scalable Vector Graphics which is a vector image format for web designers. In comparison to other formats, it is almost weightless and thus its loading speed is extremely high. The most important advantage of this format is its performance on different displays – no matter what the screen resolution is. You can scale it with no quality loss. This format is usually used for logos, background images, buttons, maps, diagrams, and pictures. With the Inline SVG widget of JetElements you can display attractive images in SVG format.

How to add an SVG image to the website made with Elementor

Step 1 — First of all, log in to your website and open the page where you need to add an SVG image with Elementor editor.

Step 2 — Then, find Inline SVG widget, and drop it into a new section.

inline-svg-widget

Step 3 — Afterwards, go to the Content > SVG block to upload the logo image file from your hard drive. Here you are able to add a link in the URL section. You can also check or uncheck Open in a new window and Add nofollow options.

SVG block

Step 4 — Proceed to the Style > SVG block to design the logo image. Here you are able to change the width, the ratio and the color (when normal and on hover) of the image. Don’t forget to fix the position of the logo in the Alignment section.

Alignment section

Step 5 — As long as everything is customized, click the Publish button.

Now you know how to add SVG graphic files to Elementor editor when building pages. Keep reading our tutorials to learn more about Jet Plugins and the widgets available within them!