Post-processing of file types? (Automatic SVG text-to-path)

support
1

Is there any way to modify (post-process?) a certain kind of file (by file extension) each time Hugo builds?

Here is my problem:

  • Using custom fonts in SVG files famously does not work.
  • One workaround to this problem is to convert each text element to a path.
  • This means that I have to have two copies of each SVG file:
    • the source file, which retains text elements intact, and
    • the target file, in which text elements have been replaced with paths
  • Obviously, the best way to achieve this would be during Hugo build, so that the target file only exists in the build output directory.
  • Are there any ways in which Hugo can help me in this process?

I suppose similar topics would be:

  • The minification of javascript and css during Hugo build
  • The lossy compression of images
  • The generation of PDFs from other, editable document formats

I found this: Add custom external optimizer for files per extention · Issue #9802 · gohugoio/hugo · GitHub but it did not receive much love and it died.

2

Not in the sense of “calling an arbitrary external utility”

These should be covered by Hugo Pipes

No.

Hugo Pipes and Resources

With the pipeline and the templates you can do many things but complex actions on many files may be better done in a preprocessing step. So maybe include that in your SVG creation process …

mmh, that may depend on your needed target platform or meaning of “does not work”, but in general the browser support for embedded fonts theses days is quite good…

hacked example using the pipelines creates a font gallery

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
<style>
@font-face{
font-family:{{ .Family }};
src:url(data:font/woff2;base64,{{ .base64 }}) format("woff2")
}
text{font-family:{{ .Family }};font-size:50px}
</style>
<text x="10" y="65">Just embedded a Font!</text>
</svg>

Template code

  {{ $tpl := resources.Get "svg/template.svg" }}
  {{ range $f := resources.Match "fonts/*.woff2" }}
    {{ $base64 := encoding.Base64Encode .Content }}
    {{ $family := index (index (findRESubmatch `/fonts/(.*?)[-_].*?` . 1) 0) 1}}
    {{ $args := dict
       "Family" $family
       "base64" $base64
    }}
    {{ with resources.FromString "" $tpl.Content | resources.ExecuteAsTemplate (printf "%s.svg" $family) $args}}
      <h2>{{ $f.Name }}</h2>
      <img src="{{ .RelPermalink }}"/>
    {{ end }}
  {{- end }}