The advantage of using SVG is in its name – Scalable Vector Graphics. You can create your image at whatever size you want and later you can resize it without it getting blocky/blurry etc.
That’s great in theory. I’ve had problems in the past where I would set the logo of a website as a semi-transparent background but the page would centre it instead of scaling it. This quickly led me to use the viewBox
property and not the width
+ height
properties.
This led to a problem in webkit based browsers. Turns out you need to provide both – the viewBox
and the width
+ height
. See this post for an excellent comparison of SVG content in the different browsers.
Advertisements