UPDATE: <our-svg> - Caching + Enforcing Viewbox

Author: AndyBoot

Our.Umbraco.TagHelpers/Composing/InlineSvgTagHelperComposer.cs

@@ -0,0 +1,20 @@
+using Our.Umbraco.TagHelpers.Notifications;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Umbraco.Cms.Core.Composing;
+using Umbraco.Cms.Core.DependencyInjection;
+using Umbraco.Cms.Core.Notifications;
+
+namespace Our.Umbraco.TagHelpers.Composing
+{
+    public class InlineSvgTagHelperComposer : IComposer
+    {
+        public void Compose(IUmbracoBuilder builder)
+        {
+            builder.AddNotificationHandler<MediaSavedNotification, InlineSvgTagHelperNotifications>();
+        }
+    }
+}

Our.Umbraco.TagHelpers/Configuration/OurUmbracoTagHelpersConfiguration.cs

@@ -0,0 +1,14 @@
+namespace Our.Umbraco.TagHelpers.Configuration
+{
+    public class OurUmbracoTagHelpersConfiguration
+    {
+        public InlineSvgTagHelperConfiguration OurSVG { get; set; } = new InlineSvgTagHelperConfiguration();
+    }
+
+    public class InlineSvgTagHelperConfiguration
+    {
+        public bool EnsureViewBox { get; set; } = false;
+        public bool Cache { get; set; } = false;
+        public int CacheMinutes { get; set; } = 180;
+    }
+}

Our.Umbraco.TagHelpers/Configuration/OurUmbracoTagHelpersConfigurationComposer.cs

@@ -0,0 +1,16 @@
+using Microsoft.Extensions.DependencyInjection;
+using Our.Umbraco.TagHelpers.Services;
+using Umbraco.Cms.Core.Composing;
+using Umbraco.Cms.Core.DependencyInjection;
+
+namespace Our.Umbraco.TagHelpers.Configuration
+{
+    public class OurUmbracoTagHelpersConfigurationComposer : IComposer
+    {
+        public void Compose(IUmbracoBuilder builder)
+        {
+            builder.Services.AddOptions<OurUmbracoTagHelpersConfiguration>()
+                .Bind(builder.Config.GetSection("Our.Umbraco.TagHelpers"));
+        }
+    }
+}

Our.Umbraco.TagHelpers/InlineSvgTagHelper.cs

@@ -1,8 +1,13 @@
-using Microsoft.AspNetCore.Hosting;
+using HtmlAgilityPack;
+using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.Extensions.Options;
+using Our.Umbraco.TagHelpers.Configuration;
+using Our.Umbraco.TagHelpers.Utils;
 using System;
 using System.IO;
 using System.Text.RegularExpressions;
+using Umbraco.Cms.Core.Cache;
 using Umbraco.Cms.Core.IO;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.Routing;
@@ -20,12 +25,16 @@ public class InlineSvgTagHelper : TagHelper
         private MediaFileManager _mediaFileManager;
         private IWebHostEnvironment _webHostEnvironment;
         private IPublishedUrlProvider _urlProvider;
+        private OurUmbracoTagHelpersConfiguration _globalSettings;
+        private AppCaches _appCaches;
 
-        public InlineSvgTagHelper(MediaFileManager mediaFileManager, IWebHostEnvironment webHostEnvironment, IPublishedUrlProvider urlProvider)
+        public InlineSvgTagHelper(MediaFileManager mediaFileManager, IWebHostEnvironment webHostEnvironment, IPublishedUrlProvider urlProvider, IOptions<OurUmbracoTagHelpersConfiguration> globalSettings, AppCaches appCaches)
         {
             _mediaFileManager = mediaFileManager;
             _webHostEnvironment = webHostEnvironment;
             _urlProvider = urlProvider;
+            _globalSettings = globalSettings.Value;
+            _appCaches = appCaches;
         }
 
         /// <summary>
