search

10up / safe-svg

Enable SVG uploads and sanitize them to stop XML/SVG vulnerabilities in your WordPress website.
https://wordpress.org/plugins/safe-svg/
GNU General Public License v2.0
268 stars 31 forks source link

WordPress image sizes for SVG #47

Open cadic opened 2 years ago

cadic commented 2 years ago

Describe the bug

When inserting SVG to the post, or using wp_get_attachment_image() function with custom image size ('large', 'medium', 'thumbnail', etc.) we always receive the full SVG src (which is normal) and incorrect (full-size or square) image dimensions in width and height attributes.

Steps to Reproduce

Displaying SVG programmatically

$att_id = 454;
echo wp_get_attachment_image( $att_id, 'full' );
echo wp_get_attachment_image( $att_id, 'medium' );

Both resulting images have the same width and height. Expected to have 300x152 for medium size.

<img width="406" height="206" src=/wp-content/uploads/2022/03/image.svg" class="attachment-full size-full" alt="" loading="lazy">
<img width="406" height="206" src=/wp-content/uploads/2022/03/image.svg" class="attachment-medium size-medium" alt="" loading="lazy">

Adding SVG in Block Editor

Regardless of the selected Image Size in the Block Properties, the Image Dimensions remain the same (full size) and the resulting image still have full dimensions in width and height attributes. Expected to have width="300" height="152" in this example

<figure class="wp-block-image size-medium"><img width="406" height="206" src="/wp-content/uploads/2022/03/image.svg" alt="" class="wp-image-454"></figure>

Adding SVG in Classic Editor

The image width and height attributes respect the selected size (medium) but represent the square 300x300. Expected to have the height="152"

<img class="alignnone wp-image-454 size-medium" role="img" src="/wp-content/uploads/2022/03/image.svg" alt="" width="300" height="300" />

Environment information

Previous release Safe SVG 1.9.9 (or develop with merged fix/23)

Code of Conduct

cadic commented 2 years ago

As mentioned in my comments to the PR#44 https://github.com/10up/safe-svg/pull/44#discussion_r830032815 and https://github.com/10up/safe-svg/pull/44#discussion_r830029068, the root cause is WordPress core function image_downsize() which always returns square size for SVG images, even if they are rectangular.

The image_downsize filter allows us to make custom image size calculations.

jeffpaul commented 2 years ago

@darylldoyle any thoughts on how best to handle this issue?