SVG Sprite in Hugo.

feature
1

As we know, Hugo can resize, convert image format, and minify images, including svgs. Hugo also provides the option of combining CSS and JS files. It would be great if Hugo could generate SVG Sprites from a single file of all the used SVG icons on the website.

I use inline svg, which significantly increases the size of the html, or I utilize a 3rd party to make svg sprites for all icons used and save them in a static folder. an svg code that looks something like this:

<svg fill="none"><path></path></svg>

In svg sprite is converted to:

<svg fill="none">
<symbol id="circle">
<path ... path for icon 1></path>
<symbol id="square">
<path ... path for icon 2></path>
</svg>

It’s difficult to keep track of roughly 200 bespoke icons and heroicons on each website. Hugo’s ability to produce svg sprite files from “layouts/partial/icons.html” or “assets/svgs” and build the file for only the icons used on a website would be extremely beneficial to the improvement of performance quality.

The argument against inline svg is that it reduces the code to text ratio and increases the size of the HTML content significantly, which has an impact on performance and SEO.

Thank you for your time.

1 Like
2

I found myself in this dilemma recently. I decided to split my icons into different SVG sprites and loading them as partials depending on which page(s) they are required. It would be tedious work for your site (I only have like 10 SVG icons), but if Hugo had this feature, it would be very nice!

1 Like
3

Hi @tut,

i cannot say for sure as i myself is a hugo begginer but i do not think this feature still exist in hugo and this is why i made this post.

cheers!

4

I understand your request. Having one SVG sprite and letting hugo pick those only in use. I second this feature if it were possible to implement it. Sad this discussion never got a response. I found this post via Google Search.

1 Like
5

A response is 1) Not the same as solving an issue and 2) Not the same as it’s not being considered.

But a “SVG sprite feature” is a little bit specialised on its own, but could fit into this:

{{ $svg := resources.Get "foo.svg" }}
<svg class="icon icon--facebook">
 <use xlink:href="#{{ $svg.NamedRef "foo" }}" href="#{{ $svg.NamedRef "foo" }}"></use>
</svg>

{{ defer . }}
{{ range site.NamedRefs "foo" }}
// Create sprite
{{ end }}

Note that the above is just something I quickly jotted down now, but would be more general useful than just SVG sprites.

2 Likes
6

I found this feature request as I went about SVG sprite as the OP, now checking the tracker good to see this has been indeed implemented.

When I check the docs on defer it looks exactly what I want (i.e. “defer until after all sites and output formats have been rendered”) as I was about to make the sprite NOT within a page, but section-scoped as a separate file.

But somehow, I am not sure how to go about the NamedRef abstraction and whether I can expect it to work in such scenario for the sprite generation.

Appreciate for any tip on how to approach this.