Adding SVG to the allowed files in SS4


#1

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 you’re 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: