Inline SVG Images Cannot Be Sized

[timsinclair]

When inserting an svg file as an inline image, the size option does not get applied to the image tag. The alt text setting works fine, but the inline width style does not get added. Everything works fine for "normal" images (jpg, png, etc). This did work on SVGs at one point, but no longer does.

[rinkalpagdar]

Test Report

---

I have tested the issue from my end but it seems working fine for me. I have added more testing details below.

Environment

---

Hardware: MacBook Air Apple M1
OS: macOS 14.6.1
Browser: Chrome
Server: nginx
PHP: 8.0
MySQL: 8.0
WordPress: 6.7.1
Theme: twentytwentyfive

[yogeshbhutkar]

Hi @timsinclair,

Welcome to Trac, and thank you for raising the ticket.

Could you kindly clarify how you are currently using SVGs as inline images? Natively, SVGs are not supported in image blocks. However, you can embed SVGs using the Custom HTML block, where you can directly set the width on the <svg /> tag.

Probably, in your case as well, you can try adding the width attribute within the SVG tag and see if that works.

Please let me know if that works for your use case.

[timsinclair]

Video of width not being applied to image tag with svg source

[timsinclair]

Thanks for looking into this issue.

I am using latest Chrome, Sequoia OS on iMac, Twenty TwentyFive theme with no plugins installed.

I am using SVG by adding "image/svg+xml" mimetype via the "upload_mimes" filter.

I have also attached a video showing how this works for "normal" images but not for svg. As I noted before, this did work up until recently. I may try installing previous versions of WordPress to see if the functionality returns.

Also, nginx, php 8.2.23 and mysql 8.0.16 for what its worth.

Remember, I'm specifically referring to inline images here, NOT the image block.

[timsinclair]

So downgrading to WP 6.6.2 solved the issue. This is definitely a 6.7+ bug.

Interesting to note: Only newly placed svg images cannot be sized in 6.7 – Inline svg images that already have a width set (from using an earlier version of WordPress like 6.6.2) can be edited in 6.7 and above, but newly placed svg images in 6.7 cannot be sized. I'm wondering if the new inline image dialog in 6.7 (with alt text control) has introduced the bug here somehow.

[timsinclair]

This issue is with inline svg images, NOT the image block. I am adding svg upload capabilities via the upload_mimes filter, but I don't see why the src of the image tag would have any bearing on the application of an inline style attribute.

Replying to yogeshbhutkar:

Hi @timsinclair,

Welcome to Trac, and thank you for raising the ticket.

Could you kindly clarify how you are currently using SVGs as inline images? Natively, SVGs are not supported in image blocks. However, you can embed SVGs using the Custom HTML block, where you can directly set the width on the <svg /> tag.

Probably, in your case as well, you can try adding the width attribute within the SVG tag and see if that works.

Please let me know if that works for your use case.

[rinkalpagdar]

Hello @timsinclair
I have added screencast here. Please let me know am i missing anything here?

[timsinclair]

Nope, looks like it's working for you, but isn't working for me. I did notice that the SVG in your media library has a size associated with it (in your case, 800 x 800 pixels), however, my svg files do not show a default size/dimension. Could there be something about the SVG file itself and not having a size associated with it in the media library? I'm going to look into this further. Is there any chance you can post the code from your hotel svg file so I can test your svg and review the differences to mine?

Either way, as I stated before, this entire problem doesn't exist with WP 6.6 even with the exact same svg file, so I still think something has changed in core that is different from before.

Replying to rinkalpagdar:

Hello @timsinclair
I have added screencast here. Please let me know am i missing anything here?

[rinkalpagdar]

Hello @timsinclair
You can download the hotel SVG vector here.
​https://www.svgrepo.com/svg/530595/hotel
Thanks!

[timsinclair]

Hello @rinkalpagdar

Interesting ... The reason your hotel svg works and mine does not is because when you uploaded your svg to your installation, the attachment metadata in the database was updated to include the width of the svg. I'm guessing you are using a plugin to enable svg uploads like SVG Support (​https://wordpress.org/plugins/svg-support/) which does this automatically when the svg is uploaded. In my case, I was just enabling svg's to be uploaded by enabling the svg mimetype, which resulted in the svg being uploaded to the media library but without any width metadata associated with it. Once I manually added an arbitrary width to the attachment metadata in the database, my svg worked as expected and was resizeable.

This does not explain why the svg sizing works in previous versions of WordPress (6.6) without the width metadata in the database, and I do still believe this is a bug since the application of an inline css width attribute via javascript in the editor environment should not depend on the presence of the width metadata in the database.

If you would like to investigate this further, I recommend removing the width and height metadata for the hotel svg attachment from the database and then attempt to place the svg again. This will result in the svg not being resizeable.