From 68595a20aeadf8e21a061b1ad92ec3d207f88321 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 17 Feb 2021 22:21:39 +0000
Subject: [PATCH] feat(shortcode): revert to `img` SVGs

Cacheable, zoomable, and lazily loaded.

Also, prevents conflicts if admin attempts to include multiple inline SVGs which unintentionally reuse each other's components.
---
 wowchemy/assets/scss/wowchemy/_base.scss | 3 +--
 wowchemy/layouts/shortcodes/figure.html  | 6 +++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/wowchemy/assets/scss/wowchemy/_base.scss b/wowchemy/assets/scss/wowchemy/_base.scss
index 157cab62..b218fa50 100644
--- a/wowchemy/assets/scss/wowchemy/_base.scss
+++ b/wowchemy/assets/scss/wowchemy/_base.scss
@@ -241,8 +241,7 @@ figure {
   justify-content: center;
 }
 
-figure img,
-figure svg {
+figure img {
   height: auto;
   max-width: 100%;
   flex-basis: 100%;
diff --git a/wowchemy/layouts/shortcodes/figure.html b/wowchemy/layouts/shortcodes/figure.html
index 573d4dab..681d630f 100644
--- a/wowchemy/layouts/shortcodes/figure.html
+++ b/wowchemy/layouts/shortcodes/figure.html
@@ -16,7 +16,11 @@
   {{- if $img -}}
     {{ $isSVG := eq $img.MediaType.SubType "svg" }}
     {{ if $isSVG }}
-      {{ $img.Content | safeHTML }}
+      <img alt="{{ $alt }}"
+       src="{{ $img.RelPermalink }}"
+       loading="lazy"
+       data-zoomable
+       {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
     {{ else }}
       {{- $img_lg := $img.Fit "1200x1200" -}}
       {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}