I’ve used SVGs many times in the past but I’ve never been tasked to build dynamic drawings with them…until now. Unfortunately, I can’t share an actual picture of the project because it could identify a client that has asked to stay anonymous, so you’ll have to use your imagination.
I was given the task to create a dynamic drawing (like a spec sheet) for a work order used to build a product. I’m given a width, height, columns, rows, accessories heights, and shape and I draw what is going to be built. I also added measurements to the drawing.
Early in the project I had to decide between HTML5 canvas and SVG. I went with SVG and I’m sure glad I did. SVG has been around for a while and has been supported by browsers for just about as long. This longevity proved crucial to the project because I needed to move quickly to show progress.
I had to learn how to draw different shapes with SVG and Illustrator did the job. I had to get parts of the shapes to repeat and Angular was like magic. Then, as a nice finishing touch, I added zooming and panning using svg-pan-zoom using an Angular plugin (that I had to modify because it was a bit out-of-date).
In the end, the client said it looked “awesome!” I love to hear that.
