My First SVG

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.

header

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.code

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!

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s