@@ -42,6 +51,40 @@ public InlineSvgTagHelper(MediaFileManager mediaFileManager, IWebHostEnvironment
         [HtmlAttributeName("media-item")]
         public IPublishedContent? MediaItem { get; set; }
 
+        /// <summary>
+        /// A classic CSS class property to apply/append a CSS class or classes.
+        /// </summary>
+        [HtmlAttributeName("class")]
+        public string? CssClass { get; set; }
+
+        /// <summary>
+        /// A boolean to ensure a viewbox is present within the SVG tag to ensure the vector is always responsive.
+        /// NOTE: Use the appsettings configuration to apply this globally (e.g. "Our.Umbraco.TagHelpers": { "InlineSvgTagHelper": { "EnsureViewBox": true } } ).
+        /// </summary>
+        [HtmlAttributeName("ensure-viewbox")]
+        public bool EnsureViewBox { get; set; }
+
+        /// <summary>
+        /// A boolean to cache the SVG contents rather than performing the operation on each page load.
+        /// NOTE: Use the appsettings configuration to apply this globally (e.g. "Our.Umbraco.TagHelpers": { "InlineSvgTagHelper": { "Cache": true } } ).
+        /// </summary>
+        [HtmlAttributeName("cache")]
+        public bool Cache { get; set; }
+
+        /// <summary>
+        /// An integer to set the cache minutes. Default: 180 minutes.
+        /// NOTE: Use the appsettings configuration to apply this globally (e.g. "Our.Umbraco.TagHelpers": { "InlineSvgTagHelper": { "CacheMinutes": 180 } } ).
+        /// </summary>
+        [HtmlAttributeName("cache-minutes")]
+        public int CacheMinutes { get; set; }
+
+        /// <summary>
+        /// A boolean to ignore the appsettings. 
+        /// NOTE: Applies to 'ensure-viewbox' & 'cache' only
+        /// </summary>
+        [HtmlAttributeName("ignore-appsettings")]
+        public bool IgnoreAppSettings { get; set; }
+
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
             // Can only use media-item OR src
@@ -55,40 +98,79 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
                 return;
             }
 
