Skip to content
Snippets Groups Projects
Commit 747b9bb1 authored by Garvin Hicking's avatar Garvin Hicking Committed by Benjamin Franzke
Browse files

[FEATURE] Crop SVG images natively

This change adds support for SVGs to be processed. They can be
scaled and cropped, without them being rasterized (converted
to pixel formats like PNG).

This way, SVGs are now natively used for cropping and scaling
without quality loss.

All cropping operations on SVGs will create a processedFile variant,
just like their pixel counterparts. The processed files will
contain SVG wrappers to reset coordinate systems and apply the
cropped viewBox. This way, responsive styling can be applied to
generated images, and processed SVGs can also be used as
background images via <f:uri.image>.

Tests are added for the fluid ViewHelpers as well as TypoScript-
based rendering of assets.

Note that SVG cropping is solely based on the "crop" argument,
either passed to a viewHelper or inferred via the
sys_file_reference entry, that the image editor creates.
Other arguments like `width="100c-10"` which are used for
pixel cropping are not evaluated (because they rely on
pixel operations).

maxWidth and maxHeight attributes (like used in the backend)
will accordingly force a specific size for the <img> tag
and the inner SVG width/height specification. Browsers
can still override this via CSS to enforce lossless resizing.

This change preserves the possibility to rasterize a SVG
to PNG by setting a file extension explicitly.
(Remember, not all image processors support converting SVG
to pixel formats; GraphicsMagick should work, ImageMagick needs
additional helpers.)

Example to keep PNG output format via TypoScript:

```
10 = IMAGE
10.file = 2:/myfile.svg
10.file.crop = 20,20,500,500
10.file.ext = png
```

or via Fluid:

```
<f:image image="{image}" fileExtension="png" />
```

Resolves: #93942
Releases: main
Change-Id: Ibac79b14738294252b527e66eefa91cccac4e5b8
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80617


Tested-by: default avatarBenni Mack <benni@typo3.org>
Tested-by: default avatarBenjamin Franzke <ben@bnf.dev>
Reviewed-by: default avatarBenjamin Franzke <ben@bnf.dev>
Reviewed-by: default avatarBenni Mack <benni@typo3.org>
Tested-by: default avatarcore-ci <typo3@b13.com>
parent c791afec
Branches
Tags
No related merge requests found
Showing
with 1345 additions and 19 deletions
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment