Pro 4.0.10 SVG issues with Buttons (Also seen on images)

[mjshelley]

Hey guys,

Running into a problem with the latest version 4 of Pro. I’m using Safe-SVG and building the site out with SVG graphics.

However, the button fails to display SVG graphics - although it works fine with other formats. I’ve also seen SVG graphics not being rendered inside columns too.

Any idea what’s going on? - and, I don’t want to change my graphics to PNG

Matt

– Update: the <img> is being set with width=“0” and height=“0”
Assuming there’s something wrong with detecting images sizes and SVG graphics.

And I am working around this by adding the CSS:

$el img {
   width: 45px;
}

[marc_a]

Hi @mattrilla2,

Thanks for reaching out.

Can you provide us a page URL of your website that you’re having an issue so that we can check and help you to troubleshoot your issue. One more thing providing screenshots or videos is a big help you determine the issue.

Hope that helps.

Thank you.

[mjshelley]

Hi Marc,

I’ve attached a secure note above with login details etc - please note the site is in active development.

From the screenshots, you can see a standard button - when you select an SVG graphic, it’s not rendered inside the button (Note, JPEG or PNG work fine).

I temporarily overcome this issue by forcing the width on the img tag.

Thanks,

Matt

[ruenel]

Hello Matt,

Thanks for the very detailed information. Please also be aware that when using SVG as an image <img> which is also the tag when you use graphic image in a button element, you do not have full control over the SVG file. Please check out this article:

• https://css-tricks.com/using-svg/
• https://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

Hope this helps.

[mjshelley]

Yep, no worries - used SVG’s for years without any issues.

The way around this issue is to ensure the SVG is scaled big enough before uploading to WordPress - but in this case, your output forced Height=0 and Width=0 on the IMG tag prevents it from filling the container.

A simple solution would be to NOT set the height/width to 0 when your theme cannot determine the size of the image - simply dropping those attributes would at least prevent this error.

Thanks!

[tristup]

Hi Matt,

As my colleague says that SVG is actually a tag, which is a pure XML. I would recommend you to follow the link suggested by my colleague in his last post.

Thanks