As I told in my last post, I’ve read the articles of Sara Soueidan about viewbox again. Also I had to view again her last talk in the CSSconf EU 2014.

As she said, if you wan’t to make an SVG responsive you’ll have to follow the next steps:

  1. Remove ‘width’ and ‘height’ attributes from the root <svg>.
  2. Add ‘viewBox’ attribute if not already present.
  3. Set ‘preserveAspectRatio’ to ‘xMidYMid meet’.
  4. Embed.. …and apply fixes where/when needed… (If you’re thinking in IE you’re correct, but not only IE).

Talking about fixes, I have my own fix to something not directly attached to responsive, but something that it’s really annoying to me. In Chrome (at least in Chromium 37.0.2062.94 over Arch linux) you wan’t to set display:block over your root svg element. Why? Because if you don’t do it, Chrome (Chromium) decide to put a “”beautifull”” display:inline that makes scrollbar appears.

I don’t know if this is really a bug, or a feature that I don’t understand but I HATE IT!.

The result is not perfect, I should resize everything based in the lowest resolution to have a good display in all the resolutions, but for today it’s enough for me.

You can see it in: https://www.graph-ic.org/svg-experiments/rack/index.html