Templating an SVG

I’m trying to convert my blog from Jekyll to Hugo. In Jekyll inside the Front Matter I had a decently large user data section that I defined.

I would then include a template of an SVG from the Jekyll _includes folder that would use the data in my page. In Jekyll it seems the _includes are also templates where as in Hugo under the static page they cannot be templatized.

How do I do this in Hugo?

My basic requirements are:

  1. Create a Blog Post
  2. Define Data Somewhere
  3. Use the data to templatize an SVG
  4. Include the SVG in the Post using a figure shortcode.

I have learned the hard way to NOT include the SVG but use the figure shortcode. Any help would be much appreciated.

Here is the structure of the Jekyll.

My Jekyll Blog Post:

layout: post
title: Some Title
date: 2020-03-25
comments: true
categories: unix
  - something
  - another something

{% include svg/a-template-svg.svg %}

Now inside my SVG in the Jekyll _includes folder I have:

<svg width="640" height="10000" viewBox="0 0 640 10000" xmlns="http://www.w3.org/2000/svg">
{% for i in mydata %}
    <rect ....></rect>
{% endfor %}

Without too much detail, I would:

  1. Create my blog posts as bundles
  2. Store the SVG template in that bundle.
  3. Load that SVG with .Resources.GetMach “mysvg” or something and use resources.ExecuteAsTemplate
  4. The SVG can then either be inlined with .Content or accesed via .RelPermalinl
1 Like