MVC SVG Tutorial (Sample code)


We all know that it is best practice in a responsive world to use SVG, but this is slightly more complicated within the MVC Razor view engine. Since SVG files are recognized as xml files and not image files other steps must be taken. Here are the steps to get SVG working in your MVC Application:

  1. Add some SVG files to your solution.
    I like The Noun Project for my icons so I am using a Factory from Amelia Wattenberger.  There are a lot of sources for getting and or making your own SVG. I’ve talked about them previously, and I recommend Inkscape since it is very full featured, free, and has plenty of good tutorials. I have also found it helpful to build out the raw image in Power Point and then go to image.online-convert.com to convert your simple image to something that is closer to what your looking for..
  2. Add this Helper to your Solution:
    1. using System.Collections.Generic;
    2. using System.Reflection;
    3. using System.Xml;
    4. using System.Xml.Schema;
    5. namespace System.Web.Mvc.Html //<– Note this namespace!
    6. {
    7.     public static class HtmlHelperExtension
    8.     {
    9.         public static MvcHtmlString SVG(this HtmlHelper htmlHelper, string path, object htmlAttributes)
    10.         {
    11.             Dictionary<String, Object> attributes = new Dictionary<String, Object>();
    12.             var fullPath = HttpContext.Current.Server.MapPath(path);
    13.             var xmlDoc = new XmlDocument();
    14.             xmlDoc.Load(fullPath);
    15.             string xsi = http://www.w3.org/2001/XMLSchema-instance&#8221;;
    16.             XmlSchema schema = new XmlSchema();
    17.             schema.Namespaces.Add(“xsi”, xsi);
    18.             PropertyInfo[] properties = htmlAttributes.GetType().GetProperties();
    19.             foreach (PropertyInfo propertyInfo in properties)
    20.             {
    21.                 if (xmlDoc.DocumentElement.Attributes[propertyInfo.Name] != null)
    22.                 {
    23.                     xmlDoc.DocumentElement.Attributes[propertyInfo.Name].Value =
    24.                         (string)propertyInfo.GetValue(htmlAttributes, null);
    25.                 }
    26.                 else
    27.                 {
    28.                     XmlAttribute xsiNil = xmlDoc.CreateAttribute(propertyInfo.Name, xsi);
    29.                     xsiNil.Value = (string)propertyInfo.GetValue(htmlAttributes, null);
    30.                     xmlDoc.DocumentElement.Attributes.Append(xsiNil);
    31.                 }
    32.             }
    33.             return new MvcHtmlString(  xmlDoc.OuterXml);
    34.         }
    35.     }
    36. }
  3. OutputinChromeAdd this where Where you want your SVG to be Displayed. at this point it becomes a bit of a preference discussion. However the standard for choosing which tag to use tag seems to be: prefer object over embed. The helper above is to include the svg in the rendered HTML (without either the object or embed). The reason I choose this approach is multi-fold:
    • The object/embed approach is simple enough that you don’t really need the overhead of an Html Helper.
    • The helper can get inside the XML and make modifications on the SVG which makes it more extensive.
    • Syntactically it is more in “tune” with the Razor View Engine.
    • Better to reduce/reuse code.

    here is how you would use the HTML Helper:

    1. @Html.SVG(“/Images/icon_10948/icon_10948.svg”,
    2.        htmlAttributes: new { width=“351”, height=“257” })

    And here is a comparison of the footprint of all three approaches:SVGodePicture
    It is easy to see that the HtmlHelper is a good compramise between the verbose and hard to maintain XCopy of the SVG XML into the cshtml file. and it is also shorter than the object approach.

I hope this helps you Happy Coding.

Advertisements

About Larry Louisiana

I'm a Microsoft Partner Consultant.
This entry was posted in Code, Code Sample, Programming, Snippit, Tutorial, Uncategorized and tagged , , , , , . Bookmark the permalink.

2 Responses to MVC SVG Tutorial (Sample code)

  1. Greg Littlehales says:

    After considering several options, I determined that this approach was the best fit for my needs. I did find that my svg attributes where prefixed with d1p1. I eliminated this prefix by not providing a namespace:

    XmlAttribute xsiNil = xmlDoc.CreateAttribute(propertyInfo.Name, “”);

    Wondering if there was a better solution?

  2. JK says:

    It works, but unfortunately it is taking too much rendering time (bad performance).

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s