Two almost identical SVG:s behave differently and produce GP width/height error

Hi there,

this kind of issue occurs if WP cannot get work out what the width of the image is.
Which with SVGs can be complex. Are there width attributes in the <svg>` code ?

Hi David! I've tried with and without width and the one that works does not have width-attributes in it.

Both don't have the attributes and yet one works and the other doesn't. And if I try add width and height to the one that doesn't work it still doesn't work. And I can see no differences in their source code.

If I upload them to Wordpress, I can see the image the doesn't work in the previews, and the image that does work doesn't show in the previews. Please see the private information. Maybe that has something to do with it? Thank you!

Hello there,

Can you try adding a plugin like this?: https://wordpress.org/plugins/safe-svg/

After adding this plugin, try re-adding your SVG.

Hi Fernando! Amazingly, that fixed it. Weird. Perhaps it is the way Illustrator formats files or something, because I see no differences in the content of the SVGs.

Nevertheless, whatever Safe SVG does, it fixed it for me. Thank you

Actually, I have to add, Safe SVG was breaking the SVG:s, but they were still showing because of my browser cache. Now, a few hours later, I see the SVG isn't working on the site after uploading it with Safe SVG, and the SVG gives this error:

"error on line 1 at column 65: Entity 'ns_extend' not defined"

So Safe SVG doesn't solve it either.

What can the issue be? This is not feasible. I am generating 18mb of GeneratePress errors a day, and there is seemingly nothing we can do it beside using the old logo.

Does this only occur for the new Logo SVG you're using?

If you try to use an icon from here for instance: https://icons.getbootstrap.com/ does it work?

Can you share the "new" SVG file you're using? I'll try uploading it on my test site to see what will happen. You can probably use Google Drive for this.

I don't seem to be able to upload SVGs from that website to my site. It says I don't have the permissions.

I added the SVGs I am trying to make work to the private information of this post.

Try opening your SVGs in this app:

https://jakearchibald.github.io/svgomg/

And download the copies it creates, it will remove a lot of useless meta data including all the stuff adobe left behind. Then try its copies.

Nope, still same behavior. Per the information I added to the private information earlier, the issue should be replicable. I can't figure out why Generate Press continues to throw the error despite adding the width/height attributes

I passed both of them through the optimizer.
Then opened them in Affinity Designer, compounded the paths to reduce the code.
Then tried both on my test site and they work.

Hi David, thank you, downloaded. Yep, now it works. This is so weird, but I'll remember those steps for the future. Will also keep the old versions and the new to compare them in case this arises in the future.
Thank you again! Love it if the files could be removed
Thank you again so much! 🙂👍🏻

Adobe saves its SVGs with a lot of proprietary meta, all of which has to be sanitizied when they are uploaded. And the more code the more chances something gets messed up, and WP cannot provide the relevant info for the logo.

There are some tutorials online about exporting them from illustrator without all the cruft :)

Glad to be of help. Files removed.

Wanted to add, in case anybody stumbles upon this in the future. The issue turned out to have been SiteGround, which adds a meta_value called "_wp_attachment_metadata" to all images uploaded to WP when it's hosted on their platform. The value is added to the database table postmeta. I figured given the files had no differences, it had to have been some meta_value injected by WP that produced a different behavior with the two SVGs. I removed that meta_value and now it works.

Writing this here in case I encounter this issue again or someone else does. Thank you again GP for great help 🙂 👍🏻

The _wp_attachment_metadata meta data is generated by WordPress by the wp_generate_attachment_metadata function when an image is uploaded.

https://developer.wordpress.org/reference/functions/wp_generate_attachment_metadata/

The problem with SVGs is they do not have a fixed width and height like a JPEG or PNG, which can result in a undefined value being saved in the attachments meta data.

So removing the metadata values will resolve the issue but is probably not the best method for resolving the issue if you can fix it at the source ie. the SVG HTML.

I just wanted to clarify this as its not a Siteground specific issue.