Skip to content

[5.x]: Error cropping an SVG that has the preserveAspectRatio attribute #16709

@alexroper

Description

@alexroper

What happened?

Description

Using Craft's image transform to crop an SVG with the preserveAspectRatio attribute causes an error.

Steps to reproduce

Example SVG that triggers the error:

<svg height="218" preserveAspectRatio="xMidYMid" viewBox="0 0 256 218" width="256"
  xmlns="http://www.w3.org/2000/svg">
  <g fill="#0061ff">
    <path d="m63.9945638 0-63.9945638 40.7712563 63.9945638 40.7712562 64.0054362-40.7712562z"/>
    <path d="m192.000442 0-64.000442 40.7750015 64.000442 40.7750016 64.000443-40.7750016z"/>
    <path d="m0 122.321259 63.9945638 40.771257 64.0054362-40.771257-64.0054362-40.7712559z"/>
    <path d="m192 81.5500031-64 40.7747199 64 40.774719 64-40.774719z"/>
    <path d="m64 176.771256 64.005436 40.771257 63.994564-40.771257-63.994564-40.771256z"/>
  </g>
</svg>

Here is a reduced test case where I'm transforming the SVG asset above:

{% set asset = craft.assets.id(1162).one() %}

{% set thumb = {
  mode: 'crop',
  width: 100,
  height: 100,
} %}

<img src="{{ asset.getUrl(thumb) }}">

Expected behavior

SVG image cropped to 100 x 100 pixels.

Actual behavior

Error message:

This page contains the following errors:

error on line 2 at column 159: Attribute preserveAspectRatio redefined

Below is a rendering of the page up to the first error.

Craft CMS version

Craft Pro 5.6.1

PHP version

8.2.26

Operating system and version

Linux 6.10.14-linuxkit

Database type and version

MySQL 8.0.36

Image driver and version

Imagick 3.7.0 (ImageMagick 6.9.11-60)

Installed plugins and versions

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions