Adorable cartoon animals discuss sharing cultural works

A comic. The scene: Pleasant countryside landscape. Character 1 is: a cute cat. Character 2 is: a cute fox. Character 1: For much of history, most cultural works were created and performed on the spot, in real-time. Character 2: We're talking about myths, stories, songs, and plays that were told, sung, or otherwise performed by an artist face to face with her or his audience. Character 1: Writing is as old as civilization itself, but written works, carved onto tablets or, later, written on paper, were costly to produce, and thus not widely available. Character 2: Folk art was local. Every region or community had its own songs, dances, stories, or what-have-you. Character 1: Broadcast radio started to be a thing in the 1920s. That's less than a century ago. Film and television followed in due course, as did magnetic tape recordings, LPs, VHS and audio casettes, then CDs and DVDs. Character 2: It was the age of mass broadcast media. Music, images and videos could be transmitted to everyone, and played over and over again, like magic! Character 1: It was also a time during which corporations took over control of the production of cultural works. Instead of listening to that one person in the village who could play and sing, you listened to the same top 40 hits as everyone else. Character 2: Then, in the 1990s, the Age of Internet began, and once again everything changed. Napster, MySpace, iTunes, Spotify... The music and video industries struggled to adapt. Character 1: Now the corporations are saying they need to spy on us and control how information is shared over the Internet, all in the name of protecting their copyrights! Character 2: But cultural works aren't just easier to copy and share, they're also easier to create. People are recording music in their bedrooms where once they would have rented a studio. Character 1: And more and more artists are sharing creative commons images, so that even a person with no talent at all can easily create a snazzy-looking cartoon! Character 2: We're going back to the situation we started with, where making cultural works is something that ordinary people can do. And who knows what exciting new stuff the future will bring?

Advertisements

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