Dynamic SVGs using Angular

2/4/16

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.

 

Team on this Project

See All Team

About The Author

Ben currently works as a senior developer and technical business consultant outside of Boulder, Colorado.

Read more about Ben

About Buink

Buink Web Development is a development shop founded in 2009 by Ben Buie. For years, Ben built and modified web assets for clients in Utah. In 2011, he moved the company to Colorado and in 2015 he started taking on new clients full-time.

Buink’s Core Values:

  • Cost effective technology (with business strategy in mind)
  • Eloquent, maintainable code
  • Responsive and transparent communication

Read more about Buink

Dru M.
Dru M.
15:41 25 Mar 21
Ben’s a super responsive, thoughtful, sharp and all around great guy to work with. Excellent with his trade. I’d recommend him to anyone. Thanks Ben!
Seth L.
Seth L.
21:36 29 Jun 19
Ben and team are incredible to work with. They are reliable and proficient. I'd highly recommend hiring them for web development work. SethVOLTAGE
Craig A.
Craig A.
20:50 18 Jun 19
It was a pleasure to work with Ben and his team. It is rare to find such attention to high standards of coding and devops.
Lexi S.
Lexi S.
15:36 18 Jun 19
Grateful to have Ben and his team as such a capable, reliable partner for completing client work!
Tom S.
Tom S.
13:18 14 Jun 19
I reached out to Buink after finding Ben’s name in a local developer/consultant listing in 2017, and I have to say, it has been an absolute pleasure to work with Buink. Ben consistently understands not just the development task laid in front of him but the business application behind the task. I’ve... never felt more comfortable with a development team than I do with Buink. I truly feel Ben and his team are integral partners in the success of my business.read more
Marilyn F.
Marilyn F.
22:47 13 May 19
I could not recommend Buink Web Development more highly. Ben and his team have recently developed a budgeting app for me (both web and IOS). I have had the opportunity of working with them for over a year and I am extremely happy with the results.I would say that the biggest plus for me is that I... trust Ben completely. From the very first, Ben has helped me make decisions that were in the best interest of my company. I have never felt like he is taking advantage of me. Ben does his best to keep the whole process very open and upfront. I have really appreciated that.I tell people all the time that I love my developers. And I do. I'm very happy that I chose to use Buink to develop my apps. It was the best business decision I could have made.If you are looking for someone to develop a website or app, I strongly suggest choosing Buink Web Development. They are fantastic!Marilyn Ference, President, Defend Your Money, LLCread more
James Landon B.
James Landon B.
01:33 28 Aug 18
Great company to help with all your web design needs!
Next Reviews
js_loader

Connect with Buink

Connect with Buink via email, send us a message, or subscribe to our blog.