Inline svg with html outer adding custom class

I need my SVG class to be part of the HTML so that it works with PurgeCSS.

Originally I was using the example from here:

{{ $svg := . }}
{{ $class := print $svg "-icon" }}
{{ $match := "<svg (.*)?>(.*)</svg>" }}

{{ $replaceWith := printf `<svg class="%s" ${1}>${2}</svg>` $class }}
{{ return (replaceRE $match $replaceWith (printf "/assets/images/%s.svg" $svg | readFile) | safeHTML) }}

So I’ve tried to update this to use findRE instead but I keep getting zgotmplz.

{{ $svg := ("/static/img/logo.svg" | readFile) }}
{{ $svgParts := (findRE "<svg(.*)?>(.*)</svg>" $svg 2) }}
<svg id="logo" class="h-20 max-h-[30vh] mx-auto md:h-auto py-1 mb-1 lg:mb-2 md:w-10/12" {{ index $svgParts 1 | safeHTML }}>
  {{ index $svgParts 2 | safeHTML }}

You need to use safeHTMLAttr in the attribute field.

Also searching for “zgotmplz” in the Hugo docs will lead you there :slight_smile:

1 Like

Cheers I’d missed that but still not parsing the svg correctly.

I’ve tried adjusting the regex too.
{{ $svgParts := (findRE "<svg(.*)?>((?:.*\r?\n?)*)</svg>" $svg 2) }}

Which works here but not in the findRE: regex101: build, test, and debug regex

Do I have the regex correct?

Are to trying to inject that class attribute in the SVG tag?

If so, I created a test page here: Modify attrs in SVG | Hugo MWE

Templating code

Given that the SVG file path is provided using an svg front-matter in the content file, below does the job on inserting that class attr in the SVG tag:

{{ with .Param "svg" }}
    {{ $svg := . | readFile }}
    {{ $class_attr := `class="h-20 max-h-[30vh] mx-auto md:h-auto py-1 mb-1 lg:mb-2 md:w-10/12"` }}
    {{ $svg = replaceRE `(<svg)\s+([^>]+?>)` (printf `${1} %s ${2}` $class_attr) $svg }}
    {{ $svg | safeHTML }}
{{ end }}

The problem with that was that PurgeCSS wasn’t recognising the classes inside the string. It reads the html files and removes any unused classes from the css.

It should work. If you use kaushalmodi’s suggestion, that thing injects the SVG, with classes, into the
final HTML. As PurgeCSS is a post build task, it should be able to detect the classes.

Maybe I’m doing things wrong followed this example? GitHub - ttntm/hugo-landing-page: A simple landing page built with Hugo and Tailwind CSS

The css processing is ran before hugo.

"scripts": {
    "start": "gulp css && hugo server",
    "deploy": "gulp css && hugo --minify"


module.exports = {
  purge: {
    enabled: true,
    content: [
      // wherever else you use tailwind classes

You can completely avoid using gulp. Refer to this section in the documentation:

The problem with your approach is that you’re only looking for the classes in the layouts/ and content/. The proper way is to look at the files generated by Hugo, and then do the purging. That is what the above link covers.

Cheers yeah I see how doing it that would solve my issue and more flexible.

Is there a GitHub project showing some of the best practices with Hugo?

I don’t know much on that end. I usually frequent this forum, and check whatever new features come with each Hugo release.

Maybe checking the source of open-source themes will be what you want.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.