SVG images don't show preview in EPiServer

Ayo
Ayo
Vote:
 

Does anyone know why SVG images don't show preview but other images do?

#188401
Feb 22, 2018 12:03
Vote:
 

haven't seen this error. we do have .svg files and they show up ok. what's markup in preview for you?

#189709
Mar 23, 2018 9:00
Ayo
Vote:
 

In the end I solved it by adding svg to the ImageFile Content Type

[ContentType(DisplayName = "Image", GUID = "79a4e457-e026-4ce7-a5a7-37893e2b0db8", Description = "")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,png,gif,svg")]
public class ImageFile : ImageData
{
[CultureSpecific]
[Editable(true)]
[Display(
Name = "Alternate text",
Description = "Description of the image",
GroupName = SystemTabNames.Content,
Order = 1)]
public virtual String Description { get; set; }

public override Blob Thumbnail
{
get { return BinaryData; }
}
}



#189748
Mar 23, 2018 14:56
Vote:
 

Hi Ayo, I'd encourage you to create a new Class for your SVG rather than adding it to the ImageFile.

The reason is if you override Thumbnail in your current ImageFile class its going to return the original Binary data for all your Images including jpg, jpeg, png, gif. If these are large, you'll be slowing down your CMS.

Consider this instead...

    [ContentType(DisplayName = "VectorImageFile", GUID = "c0b70fd0-0d5b-4c53-83fe-e32ea8faa2d5", Description = "")]
    [MediaDescriptor(ExtensionString = "svg")]
    public class VectorImageFile : ImageFile
    {
        /// <summary>
        /// Gets the generated thumbnail for this media.
        /// </summary>
        public override Blob Thumbnail
        {
            get { return BinaryData; }
        }
    }


I've written a blog on this recently if you want to check that out... https://www.luminary.com/blog/image-metadata-svg-thumbnails-episerver-dxc

#195836
Aug 09, 2018 2:59
Vote:
 

I saw your blog Darren, and it is a nice solution

#195839
Aug 09, 2018 8:07
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.