Archive for September, 2009
How to convert Inkscape SVG to PlainSVG and PNG
I’m working on a project at the moment, that has a number of design and asset files I’ve created in Inkscape, and of course saved in Inkscape’s SVG format. The only problem is this is a somewhat ‘bloated’ format as it has extra information from SodiPodi and Inkscape embedded in it which increases file size, and makes it more difficult to traverse the XML.
I also need to convert these SVGs to PNG for including in the Design Document; and for art assets inclusion in the final product.
I tried playing around with ImageMagick, but it didn’t handle fonts as nicely as I’d have liked. There are ways to reconfigure it to look for the fonts, but I didn’t want to bother with that for now. Inkscape already displays it how I need, so I might as well use it for the whole process.
The simplest way to convert from InkscapeSVG to PlainSVG on the command line is: inkscape --export-plain-svg=OUTFILE INFILE
Note that if you name it the same thing you’ll risk killing your existing file. It’ll still load in Inkscape in theory, but some special things may be lost. Your mileage may vary.
To PNG, again, we can use the same command structure. inkscape --export-png=OUTFILE INFILE
Note that with PNG export, you’re going to have a transparent background by default. While you’re drawing on the canvas its default is white, however there is no actual data there, so it saves to a transparency. In this case I needed to have everything output with a white background. You can add the flag --export-background=ffffffff to get a white background. Replace the hex with any other html colour code for the equivalent background.
I put this all together in a script to let me do a bunch of files all at once. It needs some more tweaking for options like transparency on/off, checking for update times to avoid excess workload, etc; but it works fine for my needs. You may find it useful too. It creates two folders in the current folder: plainsvg and png. This keeps it neat and tidy. It’ll go over every .svg in the directory and convert and save. Note this has rename -f in use, which will clobber any existing files with the same name.
#!/bin/sh
# (C) 2009 Richard Cuddy
# Feel free to use this however you want, if you do something seriously awesome with it, let me know!
mkdir plainsvg
mkdir png
find . -name "*.svg" -type f -exec inkscape --export-plain-svg={}.tmp {} \;
mv *.svg.tmp plainsvg
cd plainsvg
find . -name "*.svg.tmp" -type f -exec rename -v -f 's/\.svg\.tmp/\.svg/' {} \;
find . -name "*.svg" -type f -exec inkscape --export-background=ffffffff --export-png={}.png {} \;
find . -name "*.svg.png" -type f -exec rename -v -f 's/\.svg\.png/\.png/' {} \;
mv *.png ../png/
How to use SVG to create easily changeable desktop backgrounds in Ubuntu.
I was wanting to leave myself a set of to do notes on my desktop the other day, so that I could see them after I woke up the next morning. I’ve done this a few times before, by editing the original image and saving out a new one.
I decided I wanted to make it look a bit less terrible by using Inkscape instead of the Gimp. For quick rectangles and text, Inkscape really is faster and looks better. As I was editing it, I wondered if it would be possible to use the SVG itself as a background image.
I opened up the Appearance settings, and browsed for the file. What do you know, it showed up. This in and of itself isn’t that exciting, until you realise that SVG can be changed really easily in a script. It’s just XML data. What can be interesting is that you can embed a link to a non SVG image to use an underlay. I didn’t have to duplicate my 600kb JPG, I was able to just embed that link, and then add text and paths on top of it.
What’s more exciting was that as soon as I saved any changes, the background image automatically refreshed itself. Something I was never able to make Windows XP do easily, without making an actual call to Windows’ DLL system. This was just edit, save, bam.
The possibilities are quite interesting. I may later put together some bash or python to do something fun like updating the BG with system internals, getting currently playing music, etc. Really you could do anything with this. All without damaging your original image or mucking around with graphics blitting code.
The only things to be aware of is that when you save in Inkscape, it defaults to an SVG format with a -lot- of extra information which makes the file more confusing than it needs to be. Just remember to save it as “Plain SVG” if you’re doing this. Also, the image link must be a full path. A relative link doesn’t work correctly, and Gnome can’t display the image. For example:
<image
xlink:href="/home/username/images/backgrounds/mypic.jpg"
x="0"
y="0"
width="1680"
height="1050"
id="image11" />
When it originally saved, it only saved as xlink:href=”mypic.jpg” If you’re doing future editing only in a script by changing the XML directly, you shouldn’t have to worry about this after you change it once.