Skip to content

Fix SVG handling for width and height attributes#19027

Open
chris78er wants to merge 1 commit into
craftcms:5.xfrom
chris78er:patch-1
Open

Fix SVG handling for width and height attributes#19027
chris78er wants to merge 1 commit into
craftcms:5.xfrom
chris78er:patch-1

Conversation

@chris78er
Copy link
Copy Markdown

Description

Transforming an SVG with percentage root dimensions (width="100%" height="100%" + viewBox) produces duplicate width/height attributes → invalid XML ("Attribute width redefined"), so the image won't render.

Regression from 5.9.15 (commit 0a643d71), which changed the loadImage() condition in src/image/Svg.php to !width && !height.

Cause

In src/image/Svg.php, SVG_WIDTH_RE/SVG_HEIGHT_RE only match px, so width="100%" counts as missing. loadImage() then prepends width="…px" while the original 100% stays → two attributes. resize()'s percentage-cleanup sits in the branch that's no longer reached.

Fix

In src/image/Svg.php, strip percentage dimensions in loadImage() before prepending, reusing the existing constants.

### Description
 
Transforming an SVG with percentage root dimensions (`width="100%" height="100%"` + `viewBox`) produces duplicate `width`/`height` attributes → invalid XML ("Attribute width redefined"), so the image won't render.
 
Regression from **5.9.15** (commit `0a643d71`), which changed the `loadImage()` condition in `src/image/Svg.php` to `!width && !height`.
 
### Cause
 
In `src/image/Svg.php`, `SVG_WIDTH_RE`/`SVG_HEIGHT_RE` only match px, so `width="100%"` counts as *missing*. `loadImage()` then prepends `width="…px"` while the original `100%` stays → two attributes. `resize()`'s percentage-cleanup sits in the branch that's no longer reached.
 
### Fix
 
In `src/image/Svg.php`, strip percentage dimensions in `loadImage()` before prepending, reusing the existing constants.
@brandonkelly
Copy link
Copy Markdown
Member

Can you provide an SVG file that could be used to reproduce this issue?

@chris78er
Copy link
Copy Markdown
Author

Here is an icon with the dimensions: width="100%" height="100%"

original-icon

These are my settings for the image transform:

image-transform-settings

The transformed SVG contains width and height twice. Once as 100% from the original image, and once as the width and height defined in the image transform settings:

<svg width="130px" height="130px" width="100%" height="100%" viewBox="0 0 4167 4167">

In the browser, viewing this SVG shows the following error:

error-message-in-browser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants