Follow @endyourif rss Facebook LinkedIn

C# HtmlExtension to display SVGs C# HtmlExtension to display SVGs

Published on Feb 16, 2019

You have SVGs that you wish to display on your website but you want to be able to re-use them without copying and pasting the code or creating a shared view.

By creating an HtmlExtension class with a function called Svg you can create a centralized place to store and re-use your SVGs.



I'm turning into a big fan of extension classes as I discussed when creating a string extension for my HasValue function.

Creating an Html Extension



To begin I will create a skeleton HtmlExtension class with the Svg function. The function will accept a string as input which will be a unique name for your SVG. This will allow you to easily expand this class to display many different SVGs by passing in a different SVG name.


using System.Web.Mvc.Html;

namespace System.Web.Mvc
{
    public static class HtmlExtensions
    {
        public static IHtmlString Svg(this HtmlHelper htmlHelper, string svgName, int width = 50, int height = 50)
        {
            var svg = string.Empty;

            return new HtmlString(svg);
        }
    }
}


Next, let's expand this class to return different SVGs. For simplicities sake, I will use a switch statement with a case statement for each SVG name.

I have also added two optional parameters: width and height. These parameters allow for easily changing the height of the SVG on a per implementation basis.


using System.Web.Mvc.Html;

namespace System.Web.Mvc
{
    public static class HtmlExtensions
    {
        public static IHtmlString Svg(this HtmlHelper htmlHelper, string svgName,int width = 50,int height = 50)
        {
            var svg = string.Empty;

			switch (svgName.ToLower())
            {
                case "calendar":
                    svg = string.Format(@"" +
                        "" +
                            "Calendar" +
                            @"" +
                            @"" +
                        "" +
                    "", width, height);
                    break;
					
				case "checkmark":
                    svg = String.Format(@"
                                
                                    Default
                                    
                                    
                                
                            ", width, height);
                    break;
			}
			
            return new HtmlString(svg);
        }
    }
}


@Html.Svg in your Razor View



In the above example there are two svgs created: calendar and check. After this extension class is created, inside your Razor templates (cshtml) you can use it as follows: @Html.Svg("calendar"). This not only makes it easy to globally change an svg, but it makes your views contain less code for readability.

Tags: ASP.NET MVC and Web API Tutorial | c# | htmlextension | svg

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP