jul 20, 2023

🔗 TIL #1: SVG attributes units

Not many days go by where you find out something about web development or some quirk of HTML or CSS, so I thought I'd start a series of posts to keep track of those findings and remind myself of them.

I think it's a good way to keep track of what I learn and also usually, the findings are not something you use on a daily basis, but you might stumble upon an important piece of information after hours of searching, so I think these hit the sweet spot where you might want to write those down.

# SVG attributes units

Some SVG attributes like x, y, width, height, dasharray can be specified with units like px but the correct way to do it is to specify them as numbers, without units.

<svg width="100px" height="100px" viewBox="0 0 100 100">
	<rect x="10" y="10" width="80" height="80" />
</svg>

I found out while trying to animate a dasharray value in CSS and it would work fine on Chrome but not on Safari. After an hour complaining about browser differences I realised that the solution was to remove the px unit.