The WolfspyreLabs Blog/ Snippits & Exemplars/ WolfspyreLabs Exemplars/ WolfspyreLabs Shortcodes/ SVG/ 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? # Click here to see the parameter list ↕ Note about Positional Params Not ALL available parameters are referencable positionally. If you want the additional flexibility of all the parameters, call them by name. # ⓪ name {#name} string (Default: undef ) The name of the file located in the path. without the .svg extension. # ⓵ path {#path} String (Default: svg ) The parent directory the asset lives in. # ⓶ class {#class} string (Default: w-auto w-max-10 inline-block group p-1 svg ) A list of classes to assign the parent span element. # ⓷ customSpanTitle {#customSpanTitle} String (Default: asset name ) A handle to optionally set the HTML title of the parent span element. If not set, Defaults to the asset name. # ⓸ softFail {#softFail} Boolean (Default: false ) Emit warnf messages if an image can’t be located as opposed to a hard errorf. # ⓹ debug {#debug} Boolean (Default: false ) Log debug information. ⚙️ resource #String (Default: global ) The type of resource this is from hugo’s perspective.. Currently, the only supported option is global ⚙️ useDefaultClasses #Boolean (Default: true ) Use the default classes for the span element. ⚙️ disableSpanTitle #Boolean (Default: false ) Don’t set a title value for the parent span element. 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 >}} https://discourse.gohugo.io/t/embedding-inline-svg-in-content-markdown/7511/10 ↩︎ https://matze.rocks/images/ ↩︎ https://github.com/mfg92/hugo-shortcode-gallery ↩︎ https://github.com/mfg92/hugo-shortcode-gallery/issues/21 ↩︎ https://github.com/wowchemy/wowchemy-hugo-themes/issues/1620#issuecomment-644069059 ↩︎ https://hugomodo.github.io/ ↩︎ https://hugomodo.github.io/authors/thom-bruce/ ↩︎ https://hugomodo.github.io/blog/image-processing-and-svgs/ ↩︎ https://geekdocs.de/shortcodes/images/ ↩︎ https://github.com/thegeeklab/hugo-geekdoc/blob/main/layouts/shortcodes/img.html ↩︎