Ben  McKernan
Jul 2, 2015
  14439
(9 votes)

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.

Jul 02, 2015

Comments

Please login to comment.
Latest blogs
Migrating from Providers to CMS 12 ASP.NET Identity with cookie tweaks

Notes on migrating a multi-site from Membership and Role Providers to ASP.NET Identity and changing cookie options dynamically.

Johan Kronberg | Jan 30, 2023 | Syndicated blog

Integrating generative AI in Optimizely CMS: A quick test with OpenAI

Some of the new AI services have received a lot of attention recently. Can you integrate them in Optimizely CMS? Of course, you can!

Tomas Hensrud Gulla | Jan 30, 2023 | Syndicated blog

When best practice isn't the best - Dependency Injection and Optimizely CMS

Some people live and breath 'best practice' development. I am not one of them. Risk is, in-experienced developers (or sometimes experienced) might...

Allan Thraen | Jan 29, 2023 | Syndicated blog

Implementing EmbeddedLocalization in Optimizely CMS 12

My previous post on translation (Translating Optimizely CMS 12 UI components) gives an overview of how to implement the FileXmlLocalizationProvider...

Eric Herlitz | Jan 27, 2023 | Syndicated blog

Breaking changes in EPiServer.CMS.TinyMce 4.0.0

After upgrading to the latest version of EPiServer.CMS.TinyMce, the dropdown with formats disappears. Learn how to get it back!

Tomas Hensrud Gulla | Jan 27, 2023 | Syndicated blog

Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english....

Eric Herlitz | Jan 26, 2023 | Syndicated blog