Marty McGuire

Posts Tagged svg

Mon Jan 28
🔖 Bookmarked Using Font Awesome Icons in Hugo | Nick Galbreath

“With Hugo we can preload the SVG icons, and inject them into our page with partial template or shortcode, skipping the network.”

Wed May 23
📕 Finished reading SVG Animations by Sarah Drasner

Feeling pretty empowered by understanding more of the nuts-and-bolts of working with SVGs. Inspires me to work on improving my design skills and sensibilities.

Sat Feb 26

Thing-a-Day 2011 #26 - "Improved" scribbling in JavaScript

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I played with the mouse coordinate handling a bit to try and compensate for the rotation, but it's still not great. For some reason, up-and-down movements seem to track well, but left-right movement causes the drawing point to move up and down relative to the cursor.

My guess is that I am just being bad at "the maths" and that I'll get it figured out later. :)

Play here:
Fri Feb 25

Thing-a-Day 2011 #25 - Scribbling in SVG (+Hershey font typing)

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Added some scribbling to my little JavaScript app, which also gets saved to the SVG.

It's not great (my insistence on making these things map to the sticky note image means they don't line up right with the mouse), but it works!

As before, you can play with it here:
Wed Feb 23

Thing-a-Day 2011 #23 - SVG Output for Hershey fonts in JavaScript

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I really wanted to get SVG manipulation going in this demo, so I have ported the rendering (once again), this time using the jQuery SVG lib, which is really nice and easy to use:

You can play with it here:
Sun Feb 6

Hershey Fonts in SVG

149280 bytes. Updated
107203 bytes. Updated
32309 bytes. Updated
20791 bytes. Updated
22660 bytes. Updated
23636 bytes. Updated
15480 bytes. Updated
22512 bytes. Updated
35125 bytes. Updated
36666 bytes. Updated
35041 bytes. Updated
36582 bytes. Updated
30219 bytes. Updated
30303 bytes. Updated
16383 bytes. Updated
21662 bytes. Updated
15541 bytes. Updated
55942 bytes. Updated
5566 bytes. Updated
16193 bytes. Updated
15783 bytes. Updated
16078 bytes. Updated
26086 bytes. Updated
23433 bytes. Updated
15379 bytes. Updated
31035 bytes. Updated
25598 bytes. Updated
22608 bytes. Updated
19740 bytes. Updated
22309 bytes. Updated
23030 bytes. Updated
30928 bytes. Updated
21818 bytes. Updated
30830 bytes. Updated
8619 bytes. Updated

This work is licensed Public Domain.


Making text for Unicorn or EggBot plots isn’t always a fun process. Most tools require you to convert text into paths, and even then you get the outlines of shapes, which can often turn messy at small sizes.

mifga pointed me towards the Hershey fonts[1]. They’re a set of fonts for vector plotters named after creator Dr. A. V. Hershey who made them for the National Bureau of Standards.

These files are in a weird, weird, format. But after some normalizing, wailing, and gnashing of teeth, I was able to write some code to parse them and spit them back out as SVG! Now you can use these fonts in your Unicorn drawings.

Each SVG contains a layout of one of the Hershey fonts. The file below contains all of the SVG files. The file contains the (cleaned up) original .jhf files. math-drawing.svg is just an example of using these glyphs, including scaling and stretching. I think the result is nice!

To use these in Unicorn plots, you’ll want to grab my Unicorn G-Code extension for Inkscape[2].

[1] Hershey fonts -
[2] Unicorn output for Inkscape -


To use these fonts in your Unicorn plots:

  1. Download the SVG file containing the font of your choice, or grab the whole to get them all.
  2. In your Inkscape drawing, use File | Import to load the font you want
  3. Drag around and duplicate the characters that you want to use.
  4. Delete the ones that you don’t.
  5. Plot it!
    • (Unicorn users) Save your file and Save a Copy to get your .gcode!
    • (EggBot users) Plot directly from Inkscape. :)
Thu Jul 22

Space filling with 3D objects using Processing

While I know I should be finishing my MakerBot time-lapse camera series, I took some time for another project to play with some Processing. The above image was rendered in Processing, in real time in just couple of minutes!

Basically, I wanted to take a simple shape, defined by an SVG path, and fill it with images of 3D objects loaded from STL files. Specifically, many wonderful MakerBot-printable objects from Thingiverse!

After some Googling around, I found out that this problem is basically a space-filling problem, similar to an excellent Processing sketch named Scattered Letters by Algirdas Rascius, but with a twist.

The basic algorithm is:

  • Load an SVG and render it to an off-screen buffer
  • Set curr_size, the size that STLs should be rendered, to max_size
  • Choose a random STL model, give it a random orientation, and render it at the current size to an off-screen buffer
  • Try several times to place this model by giving it a random x,y position and checking it for a good fit:
    • Each non-background pixel of the model's off-screen image should fit within the non-background pixels of the SVG's off-screen image.
    • Each non-background pixel of the model's off-screen image should NOT overlap with any non-background pixel of the main display.
  • If a fitting position is found, render the model to the display.
  • Otherwise, shrink curr_size by a step and choose a new model.
  • If we drop below min_size, we should stop.

You can find the code for my sketch, which I call ThingiverseCollage, on GitHub. To make it work, you’ll need to follow the installation instructions in the README to install my (very slightly) modified version of the unlekkerLib for STL loading and rendering. I modified it to allow rendering to a PGraphics object, since it originally only allowed rendering to the main PApplet.

A note on STL files: unlekkerLib only loads STL files in the binary format. It chokes dramatically on ASCII STL files, such as those exported from OpenSCAD. I was able to use Zaggo’s excellent Pleasant3D to load ASCII STLs and re-save them, which converts them to binary STLs. As a bonus, Pleasant3D also allows you to orient objects in a way that will make them look most interesting when they are rendered down to 2D in the final image.

An example M.svg, as well as several objects from Thingiverse are included with the code to get started. To use your own SVGs, I have had good luck using Inkscape to draw or import shapes, and save them as the native “Inkscape SVG” or “Plain SVG” formats. Some files might require hand-tweaking; for example, if the width and height header values are something like “100%" instead of a pixel value.

There is also some simple configuration in the sketch to allow the export of PDF files. This is nice because the resulting PDF has full vector data, making it easily rescaled to any size you wish. Unfortunately, the current PDF renderer for Processing renders each triangle of each STL model as a separate path, generating very complicated vector output, which tends to bring Inkscape to its knees. I have had some luck with importing those files, rastering them out to PNG at a high resolution (e.g. 600 dpi), and using Inkscape’s “Trace Bitmap” functionality to re-vectorize them, though this requires some cleanup by hand.

Anyway, this has been a fun little diversion for me for the last couple of days. I hope that you folks find it useful! Post your awesome pictures in the comments, here!