+            string? cleanedFileContents = null;
+
+            if(Cache || (_globalSettings.OurSVG.Cache && !IgnoreAppSettings))
+            {
+                var cacheName = string.Empty;
+                var cacheMins = CacheMinutes > 0 ? CacheMinutes : _globalSettings.OurSVG.CacheMinutes;
+
+                if (MediaItem is not null)
+                {
+                    cacheName = string.Concat("MediaItem-SvgContents (", MediaItem.Key.ToString(), ")");
+                }
+                else if (string.IsNullOrWhiteSpace(FileSource) == false)
+                {
+                    cacheName = string.Concat("File-SvgContents (", FileSource, ")");
+                }
+
+                cleanedFileContents = _appCaches.RuntimeCache.GetCacheItem(cacheName, () =>
+                {
+                    return GetFileContents();
+                }, TimeSpan.FromMinutes(cacheMins));
+            }
+            else
+            {
+                cleanedFileContents = GetFileContents();
+            }
+
+            if (string.IsNullOrEmpty(cleanedFileContents))
+            {
+                output.SuppressOutput();
+                return;
+            }
+
+            // Remove the src attribute or media-item from the <svg>
+            output.Attributes.RemoveAll("src");
+            output.Attributes.RemoveAll("media-item");
+
+            output.TagName = null; // Remove <our-svg>
+            output.Content.SetHtmlContent(cleanedFileContents);
+       }
+
+        private string? GetFileContents()
+        {
             // SVG fileContents to render to DOM
             var fileContents = string.Empty;
 
-            if(MediaItem is not null)
+            if (MediaItem is not null)
             {
                 // Check Umbraco Media Item that is picked/used
                 // has a file that uses a .svg file extension
                 var mediaItemPath = MediaItem.Url(_urlProvider);
                 if (mediaItemPath?.EndsWith(".svg", StringComparison.InvariantCultureIgnoreCase) != true)
                 {
-                    output.SuppressOutput();
-                    return;
+                    return null;
                 }
 
                 // Ensure the file actually exists on disk, Azure blob provider or ...
                 // Anywhere else defined by IFileSystem to fetch & store files
                 if (_mediaFileManager.FileSystem.FileExists(mediaItemPath) == false)
                 {
-                    output.SuppressOutput();
-                    return;
+                    return null;
                 }
 
                 // Read its contents (get its stream)
                 var fileStream = _mediaFileManager.FileSystem.OpenFile(mediaItemPath);
                 using var reader = new StreamReader(fileStream);
                 fileContents = reader.ReadToEnd();
             }
-            else if(string.IsNullOrWhiteSpace(FileSource) == false)
+            else if (string.IsNullOrWhiteSpace(FileSource) == false)
             {
                 // Check string src filepath ends with .svg
                 if (FileSource.EndsWith(".svg", StringComparison.InvariantCultureIgnoreCase) == false)
                 {
-                    output.SuppressOutput();
-                    return;
+                    return null;
                 }
 
                 // Get file from wwwRoot using a path such as
@@ -98,10 +180,9 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
                 var file = webRoot.GetFileInfo(FileSource);
 
                 // Ensure file exists in wwwroot path
-                if(file.Exists == false)
+                if (file.Exists == false)
                 {
-                    output.SuppressOutput();
-                    return;
+                    return null;
                 }
 
                 using var reader = new StreamReader(file.CreateReadStream());
@@ -120,12 +201,31 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
                 @"syntax:error:",
                 RegexOptions.IgnoreCase | RegexOptions.Singleline);
 
-            // Remove the src attribute or media-item from the <svg>
-            output.Attributes.RemoveAll("src");
-            output.Attributes.RemoveAll("media-item");
+            if ((EnsureViewBox || (_globalSettings.OurSVG.EnsureViewBox && !IgnoreAppSettings)) || !string.IsNullOrEmpty(CssClass))
+            {
+                HtmlDocument doc = new HtmlDocument();
+                doc.LoadHtml(cleanedFileContents);
+                var svgs = doc.DocumentNode.SelectNodes("//svg");
+                foreach (var svgNode in svgs)
+                {
+                    if (!string.IsNullOrEmpty(CssClass))
+                    {
+                        svgNode.AddClass(CssClass);
+                    }
+                    if ((EnsureViewBox || (_globalSettings.OurSVG.EnsureViewBox && !IgnoreAppSettings)) && svgNode.Attributes.Contains("width") && svgNode.Attributes.Contains("height") && !svgNode.Attributes.Contains("viewbox"))
+                    {
+                        var width = StringUtils.GetDecimal(svgNode.GetAttributeValue("width", "0"));
+                        var height = StringUtils.GetDecimal(svgNode.GetAttributeValue("height", "0"));
+                        svgNode.SetAttributeValue("viewbox", $"0 0 {width} {height}");
+
+                        svgNode.Attributes.Remove("width");
+                        svgNode.Attributes.Remove("height");
+                    }
+                }
+                cleanedFileContents = doc.DocumentNode.OuterHtml;
+            }
 
-            output.TagName = null; // Remove <our-svg>
-            output.Content.SetHtmlContent(cleanedFileContents);
-       }
+            return cleanedFileContents;
+        }
     }
 }

Our.Umbraco.TagHelpers/Notifications/InlineSvgTagHelperNotifications.cs

