Creative Radial Clones: SVG with Inkscape and PHP


Lately I’ve been working on drawing up some graphic desgin ideas I’ve had, mostly centering around the race team “Project Fate”… thinking along the lines of logos to try to figure out a team identity, aesthetic- imagery of engines, oil stuff, with a sort of old fashioned simple powerful monochrome theme. I’ve been working in inkscape because Illustrator is expensive and I kind of dig the simplicity of Inkscape.

To cut to the chase, I thought it would be cool to make a “wreath” out of shapes resembling cams from an engine, so that it would look a bit like a crest formed from wheat sheaves. It’s trivial to draw a simple cam shape by just elongating a circle- the proportions of the cam lobe are easy to tweak. The real challenge is arranging them in the circle with the proper alternating radial and angular offset to make it really work. Maybe it’s possible to do this using the Inkscape clone array dialog- but I wasn’t able to figure it out- so I did a little research on SVG and decided to use a PHP script (which I’m pretty familiar working with) to generate a SVG document with all the clones mathematically generated.

A couple of tips on using PHP to generate SVG- it’s super easy, but there are a couple of tricks that got me caught up for a bit:

Simply placing an inkscape SVG file contents within a PHP document with the header() line installed won’t work, you’ve got to attend to that <? … > tag- past that you should be OK.

So. I created the cam shape just how I wanted it, placed the center around which I want it to be rotated at (0,0) and oriented straight upwards- then copied that SVG group into my PHP file, then created a loop to generate the clones. I plan to make the PHP file a bit more interactive using a form later on, but this did indeed get the job done, with style. It is very empowering to have complete mathematical control over whatever happens- the true power of scripting. The script is also extremely versitile and easy to tweak, and with in-browser SVG rendering, it’s pretty fun to work with.

Without further ado-

View the PHP generated SVG as seen above

View a generalized version of the PHP source code, usable for any purpose

Once you’ve used the PHP to get the design you want, you can import that back into inkscape and add other design elements to it or tweak the parent object to tweak all the clones- neato!

I drew up a timing-gear and a somewhat abstracted 90Ëš V-engine to make this- it’s a rough draft, but I like where it’s going:


I realize this is not the most exciting use of PHP generated SVG ever, but it is pretty neat to be able to apply the power of scripting to vector graphic design. I hope this little experiment will be useful to someone!

Posted on April 25, 2009 at 11:14 pm by Henry · Permalink
In: Art and Design

2 Responses

Subscribe to comments via RSS

  1. Written by Simulating Spin-Out Skid Marks at AcuteAero
    on April 26, 2009 at 11:25 pm
    Reply ·