Embedding (inline) SVG in content / markdown

support
7

@rdwatters,

Even that’s overkill for my needs. My current shortcode is stored in /layouts/shortcodes/svg.html and looks like

<figure>
{{ readFile (print "svg/" (index .Params 0)) | safeHTML }}
</figure>

I created the /svg folder under hugo root to hold the svg’s (since I don’t need them copied over from /static to /public).

Inside markdown I can just call {{< svg "triangle.svg" >}} and the svg is inlined.

Hopefully it’s good enough.

The only lingering question is whether, when I call readFile, there is a way inside the template to remove the first line of the svg in order to prevent the svg’s xml declaration from being embedded.

The typical contents of a standalone triangle.svg might be

<?xml version="1.0" encoding="UTF-8"?>
<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Anyone have an idea how I could go about getting just the svg tag? I don’t think it’s strictly necessary but would be cool!

1 Like