When selecting an svg file as the source of Image element, the width and height attributes aren’t output in the HTML. See below demo comparison with a png:
In my particular use case (not shown here), I’m outputting image files defined using custom data, so I couldn’t manually define it even if it were possible, as they’re all different.
And for reference, the width, height and viewbox are all defined in the <svg…> element of the image itself.
Is this a bug, and if so, is there a quick fix available?
I hadn’t thought about adding them as an attribute, so that was a useful suggestion, thank you. However, as I mentioned:
In my particular use case (not shown here), I’m outputting image files defined using custom data, so I couldn’t manually define it even if it were possible, as they’re all different.
Is there a way to populate the width and height of those attributes using dynamic data? (I’m still new to Bricks) I’m using an ACF Gallery.
Also, correctly specifying width and height is important to Core Web Vitals – and thus an SEO ranking factor – so styling isn’t an option (though I am indeed still sizing with CSS).
I would suggest that regardless of whether I’m able to get the values using dynamic data or not, this is an important issue that needs to be fixed. To my mind, there’s no reason why an svg in an <img> tag shouldn’t have a width and height by default.
Thanks Matej. Yeah, I can manually add the values as attributes, and I finally figured out that I can use {acf_[field_name_here]:array_value|width} to get the dynamic attribute. That only works for raster images though.
Interestingly, I tried rendering outside of a Bricks template and still got no width and height. I echoed out the image array and the width and height were missing there too, so it’s a more fundamental issue.
I also tried disabling Bricks’ SVG support and instead used Safe SVG (even though it looks like it should work) to no avail.
There’s an interesting SO answer where people are diving into the SVG file itself to extract the width and height from there. I was unable to get this to work with Bricks, but someone else who stumbles across this in the future may be able to.
Ultimately I think it’s the responsibility of whatever is doing the uploading of the SVG to extract the width and height and add it to the image’s meta data as part of the upload process rather than the rendering process. So actually I do think it’s Bricks’ responsibility to do this, and probably amounts effectively to missing functionality, rather than an actual bug. So maybe this should be moved to Feature Requests?
Anyway, I’ve spent way to long on this now and I’m just going to take the - admittedly probably small - Core Vitals hit for now.
thank you for the great answer.
As you suggested, I think it’s best to move the request to the Feature Requests / Improvements channel, which I just did. Let’s see what other people have to say.
I’ll also talk with the rest of the team about this, and we will see.
