SVG Image in a "Single Image" element not displaying.

Hello,

I’m trying to display my SVG logo image on my homepage in a WPBakery “single image” element.
I managed to load the image in WPBakery and it shows fine on the backend in the “single image” element options but the image doesn’t load on the frontend. When I inspect the image on the frontend, it shows a height and width of 0px.
That same SVG image displays perfectly in the header.

I tried a workaround by using an “information box” element and loading my image as the icon. The SVG image then displays on the home page but this image is not responsive and keeps the size specified in the backend. I haven’t found a way to make it responsive. Even changing the responsive options of the column doesn’t do anything.

How can I get the “single image” element to work with SVG images and thus make them responsive ?

Thank you,

Hello,

Single image element that comes with WPBakery page builder doesn’t support SVG format. Try to use our Information box and send us a link where we can check its responsiveness.

Regards

Do you need to have access to the backend for that ?

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area in Theme Settings

.woodmart-info-box .info-svg-wrapper svg,
.woodmart-info-box .info-svg-wrapper,
.info-box-icon {
	max-width:100%;
}

Thank you Artem, problem solved with your snippet.

Great, you are welcome.

[Author]

Posts