How to Use SVG Image Widget

How to Use SVG Image Widget

Scalable Vector Graphics (SVG) is an image format that supports animated 2D vector pictures. Developed by World Wide Web Consortium (W3C), SVG image plays a good role in designing stunning website appearance.

The good news is, Element Pack Pro has designed and developed a new widget named ‘SVG Image’. Here, you can put your SVG on display. As one of the easiest widgets, you can customize the SVG Image widget to suit your taste. Let’s have a look at how you can use it!

To Insert Widget

Inserting widget is just a matter of drag and drop. However, click and hold on the widget icon from the menu and drag it to the drop point. Follow the picture above.

Content Tab

Using the Content tab, you can basically make a layout of a particular part of the website. The first set of options you will see after dragging and dropping the widget is the Content tab. Let me show you around.


Go to Content Tab> Svg

The Svg section has a couple of options. From here, you can select your SVG image for display. There’s an option to add a caption to it. Also, you can attach any link to your SVG Image widget.


In this section, you will see some switchers. The top one is the ‘On Hover Animation’ switcher. When turned on it will show the SVG Animation whenever you point your mouse on it. Turning on this switcher also brings up the ‘Reverse Animation’ switcher. 

However, go to Content tab> Additional> and explore yourself.

Style Tab

With the Style tab, you can actually change the color and appearance of your SVG Image widget. It’s essential that you make use of the style tab profoundly. Because with this, you can create a unique look that brings out the charm of your website.


This section gives you a switcher and a few options. From here, you can preserve the original color of the vector SVG by turning on the switcher. Again, you can color the outline or even fill the inside with color as you like. Moreover, you can choose the widget to show the hover effect as well. Pretty cool right?

 Go to Style tab> Svg> and see all options.


Go to Style Tab> Caption

This is the last section of the Style tab. You can change the color, alignment, typography of the caption text from here. It’s pretty easy to customize.

Video Assist

Well done. Seems you have learned the whole thing and how it works. It is easy and fun. Watch Video Assist and to get more in-depth ideas about the usage of the SVG Image widget, take a tour to the demo page.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.