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

[MangoMarcus]

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

[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?

[MoritzLost]

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

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

[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.

[maxstrebel]

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