In this episode, I will explain how you can configure Sitecore to handle svg images and render them in razor views. As you may notice, if you try to upload an image, it will be processed as a media file instead of an image this is because Sitecore doesn’t support svg extensions in the media library out of the box.

First, let’s see how it looks when you try to upload a svg image into Sitecore in a clean installation.

In order to have svg files correctly into media library, you will need to add a media type into the web.config file or you can create an additional file to add this settings. Navigate to the node <mediaTypes> under <mediaLibrary>:

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

Additionally, we need to add an entry in the web configuration file to add a unique mime type to the collection of static content types:

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

Let’s take a look and confirm that everything is working in Sitecore. Upload the same svg image into the media library and see how it looks.

Rendering the Image

I will create a dummy template with only an image field and assign this pencil to it. Then in a view, I will show you how to render it.

1- Create template and assign the image to the field.

2- Create a helper class that will process the image and render in the razor view.

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 -->");
}

3- Render the image in the view

@Html.RenderSvg(Model.Image)

4- See it live.

That’s all folks for today. See you later in another chapter of Sitecore blog posts.

Happy Sitecoring 😉