[SOLVED] Inject an SVG file into my HTML

Hi :slight_smile:

Iā€™m making a new website for a friend with Hugo.
As I am a designer, I love this tool, But there are still things I canā€™t solve by myself.

I would like to :

Grab the the content of any svg file (/static/draw/123.svg)
Past it into my HTML template.

This file will be different for every post.

The goal is an animated SVG on my post page (we canā€™t call the svg as object for thatā€¦)

Thankā€™s ! ! !

Iā€™m really sorry perhaps itā€™s a beginner stupid questionā€¦ but iā€™m really blocked with that.
I want to contribute to the community by sharing my themes when theyā€™ll be finishedā€¦

Thankā€™s again

1 Like

You can easily pass an svg through a partial in a template.

BUT passing it in content files is more tricky. It really depends on what you want to do.

Do you want to have the svg inline or pass it as an image?

If you want the first option then the only way that I can think of is to pass it through a frontmatter parameter, but that will be kind of ugly.

e.g. svg = "svg source here"

And then in your single.html call it like this {{ with Params.svg }}{{ . }}{{ end }} and wrap it in whatever html you need.

If you want the second option (passing the svg as an img) then make an svg shortcode and reference the different svg urls in your content files.

Look up partials, shortcodes and frontmatter parameters in the docs. And choose that which suits your needs.

Oh thank for your answerā€¦

The fact is that the SVG has to be INLINE in HTML to make a draw effect :frowning:

I thought about putting in the Params the svg code, but it is a huuuge one, so iā€™m really not sure it will work.

And it isnā€™t possible to call a partial.html in the .md right ?

Ouffff

Btw I will continue to search deeply in the doc, I was hoping for a function that can ā€˜read x.svgā€™ ā€˜copy contentā€™ ā€˜pastā€™ ahah

How would you put the SVG into an HTML document, without Hugo? Do you have an example where I can see how it works?

Like @maiki said Hugo supports html files along with markdown. In the past Iā€™ve used this for complex pages, when markdown is not enough.

SOLVED :

Here was the solution :slight_smile:

post.md

+++
title = ā€œā€
svg = ā€œxyzā€
+++

template.html

{{ partial .Params.svg }}

/partiall/xyz.html

mysvgcode

1 Like

Clever and chic solution.

1 Like

Very cool actually.

1 Like

Just for the hell of it, @keauval, at the content level, you could do this as a shortcode:

<!--layouts/shortcodes/svg.html-->
{{$svg := .Get 0}}
{{ $svg  | readFile | safeHTML }}

Then within the body copy/content of *.md:

{{< svg "static/svgs/your-svg.svg" >}}

This assumes, obviously, that youā€™re keeping your svgs as static assets a la images.

As a matter of fact, you could do something similar if you were trying to create a sort of content ā€œsnippetā€ that you want to add in content (i.e., *.md) files using .GetPage. The following assumes you have a content/snippets folder.

Note: Iā€™m doing this off the cuff and havenā€™t tested this like the above svg example:

<!--layouts/shortcodes/snippet.html-->
{{$snippet := .Get 0}}
{{ with .GetPage "page" "snippets" $snippet }}{{.Content}}{{end}} 

Then in your content file, you could call it like:

{{< snippet "my-snippet.md" >}}

Youā€™d have to disable the snippets section, however, if you donā€™t want files in the snippets folder to render full-blown html files. (Again, not testedā€¦but if anyone tries it, let me know.)

2 Likes

Do you think you could expand a little on how to do this?

Hmā€¦ I just want to point out that the W3C validator throws lots of errors when an SVG is embedded raw in HTML with this technique.

And I found out the hard way. It seems that there is currently no way around this issue.

So for now Iā€™m using SVG the old wayā€¦ as an image -that is-.

This is already documented I think.
here is a link
https://gohugo.io/functions/dict/#example-using-dict-to-pass-multiple-values-to-a-partial