Written on 10/21/2014 in Web development

Short update about the website: There's a new about page, YAY!. You can check it out here: About the vorpal blog. Don't forget to hover-over/touch the image! This is actually a small update, but I was getting the question where 'vorpal' came from a lot. So I explained all of it in the about page.2

SVG howto

Aside from the page content, I more recently started drawing again and wondered why I wasn't using my amazing artistic skillset1 to put some panache into the site. I used SVG to create a vector drawing about 'the vorpal blade'. I used SVG before, but was always a bit hesitant to use it because of browser support. But nowadays, all modern browsers are supporting it. And the other browsers ... well ... let's forget about the IE-OLD users for once.3

There's a lot to learn once you start using SVG and there are people much better at teaching it than me. So I'm going to be lazy and point you in their general direction:

• CSS tricks has an excellent post about browser support, the different kinds of svg and how to use them
• How to use SVG
• I used inkscape for drawing
• This post explains the different save methods to get clean svg output out of inkscape

When should I use SVG?

So why use SVG? Well, there can be several cases where it really comes in handy:

1. You need a fully scalable image without it getting pixelated
   • Big use case: logo's & icons
   • Backgrounds: SVGBackgrounds
2. Image 'file' size. Depending on the image (photo, or a circle with a border) your image could be a lot less bits when using vector images.
3. You made a vector image, and you consider it a waste to export it into a bitmap image
4. Interactivity. Inline SVG can be interacted with using CSS. Almost like you're working with elements. You can change colours, size, borders of any element in the SVG.
5. Any other reason is fine too, you don't need to explain yourself.

The fourth reason was my reason. I could have put my poorly drawn image on the about page using a bitmap image. But that would be missing a great opportunity to bring some interactivity into an otherwise very static and non-appealing page.

The story

So I thought to myself, what can I draw about the blade. Perhaps I could draw a hero, that while being obviously awesome, is overshadowed by a beast of legendary size. But the beast is no match for a small, but powerful blade, no more than a toothpick for him. The vorpal blade. So I created the SVG in inkscape, I used layers to group the different frames. I had several layers displaying the stance and several layers displaying the 'attack'. When you hover over it, I use CSS to show one frame, and hide another. It's as simple as that.

I do like how those SVG backgrounds look, perhaps I'll try out an SVG background one of these days... But I'm already working on several projects right now, so it's going on the backburner for now.