Cropping SVG for an cover image

The CMS Questions
1

Hey there.
For my cover images, I would like to crop the files. But some of those cover files are SVG and it looks like cropping has no effect on SVGs at all.

Here is the snippet:

<img class="lazy listImage <?= $cover->orientation() ?>" data-src="
              <?= $cover->crop(200, 200, [
              'quality' => 70,
              'crop' => 'center'
              ])->url()?>" alt="">

Is there a way?

2

Thumbs are only created for resizable files, which are defined as

  $resizable = [
            'jpg',
            'jpeg',
            'gif',
            'png',
            'webp'
        ];

in the isResizable() method.

3

But I can’t just add svg like:

$resizable = [
            'jpg',
            'jpeg',
            'gif',
            'png',
            'webp',
            'svg'
        ];

or could I do that?

4

As far as I know SVG can’t be resized the same way a bitmap image is resized so no, that won’t solve your issue. You can’t simply crop away pixels from an SVG.

But also, I don’t see the reason for cropping an SVG. They’re meant to be scalable, that’s the entire point of using an SVG. So rather than cropping it you can simply use CSS to adapt the image and fit whatever layout space you need it to fit.

5

OK. Totally understand that.

Just to clarify my problem for the record:
On my pages, I have Images and SVG mixed to visualize projects. Photographic images are jpg or png and SVG for path visuals, like font-images or illustrations.

For the thumbs, I am choosing the images, that would give a basic idea of the Project. That could also be an SVG. I want the thumbs to be squared, so I crop them 200 by 200.
That is not working for SVG. So it actually would not be about resize the svg – it would be more about cutting it into the right ratio – the pixels doesn’t realy matter here for me.

But I see that is not how it works here.
So I guess I have to prepare the images for that before uploading.

Thanks for your answers!

6

You can totally do that without having to prepare custom images.
Just place the svg inside a container and tweak the size using css.

I coded a quick pen just to show you what I mean.
This is one of the many ways to solve this issue, I coded it real quick just to explain what I have in mind.

As I said, cutting an SVG is not as straightforward as cutting a raster image made of pixel.

1 Like