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
