Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

Ben  McKernan
Jul 2, 2015
  17068
(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
Optimizely CMS Developer Tools for macOS

Running Optimizely CMS on macOS presents unique challenges, as the platform was traditionally primarily designed for Windows environments. However,...

Tomek Juranek | Mar 15, 2025

Removing a Segment from the URL in Optimizely CMS 12 using Partial Routing

Problem Statement In Optimizely CMS 12, dynamically generated pages inherit URL segments from their container pages. However, in certain cases, som...

Adnan Zameer | Mar 14, 2025 |

Optimizely Configured Commerce and Spire CMS - Figuring out Handlers

I recently entered the world of Optimizely Configured Commerce and Spire CMS. Intriguing, interesting and challenging at the same time, especially...

Ritu Madan | Mar 12, 2025

Another console app for calling the Optimizely CMS REST API

Introducing a Spectre.Console.Cli app for exploring an Optimizely SaaS CMS instance and to source code control definitions.

Johan Kronberg | Mar 11, 2025 |