Render SVG Images in Razor with Sitecore

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.

2016-03-31 21_51_54-Desktop
svg file is recognized as file

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.

2016-03-31 21_58_57-Desktop.png
svg file is now recognized as image

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.

2016-03-31 22_08_42-Desktop

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.

pencil

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

Happy Sitecoring 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s