SVG width and height do not consider units about congo HOT 4 OPEN

Hi!

how are you asking hugo to generate this? there’s a few ways to render an svg… theres a lot of nuance, as most of the tooling around images, especially in hugo have an expectation of a raster image… and don’t play well with vectors… so there’s some nuance and odd contortions one has to do at times to get things to play nice together

if you can share the source you’re working with we might be able to offer some suggestions as to a solution that’ll work

from congo.

Here is code responsible for this

options are:

• change regexp to only work if there are no units or units are explicitly pixels
• implement units conversion, but I think cm depends on the density of pixels on device and there is no universal way to do this "on the server"

UPD solution is to capture width and height together with units and output them in html as is.

from congo.

UPD solution is to capture width and height together with units and output them in html as is.

@stereobooster - I don't think it's as simple as that as the img tag only accepts dimensions in pixels. Updating the capture group to pick up the units still doesn't get the browser to display it at the correct size.

Using the reference image provided above and this modification:

    {{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*[a-zA-Z]*)["']` $svgContent 1) }}
      {{ $width = index . 1 }}
    {{ end }}
    {{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*[a-zA-Z]*)["']` $svgContent 1) }}
      {{ $height = index . 1 }}
    {{ end }}

Gives the following output:

<img src="test.svg" width="3.07cm" height="3.07cm" class="mx-auto my-0 rounded-md" alt="Test" ...>

But the actual image is still displayed as if it was 3.07px x 3.07px.

from congo.

@jpanther Indeed. I didn't realized that HTML width is not the same as CSS width.

Hm... Maybe we can use CSS (style="{width:3.07cm, height:3.07cm}")? Maybe aspect-ratio

Other options:

• do unit conversion (as proposed above)
• only support cases when there are no units or units are px. If there are unsupported units do not output width and height in HTML (so browser would detect width and height the old way)
  • height=["']([.0-9]*)(px)?["']

from congo.