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

Thumbs up – better icons for WordPress/Polldaddy Nero Ratings

We unfortunately live in a world where light-beige skin is often treated as being the “default”, and this can be seen in everything from band-aids to “natural” toned make-up, to people being surprised that Rue from Hunger Games is Black. So I was a little annoyed when I turned on the free Nero Rating widget from PollDaddy and found that you don’t get any choice about the image used – it’s a light-beige thumb icon. This isn’t the biggest problem facing the world today, but it’s annoying.

FIXME

Apart from anything else, it’s just not a very nice-looking icon.

After some fiddling around I worked out that you can add your own image, but there’s a trick to it. First off, you can choose whether the icon width should be 16px, 20px, or 24px. I chose 24px since that’s still pretty tiny. The trick is that the image you need to upload is actually four icons stuck together like this:

Bottom left: thumbs-up
Bottom right: thumbs-down
Top left: thumbs-up hover
Top right: thumbs-down hover

So the total image is 48px by 48px. I had some fun and made a bunch of them. All are made from images I found at clker.com, and all are Public Domain, so you can use them any way you like, without restriction.

Thumbs up thumbs down icon lighter

Thumbs up thumbs down icon darker

Thumbs up thumbs down icon

Green red thumbs up thumbs down icon

Yellow plus minus icon

Red green plus minus icon

Grey plus minus icon

Blue plus minus icon

Purple happy face sad face icon

Pink happy face sad face icon

Blue happy face sad face icon

Yellow happy face sad face icon

Red green arrows icon

Once you’ve got your image, you go to your WordPress dashboard and click Ratings -> Advanced settings (you have to have Ratings turned on for this link to appear), under ‘Rating type’ choose ‘Nero rating’, then go to ‘Rating Style’ -> ‘Custom image’, and paste in the URL for your image.