DoctorMo's Blog

So you’ve just downloaded an awesome poster from Spread Ubuntu and now you’re trying to edit the svg so you can provide a localised version or mash it up for your own needs.

But there’s a problem… svg files don’t store the fonts used so you’re stuck looking at an ugly ill-fitting set of font defaults in inkscape and the dozy submitter didn’t specify what fonts he used. Good news! there is a command that can get for you a list of fonts used in any svg file:

`perl -lne “foreach(/font-family:(.+);/){print $1}” < foss+creative-commons3.svg | sort | uniq`

Using foss+creative-commons3.svg you can see an output like this:

10.15 Saturday Night BRK
Automatica BRK
Bitstream Vera Sans
DejaVu Sans
Fatboy Slim BLTC 2 BRK
impact
Loma
Ubuntu

Not all of these fonts have been used, since it’s easy to save a file in inkscape without using the Vacuum Defs process to clear away cruft. But you do get a nice list of all the fonts you should have to see the poster the way it was intended.

Thoughts?

Showing off the couple of extra drawings I did for the newer wacom bamboo tablets:

Like last time I haven’t finished all of the tablets or released the svg files, contact me if you need access. Once finished I’ll hopefully publish them all.

Quick note, those interested in the very start of extracting binary fla files can start here:

Python Scripts – GPLv3 don’t forget.

This is part of the way and yes I’m well aware of using Flash CS5 to convert these binary files into their friendlier XML cousins. But we should be able to rip these apart as well. I think having some xml and binary forms of the same data sources would be most helpful.

I’ve put out a call to artists to get some of these source files. If your reading this much later then perhaps I’ve had an update since which has better scripts or more information.

We had a showing of Nina Pasley’s fantastically animated “Sita Sings the Blues” here at DebConf last night. It’s great watching Creative Commons on the big screen and it was great to see Nina there and the reception she got for this and her meme shorts.

One question that we asked was what software was used to make all the artworks and as it turns out all the works were not made with Free and Open Source Software. So what is the problem?

Well Sita was made before Nina was aware of the FOSS community and any of the tools available, as so often happens. The workflows that one builds up as an artist is critical to how one thinks about making art and focusing creativity. It’s hardly surprising that an artist would be reluctant to change workflows.

But then there is the other problem of how to make the resources available in the original source files (available under CC-BY-SA) actually available in useful and open standard formats. Converting from swf to svg actually has more code written than to try and convert from fla to svg. Which is interesting.

FLA is the source format to Adobe Flash creator, it’s an OLE2 stream (Microsoft creation) which is often used for Microsoft’s binary office documents and other such files. It’s like a mini basic fat system inside the fla containing all the resources that make up the animation.

There is a tool in Ubuntu called ‘ripole’ but it doesn’t yet extract the contents of the fla sources successfully, libraries pole and libextract seem to do the same trick so perhaps it’s just some glue required. Perhaps the first step to being able to offer artists the transitioning tools to open standards is to extract the resources from fla files, either as an archive module (open it like a zip/tar file) or mount it as a local drive (bit like iso loop mounting). I favour the archive approach as you could extract all your resources and just keep them in a directory or re-tar them up for storage and distribution.

Obviously once this step is over there will be a conversion of the elements to open formats. But that probably is just another case of finding existing tools that convert swf and seeing how similar they are. We may even find some fla resources are actually just xml.

Update: With a python module and a lot of hacking, I’ve managed to decode all of the media in an fla into their component files. This includes the aif audio and the flash animated elements. Email me if your interested in the python script to do this.

Some folks were finding it hard to get a hold of the new ubuntu branded icons for each official release:

I’ve added a joker in there too because I was bored while packaging. Find the tar from the download button.

I wrote this nifty script in python to take the output from the cal command and parse it, using an svg template it outputs an entire calendar in your own style, with your own pictures and everything.

It was a bit rushed because I was making a personal calendar for my wife with birthdays, anniversaries and our family pictures on it. And it came out really well too, she’s very happy with it! Here is a page from the calendar:

A big shout out to Inkscape, which again was flexible enough to allow me to create my calendar template without complaining about missing images or custom svg xml. If you want to have a go yourself at making a calendar then just download the following package:

calendar-creator.tar.bz2

Populate the flips directory with your own png files 01.png – 12.png and a title.png file for the front page, add any extra dates you want to the dates.lst, then run `./create-cal.py 2010` on the command line this will make a whole set of svg files for each page. You can then run `./make-book.sh` which will use inkscape (make sure it’s installed) to generate png files of each page.

Once you have your images, you can print them out in order or create a pdf of them using imagemagik’s convert command: `convert pngs/*.png full-calendar.pdf` but be aware this file might get big and generating these things takes time.

I will post a complete calendar tomorrow.

I want to be able to take one of my animated svgs and convert it to a set of png files in order to make video overlays.

I could use some of the existing raster based video effects, but I’d rather use some of the more interesting and familiar animations available to svg SMIL effects, I can then also write everything in xml.

The only problem is that there isn’t currently a way to generate frame by frame from svg SMIL animations. Unless anyone else knows of such a tool.

There is a tool called svgani which has it’s own animation specification but I’d rather use SMIL since I know it and there may probably be tools to create animations in the future.

So there is a tool called fakeSmile which I use to enabled svg animations in Firefox via javascript. It does this by editing the xml on the fly for each interation. I figure if I can use the same logic to generate an xml/svg output per frame, I’d be able to then use inkscape to (very slowly) generate each png frame.

But I figured I’d ask the community first.

This is a second part to my Who needs Flash post, I’ve continue with prodding to work on some ideas for simple svg maps. A map that is able to find your country or state, but not directions or anything like as complex.

This map shows the world, it’s interesting because it loads maps from a simple apache webserver using XMLHttpRequest and allows you to drill down each section of the map until you find what you want. For the purpos of this demonstration I have only populated a number of maps, I expect that it’d be very complete and useful with an open streetmap backend cleverly processed into the required output and so forth, maybe combined with wikipedia links and other fun stuff. See here for each of the map files and how it was constructed.

I also used FakeSmile in this project, this allows Firefox to display svg animations, even though Firefox 3.5 doesn’t yet support animations in svg files (coming soon), fake smile is a great project, a credit to the authors, I only have one problem with it so far and that’s the infinate loops and uncaught flipping of properties once animations should have finished, this can cause your cpu to spike, so don’t be worried if your computer grinds to a halt.

You’ll also notice that it makes heavy use of cascading style sheets, very useful for hovering and selecting elements based upon multiple inherited classes.

There isn’t any server side code in this demonstration, it’s all done by matching up the element ids to file names stored on the server. The server did need a .htaccess to report all svg files as xml and not svg+xml which firefox balks at.

Also worth noting is the horrible, horrible speed of everything. Hopefully if more demonstrations in svg can be put together, stretching the framework, we’ll see improvements in Firefox and other browsers when it comes to rendering speeds and svg processing speeds.

I think SVG is the better standard and the better framework when compared to Flash, not because of speed or technology, but just because of how integrated it is with everything. I was able to develop this demo using Firebug, I was able to use standard javascript and standard css to style and run everything. If it wasn’t for the terrible neglect that svg has suffered at the hands of Adobe, we’d have replaced Flash already for a large number of things.