OMG I am in love with SVG graphics + CSS transitions

So let’s just say that this is my first time working with SVG. Never touched the stuff before, but I’d heard the rumors. So, SVG? It’s a graphic generated from code that you can actually read, all living in an XML file. So I can make a graphic, and if I’m feeling like a bum and don’t want to open Illustrator or whatever, I can just pop open that XML file and tweak it from there. Assuming it’s a stupidly simple graphic and the change I want to make is really easy, like a color change or border width or something.

Anyhow, all you need to do is make an image in Illustrator or similar vector-based program, save as SVG, and rock it! (emphasis on the rocking it). Anyhow, file size seems pretty tiny (for the graphics I’ve been working on) and since they’re vector, you can totally render them at different sizes just with your CSS as well.

I made 3 different clouds, see, for a release that hasn’t gone out yet so unfortunately I can’t link to it. Anyhow, I’ve got them rendering at different sizes, and am using the css transition property along with keyframes classes to have them slide across the screen at different speeds. And, since the graphics are transparent, they have a sweet overlay effect when passing by another cloud (z-index going on up in here). All for a semi-subtle effect behind some text, as well as a semi-transparent div so there’s super layered action going on. Which again, I can’t show off cause it’s not live. But I can still be excited about it!

It would be awesome to learn to just straight up write SVGs, see what kind of graphics I could make without ever having to touch a graphics program. Honestly, I get peeved when people suggest that art and math are two completely different disciplines, as I’ve always seen them as completely intertwined.

(Note: this post was totally inspired by this other post: I’ve seriously slacked on blogging. Have apparently given up on the food blogging shindig, but the least I could do is write about things I learn on occasion, given how much I depend on Google and other people’s posts to learn the things that I do.)

Leave a Reply