How to embed an svg in a template from a local file (`include` and `load_data` don't seem to work for this)

[rib]

Documentation issue

Summary

Hi, I'm trying to switch my blog over to using Zola, and something I was doing previously was directly embedding a few svgs (for social media icons) which I can't figure out how to do currently with Tera's include directive or via set data = load_data()

When I try to something like {% include "github.svg" %} (and trying lots of alternative locations for the svg) it seems to always report an error like:

Error: Reason: Failed to render 'post-page.html'
Error: Reason: Template '[github.svg]' not found

If I instead try something like:

          {% set data = load_data(path="github.svg", format="xml") %}
          <div class="icon">{{ data }}</div>

the generated output will just substitute [object] for that data.

It would be good if there were some documentation that could show how it's possible include / embed xml/svg data within a template.

[c-git]

Hopefully someone more experienced will provide a more conclusive answer but for me when I get [object I usually didn't access the property of the object that I wanted and needed to use dot notation to get one of the properties of the object. But sometimes I don't know what the properties are and therefore don't know how to start to try them to see which I want. And for that I use {{ __tera_context }} which shows all the data in the current context. Hope this helps in the mean while.

[rib]

thanks for the tip.

I think in this case it mainly just highlights the load_data is probably not the right tool for trying to include xml directly into a template. It looks like it essentially loads the xml data into an object whereby you can dig into the tags of the xml document (e.g. there is a data['svg'] element if I look at the __tera_context which I'm sure could be useful in some situations but in my case I'm more just wanting to read in the xml verbatim and include it at that location of the template.

[c-git]

Cool I've never used xml/svg like that. I don't know off hand how to do it but if you can create a sample repo I can clone it and give it a try. A quick Google on loading plain text came up with this but not sure if it's of any help to you.

[c-git]

Have you already tried putting the svg into a shortcode?

[rib]

Not yet but maybe that'd be the way to go - I'll give it a try - I think originally that just conceptually seemed like the wrong tool but maybe not.

[rib]

Ah, no, shortcodes can't be used in templates (I'm trying to inline the svg icons as part of a footer that's in a base.html template)

[rib]

Okey, so I figured I could kind of use macros but it's really not very ergonomic unfortunately.

Firstly I can make a file named svg-icons.xml that looks something like:

{% macro github() %}
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
...
</svg>
{% endmacro github %}

{% macro linkedin() %}
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
...
</svg>
{% endmacro linkedin %}

Then I can add a line like this to the top of my template file:
{% import "svg-icons.xml" as macros %}

and then finally I can inline the SVG like:

<div class="icon">{{ macros::github() }}</div>

This feels kinda over the top though, considering the need to have to manually pack the content into a special macro file (which sort of defeats the aim)

[c-git]

Right, in the case I was dealing with tonight was in a markdown file so that's why I thought of shortcodes. Hope you find a solution or someone more experienced see it and knows a better way.

[rib]

thanks for the input + suggestions.

from what I can tell at the moment then macros may be the closest thing to what I was looking for but they aren't really a practical solution here. The general assumption is that there's a directory of pre-existing svg icons and it would be nice to be able to inline icons from their original .svg files, ideally without needing to pre-process them into a library of macros first.

[Keats]

The issue is that load_data loads it as structured data. To work with svg that way, we'd need to load data as plain text.

[rib]

Yeah, if there were maybe an option to load as text instead of as a structured object that could be good for this.

[rib]

I suppose I'd maybe just add that my first intuition was to try and use {% include "foo.svg" %} considering that I had previously used {%- include "foo.svg" -%} with liquid/jekyll.

Conceptually load_data seems like it's more geared for loading data that will be inserted into the generated page structure vs include being used to pull in content that itself forms the structure of the page.

[Keats]

{% include "foo.svg" %} works if you make sure you load svg files in your glob.

[rib]

(note that I was doing this from within a template - I thought I saw that include currently isn't supported in templates?)