Tag Archives: SVG

Origami… Clipart… Bliss…


So calming. I’ve missed you.

It’s been too many years. Well, until the weekend just past, that is. I’ve rediscovered you, and mashed you up with clipart, which is another hobby I’ve been tooling with in your absence, and I am well pleased with your love-child!

Come then gentle reader, on a retrograde temporal shift with me, back to Friday, 31st January, 2014.
Continue reading

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, WordPress.com 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="http://dl.dropbox.com/u/23814580/StarUML.svg"
 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*

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.