Does Hugo support resize SVG images?

support
1

Hi, I got an error <$pageResource.Resize>: error calling Resize: *resources.genericResource is not an image while resizing an SVG image, code snippet as follows:

{{ if eq $pageResource.ResourceType "image" }}
  {{- $resize := "200x200" -}}
  {{- $img = $pageResource.Resize $resize -}}
{{- end -}}
2

Hugo currently supports raster image formats, since SVG is a vector format it is not recognized as such.

3 Likes
3

Thanks!

4

Your best bet to resize would be to use the replaceRE function.

Like this maybe

{{ $svgContent := $svg.Content}}
{{ $svgContent = replaceRE `height="d+"`  `width="200" $svgContent 1 }}
{{ $svgContent = replaceRE `height="d+"`  `width="200" $svgContent 1 }}
1 Like
5

Stop. :slight_smile:

You don’t “resize” SVG images. If the SVG is properly done, it has a box size defined inside of the file. Those define the layout of the image. It has strokes defined and colors and stuff. And then it is “SCALABLE” which is the S in SVG. The rest is and stays text and “resizing” won’t do anything other than visually changing things. Which is not something you do IN the SVG but OUTSIDE of it. That means you put a span or div around it and style that tag to have a certain size and then contain the SVG in it with height: 100% and width: auto.

If the SVG is basically a container for a PNG or GIF image then it’s not a SVG, but an abuse of the format :wink:

4 Likes
6

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