Modify attrs in SVG

Reference: https://discourse.gohugo.io/t/inline-svg-with-html-outer-adding-custom-class/37451

Credit for this test SVG:

Before

 
        <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#E09B2D;" points="356.648,9.866 432.636,85.867 356.648,85.867 "/>
<g>
	<rect x="127.073" y="111.93" style="fill:#F95428;" width="56.57" height="50.084"/>
	<rect x="127.073" y="203.548" style="fill:#F95428;" width="56.57" height="50.084"/>
</g>
<path style="fill:#F7B239;" d="M432.636,85.867v416.265H79.361V9.866h277.286v76.001H432.636z M183.648,436.879v-50.084h-56.57
	v50.084H183.648z M183.648,345.261v-50.084h-56.57v50.084H183.648z M183.648,253.631v-50.084h-56.57v50.084H183.648z
	 M183.648,162.013v-50.084h-56.57v50.084H183.648z"/>
<g>
	<rect x="127.073" y="386.796" style="fill:#F95428;" width="56.57" height="50.084"/>
	<rect x="127.073" y="295.178" style="fill:#F95428;" width="56.57" height="50.084"/>
</g>
<g>
	<path style="fill:#FFFFFF;" d="M400.72,475.399c-5.45,0-9.867-4.418-9.867-9.867v-313.11c0-5.449,4.416-9.867,9.867-9.867
		c5.451,0,9.867,4.418,9.867,9.867v313.11C410.587,470.981,406.169,475.399,400.72,475.399z"/>
	<circle style="fill:#FFFFFF;" cx="400.715" cy="119.534" r="9.867"/>
</g>
<g>
	<path style="fill:#333333;" d="M439.615,78.892L363.627,2.89c-1.85-1.85-4.36-2.89-6.978-2.89H79.363
		c-5.45,0-9.867,4.418-9.867,9.867v492.266c0,5.449,4.416,9.867,9.867,9.867h353.275c5.45,0,9.867-4.418,9.867-9.867V85.868
		C442.504,83.252,441.465,80.743,439.615,78.892z M366.516,33.691l42.304,42.311h-42.304V33.691z M89.23,492.266V19.734h257.554
		v66.135c0,5.449,4.416,9.867,9.867,9.867h66.121v396.531H89.23z"/>
	<path style="fill:#333333;" d="M183.645,102.063h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867V111.93C193.512,106.481,189.095,102.063,183.645,102.063z M173.778,152.145h-36.836v-30.348
		h36.836V152.145z"/>
	<path style="fill:#333333;" d="M352.557,125.357H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,125.357,352.557,125.357z"/>
	<path style="fill:#333333;" d="M183.645,193.686h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867v-50.082C193.512,198.104,189.095,193.686,183.645,193.686z M173.778,243.768h-36.836V213.42
		h36.836V243.768z"/>
	<path style="fill:#333333;" d="M352.557,216.98H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,216.98,352.557,216.98z"/>
	<path style="fill:#333333;" d="M183.645,285.309h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867v-50.082C193.512,289.726,189.095,285.309,183.645,285.309z M173.778,335.39h-36.836v-30.348
		h36.836V335.39z"/>
	<path style="fill:#333333;" d="M352.557,308.602H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,308.602,352.557,308.602z"/>
	<path style="fill:#333333;" d="M183.645,376.931h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867v-50.082C193.512,381.349,189.095,376.931,183.645,376.931z M173.778,427.013h-36.836
		v-30.348h36.836V427.013z"/>
	<path style="fill:#333333;" d="M352.557,400.225H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,400.225,352.557,400.225z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

    

After

 
        <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg class="h-20 max-h-[30vh] mx-auto md:h-auto py-1 mb-1 lg:mb-2 md:w-10/12" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#E09B2D;" points="356.648,9.866 432.636,85.867 356.648,85.867 "/>