@@ -0,0 +1,41 @@
+using Microsoft.Extensions.Logging;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Umbraco.Cms.Core.Cache;
+using Umbraco.Cms.Core.Events;
+using Umbraco.Cms.Core.Notifications;
+using Umbraco.Extensions;
+
+namespace Our.Umbraco.TagHelpers.Notifications
+{
+    public class InlineSvgTagHelperNotifications : INotificationHandler<MediaSavedNotification>
+    {
+        private readonly ILogger<InlineSvgTagHelperNotifications> _logger;
+        private readonly AppCaches _appCaches;
+
+        public InlineSvgTagHelperNotifications(ILogger<InlineSvgTagHelperNotifications> logger, AppCaches appCaches)
+        {
+            _logger = logger;
+            _appCaches = appCaches;
+        }
+
+        public void Handle(MediaSavedNotification notification)
+        {
+            foreach (var mediaItem in notification.SavedEntities)
+            {
+                if (mediaItem.ContentType.Alias.Equals("umbracoMediaVectorGraphics", StringComparison.InvariantCultureIgnoreCase))
+                {
+                    var cacheKey = string.Concat("MediaItem-SvgContents (", mediaItem.Key.ToString(), ")");
+                    if (_appCaches.RuntimeCache.SearchByKey(cacheKey).Any())
+                    {
+                        _appCaches.RuntimeCache.ClearByKey(cacheKey);
+                        _logger.LogDebug($"Removed {mediaItem.Name} from RuntimeCache");
+                    }
+                }
+            }
+        }
+    }
+}

README.md

@@ -182,11 +182,44 @@ If you do not specify a template and use `<our-lang-switcher />` it will use the
 This tag helper element `<our-svg>` will read the file contents of an SVG file and output it as an inline SVG in the DOM.
 It can be used in one of two ways, either by specifying the `src` attribute to a physcial static file served from wwwRoot or by specifying the `media-item` attribute to use a picked IPublishedContent Media Item.
 
+### Basic usage:
 ```cshtml
 <our-svg src="/assets/icon.svg" />
 <our-svg media-item="@Model.Logo" />
 ```
 
+### Advanced usage: *(as of version 1.x.x)
+
+Additional properties have been added to cache the output and also to ensure the SVG contains a viewbox property instead of the width & height properties to aid in making the vector image responsive within a parent HTML element. 
+```cshtml
+<our-svg src="/assets/icon.svg" class="my-css-class" ensure-viewbox="true" cache="true" cache-minutes="180" ignore-appsettings="true" />
+<our-svg media-item="@Model.Logo" class="my-css-class" ensure-viewbox="true" cache="true" cache-minutes="180" ignore-appsettings="true" />
+```
+
+- `class` - Allows for a CSS class upon the SVG element. This is a `string` value.
+- `ensure-viewbox` - Enables the feature to "fix" the output SVG which always ensures the SVG utilises a viewbox rather than width & height. This is a `boolean` value.
+- `cache` - Enables the feature to cache the output at runtime level. This is a `boolean` value.
+- `cache-minutes` - Defines the amount of time (in minutes) to cache the output. To be used in conjunction with the `cache` property. This is an `integer` value.
+- `ignore-appsettings` - When enabled, the all settings appropiate to this tag helper which are defined within `appsettings.json` are completely ignored. For example, if global caching is enabled we can simply disable caching of individual elements (unless the `cache` property is `true`). This is a `boolean` value.
+
+### Global settings via appsettings.json
+
+Applying any of the below configurations within your `appsettings.json` file will apply global settings to all elements using this tag helper. See the `ignore-appsettings` to override these global settings at element level. The values shown below are the hard-coded default values.
+
+    {
+      "Our.Umbraco.TagHelpers": {
+        "OurSVG": {
+          "EnsureViewBox": false,
+          "Cache": false,
+          "CacheMinutes": 180
+        }
+      }
+    }
+
+> **Note:** SVG caches are cleared on application restart, or by resaving the media in the media library.
+
+    
+
 ## `<our-fallback>`
 This tag helper element `<our-fallback>` uses the same fallback mode logic that is only available on the `Value()` method of the `IPublishedContent` interface that uses a string for the property name to lookup. In addition if the fallback value from a language or ancestors is not available we are still able to fallback to the content inside the tag.