Ben  McKernan
Jul 2, 2015
  16647
(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
Recraft's image generation with AI-Assistant for Optimizely

Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog

ExcludeDeleted(): Prevent Trashed Content from Appearing in Search Results

Introduction In Optimizely CMS, content that is moved to the trash can still appear in search results if it’s not explicitly excluded using the...

Ashish Rasal | Nov 7, 2024

CMS + CMP + Graph integration

We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

Bartosz Sekula | Nov 5, 2024

Block type selection doesn't work

Imagine you're trying to create a new block in a specific content area. You click the "Create" link, expecting to see a CMS modal with a list of...

Damian Smutek | Nov 4, 2024 | Syndicated blog

.NET 8 FAQ

I have previously written about .NET compatibility in general and .NET 8 in particular, see blog posts here , here and here . With the end of suppo...

Magnus Rahl | Nov 4, 2024

Dynamic packages in Commerce Connect

In Optimizely Commerce Connect, you can group different items using packages and bundles. Package: A package has one or more versions of a product...

K Khan | Nov 1, 2024