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
This led to a problem in webkit based browsers. Turns out you need to provide both – the
viewBox and the
height. See this post for an excellent comparison of SVG content in the different browsers.