Writing a Box: SVG Basics

Lately, I’ve been looking for ways to get people interested in basic electronics, and things like kits and/or lessons seem like a great way to do that. I’ve also been looking for ways to learn about making things with a laser cutter, so I decided to put together a stack-able box that could double as storage and a display for available electronics parts at a local makerspace.

The basic idea was simple; start with a box ‘outline’ similar to those generated by Makercase, and then lay out a grid pattern of ‘dotted lines’ to slot crenellated dividers into. I wanted something like a shallow tray, with several horizontal and vertical dividers to hold different types of parts. What could possibly go wrong?

At this point, with a basic idea and maybe a quick sketch, most sane people would open up a program like Autodesk Inventor, Solidworks, or Adobe Illustrator. Options like Inkscape, OpenSCAD, or SolveSpace would also work well if you like free software. But after having some trouble with SVG exports, I wondered if it might make sense to just write the files by hand, for a simple grid pattern.

I guess it depends on your definition of ‘sense’! In this post, we’ll learn how to write SVG files for a small laser-cut ‘test’ box:

Quick sketch of a test box, and what it’ll look like.

SVG: ‘Scalable Vector Graphics’

I should start this section with a huge thanks to Joni Trythall’s Pocket Guide to Writing SVG ebook – it looks like this was a Kickstarter’d project which got open sourced after reaching its funding goals. Doesn’t that just give you the warm fuzzies? It’s a well-written introduction to the basics of the SVG file format, and it is where I learned just about everything that I’m about to try to explain.

So it turns out that the SVG format is very similar to how HTML is structured. If you’ve never seen HTML files before, I would recommend taking a quick look at a page like W3Schools’ “HTML Basics” to get a basic idea of the “nested tag” structure that these documents use.

A tag in an SVG file is a lot like a tag in an HTML file – it defines either something to draw, or some properties to apply to other tags. A ‘rect’ tag draws a rectangle, a ‘circle’ tag draws a circle, and so on. A tag’s properties define things like where to draw the shape, how large it should be, and what color to use.

It’s tempting to use simple ‘rectangle’ shapes for something like a box, but in our illustration above, the box’s base looks more like a jigsaw puzzle piece. For that sort of shape, it’s better to use a ‘path’. A path is a series of lines and curves which define the outline of a shape, and we define them by moving an imaginary paintbrush around an imaginary canvas. You can read more about them in the Pocket Guide linked above, but here is a quick example path and a description of each command in its ‘d’ (‘data’) string on a 100-square-pixel canvas:

<path d="M10,10 h80 L10,90 v-80 Z" />

“M10,10”: “Move the paintbrush to coordinates (10, 10).”

“h80”: “Drag the paintbrush 80 units horizontally to the right.”

“L10,90”: “Drag the paintbrush in a line to coordinates (10, 90).”

“v-80”: “Drag the paintbrush 80 units vertically up.”

“Z”: “We are done; complete the path.”

Following those steps, our imaginary paintbrush will draw the triangle shown above with points at (10, 10), (90, 10), and (10, 90), where (0, 0) is the top-left of the image and (100, 100) is the bottom-right. It doesn’t look like a paintbrush drew an outline along our path, but that is because the SVG default is to fill shapes with black and not draw any outline. We can set the ‘stroke‘ and ‘fill‘ properties on our tag to change those colors. For example, we can fill the shape with pink and draw a green outline:

<path stroke="green" fill="pink" d="M10,10 h80 L10,90 v-80 Z" />

You can also replace the “green”/”pink” color strings with a custom hexadecimal color using the format, “#RRGGBB”. The laser cutter doesn’t care what color our lines are, but I will be using ‘fill=”none”‘ for these test patterns so that only outlines are drawn. The only other option we might need is, ‘stroke-linejoin=”miter”‘, which ensures that the corners of our paths will be rectangular instead of rounded. You can also change the width of a path with a property like, ‘stroke-width=”0.1″‘.

Setting our Scale

The real-world units used by SVG files are arbitrary until we specifically define a reference scale. But the ‘S’ in ‘SVG’ stands for ‘Scalable’, so that’s an easy thing to do. In the outermost ‘svg’ tag, we can simply define ‘width’, ‘height’, and ‘viewBox’ properties. The ‘width/height’ values define how large the image is, and the ‘viewBox’ value defines our system of coordinates using X/Y/Width/Height. We can use units including pixels (‘px’), inches (‘in’), and millimeters (‘mm’). As an example, here is the same design written as two different SVG files:

In the ‘viewBox’ definition, the first two (X, Y) numbers represent the upper-left corner of the viewport and the second two (W, H) numbers represent its width/height. These two files describe the same image; the units are a bit different, but the triangle always has its points at (50px, 20px), (80px, 80px), and (20px, 80px). In the first file, the coordinates are given in their raw pixel values because the ‘viewBox’ width/height values match the image’s width/height pixel values. In the second file, the coordinates are all based on a ‘unit’ scale, as fractional values between 0 and 1.

