How to edit an SVG size in Elementor

If you select an SVG when using the Image widget in Elementor and set a link, the SVG will automatically “disappear”.

But you can easily fix this:

1) Add the following CSS to the Custom CSS setting of the widget:
 
				
					selector a{
    display: block;
}

				
			
2) Set the width of the clickable area (optional).
 
While you are editing the widget, you will notice that it is displayed with a pink outline. That’s the area that will be clickable by the user. You will notice that it 100% of the column.
 
You can change this size on Advanced → Layout → Width.
 
Default: will make the clickable area 100% of the column width (most of the times).
Full width: this will force it to be 100% of the column width.
Inline (auto): It will match the size that you select for the image under Style → Width. I recommend to use this, except if you will use percentages for the image width.
Custom: Advanced settings.
 
3) Set the width of the actual image.
 
– If you use a percentage, it will be based on the size of the clickable area. For example, 50% will show the image at the half of the total clickable area.
– If you use PX, it will honor those pixels exactly.
 
Notes:
– If you set the width of the clickable area to Inline (auto), setting this to a percentage will make the image disappear.
– If you don’t set any value on the width, Elementor will set it to 48px by default.
 
 

Powered by BetterDocs

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.