Category Archives: Vector Graphics

Something about images that don’t pixelate. It draws me in like a moth to a flame.

An Inkscape Escape And The Penny Drops

I had a roughish day today (well, as the current contract goes). Just so the scene is properly set, it was nowhere near as bad as my favourite programmer’s anthem:

There’s only really one line in the song that rang true for me today, and by the end of this post you’ll probably have guessed it.  Still, the day was rougher than normal, with time pressure to isolate and fix the problem along with implications that even though the Boss-built prototype was also borked on the data file, there was probably an issue with my “industrial strength” version.

I’d managed to isolate and fix the problem by lunch. Turns out that there was a breakdown in communication of the requirements for handling different DBase files generated by differing versions of ArcGIS. And, violations of expectations…

You see, I’d been told months ago that the program had been thoroughly tested, and it was water-tight.  This sudden shock of being told the exact opposite with a directive to drop another deep-issue problem called up shades of previous programming gigs that most definitely DID match Johnathon’s most excellent programmer’s anthem.

Anyway, I was brooding over it tonight, and decided to take my mind off things by re-trying an Inkscape tutorial that I’ve not quite grokked on previous attempts. Given the path the day followed, I’m not surprised in hindsight that I chose the subject matter that I settled on. Thankfully, this time I nailed the tutorial, and can claim one more little Inkscape pattern in my growing bag of tricks:

A Quote from Miracle Max

A Quote from Miracle Max

Who’s Miracle Max? On the very off chance, that you’re reading this and you don’t know, I’m about to do you a flavour. Sit back and watch Max do his sthick, then go watch the entire movie. It’s called “The Princess Bride“, and is well deserving of its cult classic reputation.

So anyway, drawing up the diagram allowed me to finally get the distance from my emotions that I needed but couldn’t seem to get to. By the end of the Inkscape goofery, I was mentally quiet enough to accept the waiting insight that the day’s entire emotional baggage could be traced to my violation of expectations.

The shock of having reality bent into a shape that I had convinced myself just couldn’t be. The deflated ego, flapping about widely in the breeze looking for someone to blame for this mismatch between “what is”, and what I was demanding “what is” be instead. And finally, the still-tentative understanding I’ve recently been culturing that between stimulus and response lies choice, and it’s not the falling down that constitutes failure, but the staying down.

The moment the insight hit me, it was dead-easy to just let it all go. Who knows? The boss might have been having his own violation of expectations over a program that had been watertight for months, but when he absolutely needed it for a pending paper, it fails him. Nice idea thanks ego, but I’m not bothered trying to invest any belief in it because that’s just heading back down the path of expectations.

“What was”, was. “What is” just took “what was”, and used it to achieve something that pleases me. Story ends happily thanks to catching myself bound up in mental chatter of violated expectations. Also, there’s the recognition that I can choose to let go of a poor response to a stimulus and pick a new, healthier one regardless of how long I’ve been cradling that poor approach.

The moment I pick the healthier response, the temporary failure passes, and I’m back once again an island of calm.


Don’t Panic

Don't Panic

Embedding a UML SVG Image in my blog

For reasons that are beyond me, I’m currently interested in getting pretty SVG images of UML diagrams to display in web pages.  Specifically, in my blog.  First, I need a UML editor that doesn’t produce rubbish diagrams at home.  I’m currently sans a Windows install, so to add spice to the challenge, I wanted to see if I could get great looking UML diagrams out of Ubuntu (no, every Linux UML editor I’ve tried offends me greatly in terms of asthetics).

UML Editing under Ubuntu

There are only really two UML editors I love and they’re both Windows tools.  The cheap (as in free) one is StarUML; abandonware circa 2007.  The other is Enterprise Architect which I don’t have a home licence for (very good value for money all the same).  Both seem to have good reputations with running under Wine (1.3.28), so long as I respect a few winetricks for StarUML.

I’m happy to report that I can run StarUML under Ubuntu and everything I’ve tried to date seems to be working fine:

Here's StarUML, running under Ubuntu 11.10

Printing a PDF file in Wine

The next step was to get StarUML to print out PDF files.  After a bit of screwing around, the easiest approach was to simply add a PDF printer to  the Ubuntu print manager via a cups PDF printer (thusly from the command-line):

sudo apt-get install cups-pdf

Once installed, Wine seamlessly offered a PDF printer for me to print to, and StarUML was happy to spit a  PDF file of its current drawing out and drop it in a new PDF subdirectory off my home directory.

Converting a PDF file to SVG

I thought at this point that things would be plain sailing given the recent success I’ve had under Windows getting Inkscape to edit EPS files (I figured PDF would be just as hassle-free).  I was wrong, the PDF import under inkscape is doing something crazy-funky with the fonts.  In looking for answers/alternatives, I found a wonderfull little utility called pdf2svg.  I installed it, and from the command-line can do something like:

pdf2svg someVectorFile.pdf someVectorFile.svg

This gave me a perfect SVG equivalent to my PDF file.  I did a little cleanup in terms of whitespace with Inkscape, and moved onto how I could render it with my Blog.

Rendering SVG files via WordPress

Firstly, won’t allow me to upload SVG files as a valid form of media. I’m hoping they’ll eventually relax that constraint as browsers start rendering SVG files as a more common activity.  As an alternative, I decided I need a web address  for the file, so I uploaded it to  Dropbox account’s public folder, and retrieved a URL for it.

Secondly, I tried following all these suggestions for getting it to render, because WordPress support told me it’d work.  Sadly, none of the listed options gave me gold.  As a last ditched effort, I decided to use the WordPress “Add Media from URL” function, using the dropbox URL.  Joy of joys, it works.

