0

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?

2
  • Which Sitecore version you are on ? When you upload the file for Media Library, is it processed as Media File or Image File? Mar 29, 2018 at 13:14
  • We're on 8.2. I've kind of decided on a path for this, it's a bit of work and not ideal, but it's better than nothing: I'm planning to create a template that just has a single rich text field that will contain the markup, then will create a number of these in a particular folder in my CMS content tree, and in the template that I've been trying to embed these in, I will create a field that can only pick items from that folder and will grab that text on the back end and embed it in the place I need. Mar 29, 2018 at 17:02

4 Answers 4

4

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

1
  • I know about this as I've done research, and, we have 8.2! But thanks. Mar 29, 2018 at 16:55
3

@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.

2
  • We have 8.2, so we don't need to add it specifically. It does show up and is recognized as an image, it just doesn't have the correct color when you embed it on a page... Mar 29, 2018 at 16:58
  • Silly question but is it happening with all the SVG images or just one? Mar 29, 2018 at 17:16
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.

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.