[SOLVED] Inject an SVG file into my HTML

[keauval]

Hi

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 ! ! !

[keauval]

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

[alexandros]

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.

[keauval]

Oh thank for your answer…

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

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

[maiki]

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

[alexandros]

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.

[keauval]

SOLVED :

Here was the solution

post.md

+++
title = ""
svg = “xyz”
+++

template.html

{{ partial .Params.svg }}

/partiall/xyz.html

mysvgcode

[alexandros]

Clever and chic solution.

[gaetawoo]

Very cool actually.

[rdwatters]

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.)

[samuel-bohman]

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

[alexandros]

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-.

[zzo]

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