Welcome to Vectorville!

To some degree, the last few days I’ve been like a kid in a candy store. It’s really nice that many modern CSS goodies have come of age—even if that age is a sort of awkward but functional adolescence. When I last did heavy web design the world was still stifled by the quagmire that was Internet Explorer 6. Thankfully, it relevance appears to be mostly dead.

Anyone who worked in web design during those years probably remembers the pain of getting a beautiful layout completed and then spending longer getting to working in IE 6 than the whole rest of the development. While there was a sort of masochistic satisfaction that came from getting some everyday feature supported by every other browser in the world to work in IE 6, it’s not something I’m going to miss.

I digress though. This should be a celebration, not a remembrance of the dark days.

I made and used my own SVG today. There was some fumbling around and some unexpected behavior, but after some mucking about, I ended up with the following masterpiece:

Mobile Menu SVG

Pretty slick, eh? If you have a peek up at the menu bar, you might notice a stunning resemblance to the currently non-functional menu button.

In other news, while trying to get this image set properly, I’ve come to find that Chrome and Safari have some really, really annoying bugs when it comes to scaling SVGs, especially when you’re not providing any specific heights and widths—something which seems to be the whole point of using SVGs!

It seems that this has been an issue for some time. This bug is worth noting because if you’re like me and you’re reading guides on how viewBox should work and nothing makes sense, this could be the reason.