For more tips like this, sign up to the weekly newsletter!
Use preserveAspectRatio="none" for correct element positions
Sometimes when using an svg with the viewBox set, the coordinates of the elements do not match that of the svg.
Why is that?
The culprit is preserveAspectRatio.
Its default value is xMidYMid, which scales the elements inside the svg to preserve the aspect ratio. This, in turn, disconnects the coordinates from where you think they should be.
The solution?
Specify preserveAspectRatio="none".