Supporting SVG images

Scalable Vector Graphics (SVG) is a very handy image format when working with icons or logos that need to be used in different sizes. Adding support for SVG image files in EPiServer is very easy to do.

Adding a vector image content type is done in the same way as adding an image content type. The main difference is obviously the filename extensions that are associated with the content type, in this case we associate only .svg with the content type. For example:

[ContentType(GUID = "F522B459-EB27-462C-B216-989FC7FF9448")]
[MediaDescriptor(ExtensionString = "svg")]
public class VectorImageFile : ImageData
{
    /// <summary>
    /// Gets the generated thumbnail for this media.
    /// </summary>
    public override Blob Thumbnail
    {
        get { return BinaryData; }
    }
}

In the example above we also override the thumbnail property to return the binary data of the image itself. The reason for this is that the built-in thumbnail generator can not parse SVG file types in order to generate a thumbnail. However this is not a problem since generating a thumbnail for a vector based image is unnecessary since it can, by its very nature, be displayed at any size.

The vector image should work seamlessly with other images types since all modern browsers support rendering SVG as well as having img tags whose source is an SVG file. This means that you will be able to drag and drop SVG images to a TinyMCE editor and resize them there or select them via the image content picker.

The only quirk is that the "Open in Image Editor" menu option will be available. When trying to open an SVG image, the editor will show an alert stating that the current file type is not supported.