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 ! ! !
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
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
July 18, 2017, 1:39am
#5
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.
Clever and chic solution.
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-.
zzo
October 11, 2019, 4:37pm
#13