October: Add support for uploading SVGs

[LukeTowers]

Need to integrate with https://github.com/darylldoyle/svg-sanitizer to automatically sanitize SVGs on upload and then re-add them to the list of allowed defaultExtensions, assetExtensions, and imageExtensions.

[damsfx]

I use this macro in a theme:
twig {% macro svgData( file , cssClass , attributes = []) %} {% set strAttributes = (cssClass == ''?'':'class="'~ cssClass ~'"') %} {% for attribute,value in attributes %} {% set strAttributes = strAttributes ~' '~ attribute ~'="' ~ value ~'"' %} {% endfor %} {{ source('themes/mytheme/'~ file ~'')|replace({'<svg': '<svg '~ strAttributes})|raw }} {% endmacro %}
with
twig {% import 'macros/svg-helper' as svg %} ... {{ svg.svgData('assets/images/logo-h.svg' , 'inverse', {'width':'192px'}) }}
It allows me to manipulate SVG images and change their attributes with the help of twig source function.
Since the last update SVG manipulation is no longer allowed.

The specified file extension [svg] is invalid

A temporary workaround for this limitation?
Adding 'svg' to fileDefinitions->defaultExtensions in cms.php config file dosen't seems to work.

[LukeTowers]

@damsfx that's a separate issue, I'm working on a fix right now.

[LukeTowers]

@damsfx https://github.com/octobercms/october/commit/dca6128501890473043cbe2bfd3016b4f48d39d6 should fix your issue, please try it out and let me know if it does.

[damsfx]

@damsfx dca6128 should fix your issue, please try it out and let me know if it does.

Yes, it works perfectly!

[leetNightshade]

At least in the version of OctoberCMS I'm on right now, SVG still can't be uploaded to assets because it's not an allowed upload type.

Locally I've added them, can we get that patched on the release version?

[LukeTowers]

@leetNightshade it will be in 1.1.1. Also you can just change it yourself by adding the allowed extensions to config/cms.php -> fileDefinitions.asset and fileDefinitions.default

[PubliAlex]

@LukeTowers Would be great to prefill the cms.php file with the fileDefinition array to not googling how it works each time you need it. Plus it would be more inline with other parameters that you just have to change.

[bennothommo]

@PubliAlex it's not included in there for a reason - allowing SVGs can be a security vulnerability if you allow frontend users (or even untrusted admins) some way to upload SVGs, so someone who wants it - and understands the risks - should enable it manually.

[PubliAlex]

@bennothommo Hello, I understand it's not included by default, what I mean is to include the fileDefinition array with the file extension supported by default.

Like that, if you want to add one, you just have to add one line into that array, instead of creating it from scratch.

[LukeTowers]

@PubliAlex @bennothommo is saying that we make it difficult to find on purpose. Most people would only need to change those values for SVG support, which will be included in 1.1.1 anyways.

[ayumi-cloud]

Scalable Vector Graphics (SVG) 2: https://www.w3.org/TR/SVG2/

SVG 2.0 removes or deprecates some features of SVG 1.1 and incorporates new features from HTML5 and Web Open Font Format:

• For example, SVG 2.0 removes several font elements such as glyph and altGlyph (replaced by the WOFF font format).
• The xml:space attribute is deprecated in favor of CSS.
• HTML5 features such as translate and data-* attributes have been added.

(Just to let you know and plan ahead).

p.s. Also been wondering about some new formats and adding them to October such as AVIF, HEIC, PIK, APNG, WEBP2 and JPEG-XL.

Some of these have browser support now and others are under flags.

[edit] Curious to know what's October's plan with these new formats?

[bennothommo]

@ayumi-cloud I doubt we'll properly support any of them until such a time that the GD library supports them.

[ayumi-cloud]

@bennothommo

Thanks.

Link to GD Library here: https://www.php.net/manual/en/image.installation.php

It says the following support:

I didn't see .gif labelled there, so for a quick test I uploaded a .gif to the media manager and saw this error:

imagecolorsforindex(): Color index 254 out of range

Should I open an issue for this?

[edit] Never mind I did a search and see there's an issue open for it here: https://github.com/octobercms/october/issues/5288

[bennothommo]

@ayumi-cloud I think GIF support is in-built, but yes, we're aware of that issue. Interesting that WEBP is now has first-class support, we might need to get onto that...

[ayumi-cloud]

@bennothommo

Animated .webp doesn't work with that lib - though I get confused, because my animated .webp files are saved under .webm instead.

Anyway issue is here: https://bugs.php.net/bug.php?id=79809

Also I should mention .webp support requires php 7.4 or above (October min requirements are lower than that I think from top of my head).

[ayumi-cloud]

Also .avif image files support can be added by using this lib: https://github.com/AOMediaCodec/libavif

Though they plan to add it to GD PHP in the near future see here: https://github.com/libgd/libgd/issues/557

[bennothommo]

@ayumi-cloud We may have to leave that for the next significant upgrade then. Or perhaps a plugin could provide support if necessary.

[Donokami]

I confirm that this is a major issue.
Not being able to use svg in OctoberCMS blocks any efficient development rn

[LukeTowers]

@Donokami you can use SVGs in OctoberCMS, you just need to add it to the allowed extensions through the cms config file.

[PubliAlex]

What is the syntax to allow svg ? I tried that in cms.php config file without success :

'fileDefinitions' => [
    'assets' => ['svg', 'jpg', 'png'],
    'default' => ['svg', 'jpg', 'png'],
],

[LukeTowers]

@PubliAlex

'fileDefinitions' => [
    'defaultExtensions' => array_merge(\October\Rain\Filesystem\Definitions::getDefinitions('defaultExtensions'), ['svg']),
],

[PubliAlex]

@LukeTowers thanks, works great. Github issue added to bookmarks by waiting official svg support again 👍