Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

How to Use SVG Image Widget

Element Pack Pro has designed and developed a new SVG Image widget. Here, you can put your SVGs on display. As one of the easiest widgets, you can customize the SVG Image widget to suit your taste.

As you know, the 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.

So, let’s learn about how to use this widget.

To Insert Widget

inserting SVG Image widget

Inserting widget is just a matter of drag and drop. However, click and hold on the inline svg 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 on the SVG Image widget.

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, by Bdthemes, take a tour to the demo page.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge