CSS only goodness: Part VI

Using vector graphics makes a lot of sense with so many new devices coming out with high pixel density screens. This allows for crisp graphics (as long as the graphic contains sufficient information to allow it), using vector graphics does exactly this, in an extremely lightweight fashion.

The problem as always is IE. IE has a bug where your SVG heights don't scale, they are instead stuck to the default 150px height. The trick to solve this is simple and uses the "intrinsic ratios hack" http://alistapart.com/article/creating-intrinsic-r... to great effect.

1. Make the SVG { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
2. Work out the height to width ratio as a percentage. (height / width * 100%)
3. Make the wrapping element, { position: relative; height: 0; padding: (height / width * 100%) 0 0; }

It's that simple and it works in all browsers!