A Test Box

So, let’s try cutting out a small test box, to make sure this all actually works. It will consist of a base, four walls, and some ‘wells’ divided by a single horizontal wall and two smaller vertical ones – here’s how it wound up turning out, so you can get an idea of how the outline of each part will fit into the box:

How the test box fits together.

I used some scrap 3mm-thick plywood and randomly chose a 50mm-square box with walls and dividers that are 20mm tall. Why not? Each compartment winds up being a little over 20x20mm on the inside. Using what we’ve learned about writing SVG files so far, (and a calculator) we should be able to create files for all of the necessary parts. A 50mm box with four ‘notches’ per side makes each ‘notch’ one ninth of the total, or roughly 5.55mm long.

So, here is an image of the box’s base, and the contents of its ‘.svg’ file as raw text. The outline is just a single path with a series of horizontal and vertical lines, and several rectangles in a ‘+’ pattern outline the slots which the dividers will fit into:

The ‘g’ tag in that SVG file defines a ‘group’ of objects which will share the ‘g’ tag’s properties. You can read more about that in the Pocket Guide linked earlier. Here, it is only used to give the path and rectangles the same style. Moving on, here are the left/right walls, which are just a single path:

We can open each of those files in a program like Inkscape, which seemed happy with them and can export the .DXF format which seems to be common for laser cutters, as well as .PNG files for people like me who haven’t worked out SVG support on their blog yet. I won’t go into the details on how to use Inkscape, since there are already much better tutorials on the subject, you probably already have your own workflow for SVG files, and ‘File -> Save as…’ usually works fine anyways.

Assembly

So here’s what the laser cuts out:

The basic process I use is to attach the walls first, then fit the dividers in while trying to keep everything level and square. I used ordinary wood glue, which seems to work well if you take some care to keep the dividers at right angles to the base. When assembling a larger box, I did have some of the longer dividers bow upwards a bit, so laying something heavy along their length or clamping them down is probably a good idea while the glue is still drying.

Anyways, waxy masking tape (and/or maybe painter’s tape?) doesn’t seem to stick to wood glue, which makes it very useful for holding parts together while the glue dries:

Masking tapes around the corners hold the box’s shape while it dries.

Masking tape’s waxiness also means that to attach the dividers you can simply layer some tape over the bottom of the box’s base, fill the holes with wood glue, and then insert the dividers into the glue-filled wells. Horsehair brushes work well for cleaning up the glue that seeps out of the holes, and for getting glue up into the box’s vertical gaps.

Once the glue dries, you can remove the masking tape. You might also have to let the newly-exposed faces sit a little longer, to give any glue which was stuck under the tape and not exposed to air time to dry out. But there we go, one hand-written 50x50mm box!

Conclusions

Okay, fine, writing out SVG files is not going to be a good solution for large-scale projects. There don’t seem to be any good options for defining variables or parameters, which makes it difficult to create designs which can be modified later.

But it was a fun exercise and it wound up working reasonably well. Plus, it’s interesting to see how simple the .SVG format can be. I’d like to follow up on this post with a modular script to generate patterns for these sorts of ‘grid’ display/storage boxes, but that might take a little while to get around to.

Also, thanks to Seattle Makers for the laser cutter and expertise! Here’s how the parts box turned out, before attaching an acrylic cover to the hinges – it could have stained better, but at least everything fit and the result is sturdy:

Related posts:

Several years ago, a company called Future Technology Devices International (FTDI) sold what may have been the most popular USB / Serial converter on the market at the time, called the FT232R. But this post is not about the FT232R, because that chip is now known for its sordid history. Year after year, FTDI enjoyed their successful chip’s market position – some would say that they rested too long on their laurels without innovating or reducing prices. Eventually, small microcontrollers advanced to the point where it was possible to program a cheap MCU to identify itself as an FT232R chip and do the same work, so a number of manufacturers with questionable ethics did just that. FTDI took issue with the blatant counterfeiting, but they were unable to resolve their dispute through the legal system to their satisfaction, possibly because most of the counterfeiters were overseas and difficult to definitively trace down. Eventually, they had the bright idea of publishing a driver update which caused the counterfeit chips to stop working when they were plugged into a machine with the newest drivers.

FTDI may have technically been within their rights to do that, but it turned out to be a mistake as far as the market was concerned – as a business case study, this shows why you should not target your customers in retaliation for the actions of a 3rd party. Not many of FTDI’s customers were aware that they had counterfeit chips in their supply lines – many companies don’t even do their own purchasing of individual components – so companies around the world started to get unexpected angry calls from customers whose toy/media device/etc mysteriously stopped working after being plugged into a Windows machine. You might say that this (and the ensuing returns) left a bad taste in their mouths, so while FTDI has since recanted, a large vacuum opened up in the USB / Serial converter market almost overnight.

