SVG width and height do not consider units

sorairolake commented 4 months ago

Issue description

The width and height of this image are 3.07cm:

example

The following code will be generated:

<picture  class="mx-auto my-0 rounded-md" >
  <img
    src="/contact/example.svg"
    width="3.07"
    height="3.07"
    class="mx-auto my-0 rounded-md"
    alt="alt text"
    loading="lazy" decoding="async"
  />
</picture>

Quoted from the SVG 1.1 specification:

"1cm" equals "35.43307px" (and therefore 35.43307 user units)

Quoted from the <img> specification:

height

The intrinsic height of the image, in pixels. Must be an integer without a unit.

width

The intrinsic width of the image in pixels. Must be an integer without a unit.

According to these, the values of width and height in this case should be 108.7795249. However, the units are not actually considered, so a small image is rendered. Presumably, this will also occur in other units except px.

Theme version

v2.8.1

Hugo version

hugo v0.124.0+extended linux/amd64

Which browser rendering engines are you seeing the problem on?

Firefox (Mozilla Firefox)

URL to sample repository or website

No response

Hugo output or build error messages

No response

wolfspyre commented 4 months ago

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

stereobooster commented 3 months ago

Here is code responsible for this

https://github.com/jpanther/congo/blob/50b77b2836f4750955848a112277818b60cb905b/layouts/partials/picture.html#L14-L24

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.

jpanther commented 3 months ago

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.

stereobooster commented 3 months ago

@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)?["']

jpanther / congo