Here’s the HTML that WordPress wraps the SVG image in, JIC you’re interested in that kind of thing (oh: I modified the width to consume the blog post width, as the image insert dialog doesn’t allow that kind of subtlty):

<img src=""
 alt="An SVG image of a UML component diagram.  If you're seeing this,
does your Web Browser support SVG images?"
 width="100%" />

And finally, here it is.  A UML diagram that doesn’t suck (alright, maybe I could push the font size up a bit, but that’s my  problem), that is a scalar vector graphic, AND being rendered from my blog:

An SVG image of a UML component diagram.  If you're seeing this, does your Web Browser support SVG images?

Just for s**ts and giggles at this point, feel free to bash whatever keys you use with your browser to resize fonts (typically <CTRL>+ to embiggen, and <CTRL>- to emshrinken). Your mileage will vary, depending on how well your browser handles SVG files. For chrome, I’m having me a little nerdly squeefest doing it. 🙂

 And I’m done for tonight.  *yawn*

Rich EPS file editing with Inkscape

I’m currently preparing a paper for journal submission. A number of my pictures are UML diagrams, drawn in Enterprise Architect. The journal’s standards for graphical images represent a very high bar that Enterprise Architect can’t jump natively. The resolution of the bitmapped files it produces fall way short of what the journal is willing to accept. For a preference, the journal wants EPS files, given that they don’t pixelate when they are re-scaled.

There were a lot of dead-end paths I tried to get a vector graphic EPS file of these UML diagrams that I won’t document here.  Instead you, dear reader, get the winning approach. One that I’ve turned into a blog entry so in a year’s time, when I suspect a new supervisor may want a publication on what we did, I can reproduce this trick without re-walking the dead-end paths.

Firstly, use PrimoPDF to print the diagram to an EPS file.  You need to ensure that you are printing to a file using the PrimoPDF printer, that you are doing it in black and white (something about colour is causing invalid EPS files), and under the “Advanced..” settings, “PostScript Options”, you want Encapsulated PostScript (EPS) as your “Postscript Output Option”. For good measure, I’ve also pushed the print quality up to 600 dpi, but it’s probably unnecessary.  Here’s a picture of the printer setup employed:

A picture of the PrimoPDF settings for successful EPS file printing

PrimoPDF settings for successful EPS file printing

The file generated is an EPS file, so to save yourself grief, ensure the filename you specify has an eps extension.

Secondly, Inkscape is happy to import and export EPS files, and supply very rich drawing capabilities in the middle.  It isn’t going to do this for you straight out of box though. What you need is to install ghostscript, and ensure that it’s bin/ and lib/ directories are in your PATH environment variable, as described here.

When you first attempt to open an EPS file with Inkscape, you’ll see a PDF import dialog screen something like this:

A picture of PDF Import Settings Dialog of Inkscape

PDF Import Settings Dialog of Inkscape

When the file is first loaded, it is probably embedded in a page of mostly useless whitespace. Trim the page down in size to match the EPS image by going to “File->Document Properties->Resize page to drawing or selection”:

A picture of resizing an EPS page in Inkscape

Resizing an EPS page in Inkscape

Once that’s done, introduce a new layer, move all the text elements up into that layer, and paint some of the boxes to assist readers in their efforts to chunk together related elements on the diagram. Of course, we could go a lot further in tweaking given Inkscape’s rich editing facilities, but that’s enough to prove the point that you can now do some deliciously serious editing on an EPS file:

A picture of an EPS File being edited in Inkscape

EPS File Editing in Inkscape

Scribble with delight on your EPS files long and prosper!

I never promised you an Iconified Compass Rose Garden

I was reading a gardening book today, stressing the importance of understanding how the sun interacts with your garden. It got me to thinking that I only vaguely know the layout of our house with respect to the compass points. I was also feeling the need to do something to keep my mind off this returning cold, so I hatched on a bold, daring and nefarious plan.  I’d get a top-down view of the house, and add a compass rose to it.

First, I tried just taking a screenshot of our place from the satellite view that Google Earth gives, and dumping a free clipart compass rose on top of it via Gimp (because the image is already oriented with respect to the compass).   The result was OK, but not pretty. There was also the vague discomfort around using the image for my own purposes, as I have no idea what copyright covers it.

I decided that what I didn’t like about it was that it was too busy. I just wanted the very essence of the house view combined with the compass rose.  Also, I’ve got this love-affair going on for Scalar Vector Graphics, so I hatched on a new plan around making an SVG icon instead. Why? because SVG scales to any resolution without pixelation.  If none of that means anything to you, just think “always pretty, regardless of evolving video technology”.

I took the house image in Gimp and put it through an edge detection filter to draw out just the lines of the house.  That temporary image, I loaded into Inkscape (my favourite SVG tool) and used it as a base (throwaway) layer that I traced the house lines over with proper SVG lines.  I’m pretty certain the base image falls under US  “fair use” laws so I threw it i the slideshow below.

Once I had a good simplification of the rooftop, I added a little colour, and a new layer. I took Inkscape’s option “Import from Open Clip Art Library” for a burl, and picked a compass rose that appealed. I then fiddled a little more with with transparency and colour until I got the base SVG image

With the base SVG image in place, I played with a number of filters to achieve different looks.   I’ve included a small gallery of my favourite filter results below (the following gallery are PNG exports by the way, as most Web browsers still don’t support rendering SVG images natively):

This slideshow requires JavaScript.

So, now I am spoiled for choice with respect to an iconified representation of how my house is oriented with respect to the compass, and my day’s creativity itch has been successfully scratched.