[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:Benni Mack <benni@typo3.org> Tested-by:
Benjamin Franzke <ben@bnf.dev> Reviewed-by:
Benjamin Franzke <ben@bnf.dev> Reviewed-by:
Benni Mack <benni@typo3.org> Tested-by:
core-ci <typo3@b13.com>
Showing
- typo3/sysext/core/Classes/Imaging/SvgManipulation.php 196 additions, 0 deletionstypo3/sysext/core/Classes/Imaging/SvgManipulation.php
- typo3/sysext/core/Classes/Resource/Processing/ImageCropScaleMaskTask.php 1 addition, 3 deletions...re/Classes/Resource/Processing/ImageCropScaleMaskTask.php
- typo3/sysext/core/Classes/Resource/Processing/ImagePreviewTask.php 1 addition, 3 deletions...ext/core/Classes/Resource/Processing/ImagePreviewTask.php
- typo3/sysext/core/Classes/Resource/Processing/LocalImageProcessor.php 3 additions, 5 deletions.../core/Classes/Resource/Processing/LocalImageProcessor.php
- typo3/sysext/core/Classes/Resource/Processing/SvgImageProcessor.php 124 additions, 8 deletions...xt/core/Classes/Resource/Processing/SvgImageProcessor.php
- typo3/sysext/core/Configuration/DefaultConfiguration.php 1 addition, 0 deletionstypo3/sysext/core/Configuration/DefaultConfiguration.php
- typo3/sysext/core/Documentation/Changelog/13.1/Features-93942-CropSVGImagesNatively.rst 52 additions, 0 deletions...n/Changelog/13.1/Features-93942-CropSVGImagesNatively.rst
- typo3/sysext/fluid/Tests/Functional/Fixtures/ViewHelpers/ImageViewHelperTest1.svg 7 additions, 0 deletions.../Functional/Fixtures/ViewHelpers/ImageViewHelperTest1.svg
- typo3/sysext/fluid/Tests/Functional/Fixtures/ViewHelpers/ImageViewHelperTest2.svg 13 additions, 0 deletions.../Functional/Fixtures/ViewHelpers/ImageViewHelperTest2.svg
- typo3/sysext/fluid/Tests/Functional/Fixtures/ViewHelpers/ImageViewHelperTest3.svg 7 additions, 0 deletions.../Functional/Fixtures/ViewHelpers/ImageViewHelperTest3.svg
- typo3/sysext/fluid/Tests/Functional/Fixtures/ViewHelpers/ImageViewHelperTest4.svg 7 additions, 0 deletions.../Functional/Fixtures/ViewHelpers/ImageViewHelperTest4.svg
- typo3/sysext/fluid/Tests/Functional/Fixtures/ViewHelpers/ImageViewHelperTest5.svg 7 additions, 0 deletions.../Functional/Fixtures/ViewHelpers/ImageViewHelperTest5.svg
- typo3/sysext/fluid/Tests/Functional/Fixtures/crops.csv 29 additions, 0 deletionstypo3/sysext/fluid/Tests/Functional/Fixtures/crops.csv
- typo3/sysext/fluid/Tests/Functional/ViewHelpers/SvgImageViewHelperTest.php 540 additions, 0 deletions...d/Tests/Functional/ViewHelpers/SvgImageViewHelperTest.php
- typo3/sysext/frontend/Tests/Functional/Rendering/Fixtures/SvgImageRenderingTest.typoscript 175 additions, 0 deletions...ional/Rendering/Fixtures/SvgImageRenderingTest.typoscript
- typo3/sysext/frontend/Tests/Functional/Rendering/SvgImageRenderingTest.php 182 additions, 0 deletions...tend/Tests/Functional/Rendering/SvgImageRenderingTest.php
Please register or sign in to comment