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.

[wpschorsch]

In WordPress 6.6, the following code correctly displayed an embedded SVG:

<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
  <figure class="wp-block-image size-large">
    <a href="">
      <img decoding="async" src="https://URL/files/2022/02/SVG.svg" alt="" class="wp-image-xxx">
    </a>
  </figure>
</div>

After updating to WordPress 6.7, the SVG now has a width and height of 0. This issue occurs even on existing pages that were not modified after the update.

Environment:

WordPress: 6.7.1
Server: Apache 2.4
PHP: 8.3
Theme: Blocksy

Since this issue affects existing content, it seems to stem from a change in core processing introduced in 6.7. I hope this information helps narrow down the cause!

[sabernhardt]

I was able to reproduce the resizing problem in the editor with WordPress 6.7.1, which gave an empty style attribute. Now, 6.9 technically can resize SVGs that are added as inline images. I'll close the ticket as 'works for me' even though there are related issues to fix.

1. When I clicked on the inline image in Chrome and Edge, the popover for width and alt settings did not open. ​GB72949 already reported that, and I was able to drag-select the image in those browsers. (I was able to open the settings just by clicking on the image in Firefox, however.)
2. When the inline image is inserted into a rich text block, before resizing the image, the width value in the style attribute is NaNpx because the ​format-library script does not account for the possibility of an undefined imgWidth. I did not find an open issue about that in the ​Gutenberg repository, if someone would like to search again and/or submit a report there.
3. Multiple tickets report other problems with SVG, and at least two of those result from missing size information in the database (when the file is uploaded without using a plugin such as Safe SVG or SVG Support). The general ticket about adding SVG support in Core is #24251.

[sabernhardt]

Screen recording of adding two SVG files as inline images in WordPress 6.9 (one image without dimensions, one with them)