[BUG] - Minify svg icon with hugo

[xuhdev]

Describe the bug Hugo is capable of minifying svg files: https://gohugo.io/hugo-pipes/minification/

For this to work, the svg file simply need to be treated like other assets, such as custom CSS.

[1bl4z3r]

Hi @xuhdev,

Good day

Yes Hugo is capable, provided we supply the svg file as an unit. However in this theme (and also in original theme), SVG is provided through partial, aptly named svg.html

And SVGs are injected inline through partial call with dictionary.

{{ partial "svg.html" (dict "context" . "name" $name) }}

Since SVG images are not independent files (i.e. it doesn't have *.svg) and doesn't reside in assets directory, it cannot be classified as a resource, henceforth it can't be fetched with resources.get.

To move SVG images to /assets and making all the necessary changes would be an uphill task, but I am still open to ideas. If you have any idea how you would wish to be implemented, let me know

[xuhdev]

I agree that svg.html is already optimized, but the svg favicon provided by the user could be minified just like the custom css files :)

[1bl4z3r]

Ooh... You must say so. I was thinking why a partial should be optimized...😅

Since favicon is in /static, I didn't think about making it a resource. Hold on. Let me update it

[1bl4z3r]

Updated.

Now if there is a file as assets/images/favicon.svg, it will try to parse and minify it.

html output as follows

<link rel="icon" href="/hermit-V2/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://localhost:1313/hermit-V2/images/favicon.min.svg" type="image/svg+xml">

This also completely butchers your Pull request. Please send one PR for this as well.

{{ $favicon := "images/favicon.svg" }}
{{- if (fileExists (printf "assets/%s" $favicon)) -}}
{{- $svg_fav := resources.Get $favicon | minify -}}
<link rel="icon" href="{{ $svg_fav.Permalink }}" type="image/svg+xml">
{{- else if (fileExists "static/favicon.svg") -}}
<link rel="icon" href="{{"favicon.svg" | relURL}}" type="image/svg+xml">
{{- end -}}

[1bl4z3r]

Another itty-bitty change. Nothing much

{{ $favicon := "images/favicon.svg" }}
{{- if (fileExists (printf "assets/%s" $favicon)) -}}
{{- with resources.Get $favicon | minify -}}
<link rel="icon" href="{{ .Permalink }}" type="image/svg+xml">
{{- end -}}
{{- else if (fileExists "static/favicon.svg") -}}
<link rel="icon" href="{{"favicon.svg" | relURL}}" type="image/svg+xml">
{{- end -}}

[1bl4z3r]

Try this out and let me know. I have downloaded Chrome just for this and I'm happy to report that I can see SVG favicon being rendered. Let me know if you want furthermore improvements.

[xuhdev]

Thanks for the work! :fireworks:

Perhaps it's your browser cache that makes you see the svg favicon. With Chrome, the simplest way to clear favicon cache is to completely restart Chrome.

[1bl4z3r]

Chrome being Chome, I see...😆 I just checked and you're right. Restarting Chrome defaults to ICO favicon.

Thanks for the PR btw. Now SVG all the way...🎉

Closing this Issue.