I was at a coding jam session at Greenlake Forza last night with Paul Nissen, Seattle Central Creative Academy code-helper (for the lack of a better title). It turns out the kids at this year’s Web Design Bootcamp are getting schooled in Scalable Vector Graphics (SVG). When they asked for help, I kind of shrugged, like what? Chris Sullivan mentioned it last year just once and we didn’t implement one or anything, we just ooohed and ahhhed.

Aside from some trouble with the school’s server, the kids are working their SVGs. This inspires me to implement one myself (on my snazzy portfolio site— in a trial header called headera.php, so it doesn’t show up on the other pages, but that’s another thing entirely.). Harder than it looks. Make a thing in Adobe Illustrator. Save as .svg. Put it in your images file. They are wild beasts, SVGs, scaling all over the place. Here are my attempts.

First one is the height of the nav and the text isn’t outlined in the svg, so it shows up as Times New Roman. Fascinating! The second one, I gave a height and width, but it’s huge.

In the end, it’s working because I told it where to go (negative top margin), how big it needs to be (using percentages) and outlined my text in Adobe Illustrator. And I made a back up .png for browsers that are too lazy to deal with something vector.

Here’s my code. I lifted it from this informative website. And that website delivers a lot of other ways to implement these things, if you don’t want to put some javascript in your html.

I must add my nav tags and some other good things (and notice how I don’t use a unordered list that’s weird…) so don’t judge my code too harshly.

But, yeah, I love SVGs now. They look real sweet on mobile!