Inserting SVG files/markup

Question

There seems to be an issue with SVG markup that works fine when embedded manually (through a rich text field for example) vs. when I save that same code as an .svg file, add it to the media library, and then embed it as a media item. In the latter case the color does not get displayed correctly. Is there some trick to this? If this is a known issue, is there a way I can created a set of content items that are basically just the xml markup of the svg that I can I can then pick from as items for a given icon field in items of a particular template type?

Answer 1

Sitecore does not support SVG images OOTB. Especially if you are below Sitecore version 8.1 Update 2, all the versions above this have it included by default. Please add the following media type definition in Web.config or Sitecore.config (according to your Sitecore version):

<mediaType name="SVG image" extensions="svg">
  <mimeType>image/svg+xml</mimeType>
  <forceDownload>false</forceDownload>
  <sharedTemplate>system/media/unversioned/image</sharedTemplate>
  <versionedTemplate>system/media/versioned/image</versionedTemplate>
  <mediaValidator type="Sitecore.Resources.Media.ImageValidator"/>
  <thumbnails>
    <generator type="Sitecore.Resources.Media.ImageThumbnailGenerator, Sitecore.Kernel">
      <extension>png</extension>
    </generator>
    <width>150</width>
    <height>150</height>
    <backgroundColor>#FFFFFF</backgroundColor>
  </thumbnails>
 </mediaType>

Register mime types for svg:

<configuration>
  <system.webServer>
    <staticContent>
     <remove fileExtension=".svg" />
     <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
    </staticContent>
  </system.webServer>
</configuration>

Also have a look at the following useful blogs:

http://sitecorecorner.com/2015/11/23/sitecore-svg-support/ https://community.sitecore.net/developers/f/8/t/1670

Answer 2

@Levi,

I have experienced this before.

If you upload as SVG then Sitecore will not process it as an image but as a media file.

In my case I solved it by uploading other image extension like PNG or JPG.

If you really need the SVG file you need to add a new media type (Include the SVG+XML to your mimetypes).

Please refer to this link for the solution: https://community.sitecore.net/developers/f/8/t/1670

I hope that helps.

Answer 3

I had same issue as yours, I have created helper class(as Santiago Morla's Blog ) to render SVG file and it resolved my issue.

public static MvcHtmlString RenderSvg(this HtmlHelper helper, Image image)
{
    if (image != null)
    {
        string result;
        var imageItem = Sitecore.Context.Database.GetItem(image.MediaId.ToString());
        if (imageItem == null)
        {
            return new MvcHtmlString("<!-- Null -->");
        }
        var imageMediaItem = new MediaItem(imageItem);
        if (imageMediaItem.MimeType != "image/svg+xml") return new MvcHtmlString(String.Format("<img src=\"{0}\" alt=\"{1}\" />", image.Src, image.Alt));
        using (var reader = new StreamReader(MediaManager.GetMedia(imageMediaItem).GetStream().Stream))
        {
            result = reader.ReadToEnd();
        }
        if (string.IsNullOrWhiteSpace(result))
            return new MvcHtmlString(String.Format("<img src=\"{0}\" alt=\"{1}\" />", image.Src, image.Alt))
    return new MvcHtmlString(result);
    }

    return new MvcHtmlString("<!-- Null -->");
}

Hope will help you.

Answer 4

Also had a challenge with SVGs in a scope of Sitecore SXA + JSS project. The following solution has been implemented:

How to Render SVG Images in Sitecore JSS

The source code here