[5.x]: SVGs are considered "Images"

[MangoMarcus]

What happened?

Description

This may be a misunderstanding on my part, but are SVGs supposed to be considered "Images"?

Asset fields have a "Restrict allowed file types" option, which includes options for both "Image" and "SVG", which implies to me that SVGs are not considered images.

However if you select "Image" as the only allowed file type then the field still allows you to select and upload SVGs.

Indeed, if you go to the assets section in the control panel and filter the "File Type" to "Image", you still get SVGs.

This then breaks the image in my template because I'm attempting to apply an image transform to an SVG

Thanks!

Steps to reproduce

1. Upload an SVG asset
2. Use the filters on the assets table to filter the "File Type" to "Image"
3. The SVG will be included in the results.
4. Update the "File Type" to "SVG"
5. The SVG will be included in the results, implying it's categorised as both an SVG and an image

Craft CMS version

5.2.0

PHP version

8.7.3

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[i-just]

Hi, thanks for getting in touch! Yes, by default, SVGs are considered images: https://github.com/craftcms/cms/blob/5.x/src/helpers/Assets.php#L582, and they can be transformed.

I just tested various ways of applying transforms for an SVG asset, and they all worked as expected. Could you please share a snippet of your template showing how you’re applying the transform?

[maxstrebel]

I can confirm that I had problems transforming SVG to JPG or PNG in the past and would also love to have the option to differentiate between image and SVG in the asset field. This would make things a lot easier.

In almost every project I have the case that I would rather like the users to only upload SVG (icons for example) in order to be able to tint them.

[MangoMarcus]

Hi @i-just , thanks for confirming!

I was confused because Image and SVG are different options here, but maybe that's just me

In that case I guess the solution in my case will be to do a check for vector image

{% if image.extension == 'svg' %}
  {# render <img> ... #}
{% else %}
  {# Render <picture>, <source> and <image> ... #}
{% endif %}

I will leave this open for @maxstrebel 's point about being able to restrict image file type at the asset field level which might be useful, there doesn't seem to be a way to forbid vector images from asset fields at the moment

[i-just]

@MangoMarcus, it looks like you might have extraFileKinds specified in your config, and you’re adding the SVG file type through it.

That’s fine, but since the svg extension is classed as an “Image” file type by default, if you want to move it to its own file type, you might want to consider removing it from the “Image” file type via, e.g. EVENT_REGISTER_FILE_KINDS.

Here’s a related issue that might shed a bit more light on this: #13376. @maxstrebel, you might find that helpful in your case, too.

Finally, it’s also worth mentioning that you can opt out of transforming SVGs altogether via transformSvgs config setting.

I hope this helps!

I’ll close this now, but feel free to get in touch if you run into any further issues.

[thupsi]

I too had trouble in the past with transforms when the asset is an svg. Solved it with something like @manud99 's method. Will try to post an example later.

Edit: Just saw the last comment by @i-just , so I won't post anything further here since it's not entirely about the original issue.

[MoritzLost]

@maxstrebel You can use the Selectable Assets Condition to only allow SVG!

@i-just Correct me if I'm wrong :)

[maxstrebel]

Thanks to all of you. That are two helpful tips.