Adding SVG to the allowed files in SS4

This one comes up quite a lot on the Slack channel, so I thought it was worth a post here as well. The below is specific to SVG files, but the same techniques apply to other extensions.

The first thing to note is that, contrary to what your instinct might think, an SVG isn’t an image file. In SilverStripe, images are bitmap-style files such as jpg, gif, png, etc. and when you use them, you get all kinds of extra manipulation classes. Because of this, SVG files needs to be stored in File objects, not Image.

In this example, we’ll be attaching the SVG to a page. So the first thing to do is add the relation to the relevant page class (we’re using a has_one but the same applies to the other relation types):

namespace App\Pages;

use SilverStripe\Assets\File;

class MyCoolPage extends \Page {

  private static $has_one  = [
    'MySVG' => File::class
  ];
}

In order to allow SVG files to be added, we also need to let SilverStripe know about them via a yml config file. Add the following to your app.yml (or mysite.yml for example):

SilverStripe\Assets\File:
  allowed_extensions:
    - svg

Once you’ve done the above, run a dev/build?flush on the site. This will add the extension to SilverStripe and automatically regenerate the .htaccess file in your assets directory.

And that’s it! You can now access the SVG file in your page template:

<img src="$MySVG.URL" alt="Cool SVG!"/>


Notes:

7 Likes

In recent versions of CMS4, it may also be necessary to add some configuration for the the upload validator
to your yml file:

SilverStripe\MimeValidator\MimeUploadValidator:
  MimeTypes:
    svg:
      - 'image/svg+xml'
      - 'image/svg'

SilverStripe\Assets\File:
    allowed_extensions:
    - svg

Credit to @jkersu on slack for the update

2 Likes

Wish I’d found this 2 hours ago! :grinning_face_with_smiling_eyes: Thanks @jkersu

For context, this appears to be due to a PHP bug: PHP :: Bug #79045 :: Incorrect svg mimetypes detected and will probably only affect SVG files that don’t contain a header e.g. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

1 Like

Ah man, this just saved me so much time. Thanks for sharing!