Chase to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

SVG

🐺 svg
Embed SVG elements.

What’s in a glyph? #

What to say about SVGs… They’re awesome, but quirky.
I looked for a universally viable way to display SVGs regardless of where they’re located.

As it turns out, that’s kinda a tall order…

I found This conversation1 on the hugo community forum; which presented the “simple” solution.

{{ $svg := readfile .Get 0 | safeHTML }}

I also found the rather cool hugo shortcode gallery module2 3, with this issue4… In that issue, there’s a reference to This issue5 against wowchemy’s hugo themes…

Ultimately, that lead me to hugomodo6, and thom’s7 post about image processing8

…and that ultimately brought me back to GeekDocs’ img shortcode.9 10

I Decided to just write my own, influenced by the icon shortcode.

What did you do, Ray? #

Usage #

Positional use #

name only #

{{< svg scorpion >}}

All positionally available parameters #

{{< svg scorpion svg “hover:scale-[2] transition-all duration-500” “Well Hello there, Mister Frog” true false >}}

❤️

Named Parameter usage #

Name only #

{{< svg name=“moto” >}}

Don’t add a title to the span #

{{< svg name=“moto” path=“svg” resource=“global” useDefaultClasses=true disableSpanTitle=true >}}

All the usable params #

{{< svg name=“moto” path=“svg” resource=“global” useDefaultClasses=true class=“hover:scale-[2] transition-all duration-500” customSpanTitle=“Look at my new Ride, Ma!” disableSpanTitle=false softFail=false debug=false >}}