SVG browser resizing

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.


One thought on “SVG browser resizing

  1. Nice post. Thanks for helping to get the word out about it. I really wish that more people would use SVG because it can help a lot with quality, file size, and features like transparency, but there are a few quirks with using it across different platforms like you’ve mentioned. I’m sure that those little problems are why more people don’t employ SVG for graphics more often.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s