SVG hacking: getting a cartoon giraffe to blink

cartoon giraffe Most people who create SVG vector images like this cute giraffe do it in Inkscape, which tends to mask the fact that, unlike PNGs or JPGs, SVG files are plain text files that you can edit, like HTML. In fact, SVG is a distant cousin of HTML, so the code looks kind of similar. The brilliant thing about this is it means even someone like me with no artistic skills at all can do interesting things with SVG. This giraffe is pretty cute, but I want to make her look more lifelike by making her blink.

Step 1 is to download the SVG file from clker.com. The artist who created this image dedicated it to the Public Domain, which means I’m free to do anything I want with it.

At first glance the code can be intimidating:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="268.95636"
height="504.60901"
id="svg2">
<defs
id="defs4" />
<g
transform="translate(-216.72685,-178.058)"
id="layer1">
<path
d="M 441.29462,560.70587 C 441.30944,610.4339 401.00107,650.75429 351.27304,650.75429 C 301.54501,650.75429 261.23664,610.4339 261.25146,560.70587 C 261.23664,510.97784 301.54501,470.65745 351.27304,470.65745 C 401.00107,470.65745 441.30944,510.97784 441.29462,560.70587 z"
transform="matrix(1.2167832,0,0,1.2167832,-76.150099,-121.55162)"
id="path2383"
style="opacity:1;fill:#ffcc00;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3.28735638;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
d="M 93.338093,349.0455 A 18.031223,15.556349 0 1 1 57.275646,349.0455 A 18.031223,15.556349 0 1 1 93.338093,349.0455 z"
transform="matrix(0.4247339,-0.2447311,0.4879048,0.846765,78.433639,337.30162)"
id="path3242"
style="opacity:1;fill:#784421;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
...

But there’s a nice simple structure to it: every section of code starting with

<path 

and ending with

 />

represents one piece of the image: an ear, an eyeball, or a brown spot, for example. You can figure out which part of the code corresponds to what part of the image by commenting out code segments one at a time. SVG comments work the same as in HTML, ie

<!-- This is a comment -->

.

So I set out to make eyelids by adding in two rectangles (W3C has some nice simple tutorials on doing simple shapes in SVG). I worked out the length, width, x and y values by trial and error, and all the styles are copied from the eye code, except I made the stroke-width narrower. Here’s the code:

Continue reading