Okay, that might be a bit of a dramatized and biased take, but I don’t like it when companies abuse their market positions. Chips like the CH340 and CH330 were already entering the low end of the market with ultra-affordable and easy-to-assemble solutions, but I haven’t seen them much outside of Chinese boards, possibly due to a lack of multilingual documentation or availability from Western distributors. So at least in the US, the most popular successor to the FT232R seems to have been Silicon Labs’ CP2102N.

It’s nice to have a cheap-and-cheerful way to put a USB plug which speaks UART onto your microcontroller boards, so in this post, I’ll review how to make a simple USB / UART converter using the CP2102N. The chip comes in 20-, 24-, and 28-pin variants – I’ll use the 24-pin one because it’s smaller than the 28-pin one and the 20-pin one looks like it has some weird corner pads that might be hard to solder. We’ll end up with a simple, small board that you can plug into a USB port to talk UART:

Drivers for the CP2102N are included in most popular OSes these days, including Linux distributions, so it’s mostly plug-and-play.

It’s worth noting that you can buy minimal CP2102N boards from AliExpress or TaoBao for about $1, but where’s the fun in that?

It has been about nine months since ST released their new STM32G0 line of microcontrollers to ordinary people like us, and recently they released some new chips in the same linup. It sounds like ST wants this new line of chips to compete with smaller 8-bit micros such as Microchip’s venerable AVR cores, and for that market, their first round of STM32G071xB chips might be too expensive and/or too difficult to assemble on circuit boards with low dimensional tolerances.

Previously, your best bet for an STM32 to run a low-cost / low-complexity application was probably one of the cheaper STM32F0 or STM32L0 chips, which are offered in 16- and 20-pin TSSOP packages with pins spaced 0.65mm apart. They work great, but they can be difficult to use for rapid prototyping. It’s hard to mill or etch your own circuit board with tight enough tolerances, and it’s not very easy to solder the chips by hand. Plus, the aging STM32F031F6 still costs $0.80 each at quantities of more than 10,000 or so, and that’s pretty expensive for the ultra-cheap microcontroller market.

Pinout and minimal circuit for an STM32G031J6 – you only really need one capacitor if you have a stable 3.3V source.

Enter the STM32G031J6: an STM32 chip which comes in a standard SOIC-8 package with 32KB Flash, 8KB RAM, a 64MHz speed limit, and a $0.60 bulk price tag (closer to $1.20-1.40 each if you’re only buying a few). That all compares favorably to small 8-pin AVR chips, and it looks like they might also use a bit less power at the same clock speeds. Power consumption is a tricky topic because it can vary a lot depending on things like how your application uses the chip’s peripherals or what voltage the chip runs off of. But the STM32G0 series claims to use less than 100uA/MHz, and that is significantly less than the 300uA/MHz indicated in the ATTiny datasheets. Also, these are 32-bit chips, so they have a larger address space and they can process more data per instruction than an 8-bit chip can.

Considering how easy STM32 chips are to work with, it seems like a no-brainer, right? So let’s see how easy it is to get set up with one of these chips and blink an LED.

As someone who likes both electronics and the outdoors, sometimes I get anxiety about a lack of electricity. It would be nice to go camping somewhere away from it all, and still be able to charge things and run some lights, a display, maybe a small cooler. I’m sure some of you are rolling your eyes at that, but I’ve also been wanting to play with adding aftermarket indicators to old cars, like backup sensors or blind spot warnings, and it’d be nice to run them off a separate battery to avoid the possibility of accidentally draining the car’s battery overnight.

Since low-power solar panels are fairly cheap these days, I figured that it might be worth buying a few to mount to my car’s roof. And since my car is technically a pickup, it was very easy to put the battery in the bed and run the wiring through the canopy’s front window:

I’ve secured the battery a bit more since taking these pictures, but this is the basic idea – it’s pretty simple.

If you have a different kind of car, I’d imagine that you could just as easily put the battery in your trunk, but you might need to drill a hole for the wires if you don’t want to leave one of your windows cracked open.

I guess that a lot of this guide won’t apply exactly to your situation, because you’ll have different dimensions to work with, different limitations, and probably different solar panels. But I hope that laying out each step that I took and what worked for me might be helpful – your basic approach could probably look very similar.

And before we go any further, please keep your expectations in check. These panels can only produce up to 100W in direct sunlight, which is nowhere near enough power for something like an electric vehicle. So read on if this sounds interesting, but the car still runs on gas. We’re not saving the world here.