<g>
	<rect x="127.073" y="111.93" style="fill:#F95428;" width="56.57" height="50.084"/>
	<rect x="127.073" y="203.548" style="fill:#F95428;" width="56.57" height="50.084"/>
</g>
<path style="fill:#F7B239;" d="M432.636,85.867v416.265H79.361V9.866h277.286v76.001H432.636z M183.648,436.879v-50.084h-56.57
	v50.084H183.648z M183.648,345.261v-50.084h-56.57v50.084H183.648z M183.648,253.631v-50.084h-56.57v50.084H183.648z
	 M183.648,162.013v-50.084h-56.57v50.084H183.648z"/>
<g>
	<rect x="127.073" y="386.796" style="fill:#F95428;" width="56.57" height="50.084"/>
	<rect x="127.073" y="295.178" style="fill:#F95428;" width="56.57" height="50.084"/>
</g>
<g>
	<path style="fill:#FFFFFF;" d="M400.72,475.399c-5.45,0-9.867-4.418-9.867-9.867v-313.11c0-5.449,4.416-9.867,9.867-9.867
		c5.451,0,9.867,4.418,9.867,9.867v313.11C410.587,470.981,406.169,475.399,400.72,475.399z"/>
	<circle style="fill:#FFFFFF;" cx="400.715" cy="119.534" r="9.867"/>
</g>
<g>
	<path style="fill:#333333;" d="M439.615,78.892L363.627,2.89c-1.85-1.85-4.36-2.89-6.978-2.89H79.363
		c-5.45,0-9.867,4.418-9.867,9.867v492.266c0,5.449,4.416,9.867,9.867,9.867h353.275c5.45,0,9.867-4.418,9.867-9.867V85.868
		C442.504,83.252,441.465,80.743,439.615,78.892z M366.516,33.691l42.304,42.311h-42.304V33.691z M89.23,492.266V19.734h257.554
		v66.135c0,5.449,4.416,9.867,9.867,9.867h66.121v396.531H89.23z"/>
	<path style="fill:#333333;" d="M183.645,102.063h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867V111.93C193.512,106.481,189.095,102.063,183.645,102.063z M173.778,152.145h-36.836v-30.348
		h36.836V152.145z"/>
	<path style="fill:#333333;" d="M352.557,125.357H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,125.357,352.557,125.357z"/>
	<path style="fill:#333333;" d="M183.645,193.686h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867v-50.082C193.512,198.104,189.095,193.686,183.645,193.686z M173.778,243.768h-36.836V213.42
		h36.836V243.768z"/>
	<path style="fill:#333333;" d="M352.557,216.98H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,216.98,352.557,216.98z"/>
	<path style="fill:#333333;" d="M183.645,285.309h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867v-50.082C193.512,289.726,189.095,285.309,183.645,285.309z M173.778,335.39h-36.836v-30.348
		h36.836V335.39z"/>
	<path style="fill:#333333;" d="M352.557,308.602H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,308.602,352.557,308.602z"/>
	<path style="fill:#333333;" d="M183.645,376.931h-56.57c-5.45,0-9.867,4.418-9.867,9.867v50.082c0,5.449,4.416,9.867,9.867,9.867
		h56.57c5.45,0,9.867-4.418,9.867-9.867v-50.082C193.512,381.349,189.095,376.931,183.645,376.931z M173.778,427.013h-36.836
		v-30.348h36.836V427.013z"/>
	<path style="fill:#333333;" d="M352.557,400.225H232.321c-5.45,0-9.867,4.418-9.867,9.867s4.416,9.867,9.867,9.867h120.237
		c5.45,0,9.867-4.418,9.867-9.867S358.008,400.225,352.557,400.225z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

    

Rendered SVG

To reproduce this page/issue

git clone https://gitlab.com/hugo-mwe/hugo-mwe
cd hugo-mwe
git checkout svg-add-attrs
./srv.sh
            
Markdown source of this page | Built with Hugo 0.93.1

Go Up | Back to Home | Source code repo