Prototype SVG Maker

Ever since I wrote my Masters thesis on the visualisation of software interfaces (APIs), I've been toying with the idea of grid based diagramming. That is, you're free to draw as you like but your content must adhere to a pre-defined grid. I'm experimenting to see if it's possible to strike a balance between freeform and highly constrained design tooling. Put abstractly, to explore the trade-off between design precision and design speed while minimising over design.

I noticed diagramming and design tools tend toward freeform in how one draws. There's a tendency for diagrammers and designers to avoid highly constrained tooling even though it aids in avoiding time wasted on meticulous but valueless details. Like other artisans, I suspect they have an itch for excessive orderliness and attention detail that goes way beyond what is fruitful. People seldom considder the costs of over design.

Pixel perfection is an illusion which cannot exist due to the diversity of device sizes, resolutions, and user display preferences. The exploration of grid based drawing tools is an attempt to satisfy the orderliness while enabling fast and effective design; striking a good balance between the freeform and the constrained.

Below is simple prototype for an SVG icon maker based on the grid concept. You can only draw and style simple lines but it suffices for demonstration. Lines are drawn connected one after the other but you can disconnect from the previously clicked point by right clicking. I've even included a download button so you can pop your new icon on your fridge's digital display if you're rich enough.

Hopefully you can imagine redefining the grid to something suitable for the task at hand. An 8x8 pixel grid on a much bigger canvas would probably be ideal for UI design. Throw in of other shapes that you may need such as points, arcs, and polygons as well as many of the other modern features such as fill, layers, components, etc and you're good to go.

If time can be carved out from my other projects I may create prototype desktop drawing tool complete with all the simple bells and whistles. This example uses a reactive SVG but I'd need to port the concept over to a HTML canvas and craft a nicer UI before adding more features.