Taming the UX monster with SVG: my first encounter with custom SVG connectors and how you can excel it at too!

  • I needed to make an interaction like above where user can select a node on LHS and connect with nodes on RHS.
  • There can be many-to-many relationship between these nodes.
  • User can chose to remove an existing connection.
  • All existing connections have to be plotted when page loads and auto-saved whenever user adds/remove a connection
  • The cherry on top was - filter! User can filter the nodes on LHS or RHS at anytime and the Connections have to show according to currently visible nodes
  • After sweating my fingers for few days and losing some hairs, the final outcome was like this:

Choosing the right weapon

  • CSS3 + HTML + JS: while it may have been possible to make a solution simply using CSS and complex borders/boxes, it would have been very difficult to manipulate the styles using plenty of JS code. And hence I gave up after spending couple of hours.
  • Canvas: this could be an ultimate solution considering the powers of Canvas, but I had little exposure to it. After bit of study I built an opinion that Canvas is ultimate super-set of all interactions HTML has to offer. But it may be an overkill considering my minimal Drawing requirements, while canvas offers vast Painting solutions at cost of verbose API.
  • SVG: They are easy to learn, offers inbuilt api to draw simple lines and even really complex curves. You can create many types of nodes inside an svg element and add/remove them easily based on user events. Has lightweight api and easy on browser performance. This looked like perfect weapon!

Know thy Weapon

  • Its as easy as following to write your first SVG path.
  • You need an SVG element, with various elements like Line, Path, Archs etc inside it.
  • You must know the start and end x, y positions of the path you want to Draw.
  • The api is simple to start with but can really mess up your head after a while! So try to keep it small and manageable.
  • I ended up writing following (crux of) code to support various variables to draw a curved connector path

Useful ammo

  • Element.getBoundingClientRect()
  • Element.offsetTop
  • querySelector
  • appendChild
  • removeChild

Boo!

  • Simple Web APIs like childNode.remove() to self-remove an element from DOM was not supported by our long-term frenemy IE 11
  • As of writing this article in early 2021, its not possible to give Z-index to an SVG element, so if you want to plot an Active or high-priority element on newer element, wait till this gets accepted!
  • Element.offsetParent.getBoundingClientRect(): had to use PARENT container as the Checkbox will always give offsetTop = 0 as its hidden due to custom styles we used to show fancy checkboxes
  • While its possible to use Gradients to fade out a path, the gradient becomes invisible if the delta between Y coordinates is 0! And that needs special instruction as below.
  • Its possible to create really complex or pixel-perfect paths in SVG, but that would lead to some utter complex equations to be solved like below. So i would suggest to simply refrain from it and look for alternate UX rather than building a nightmare for yourself and future devs.

Keep the map handy

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajay

Ajay

Javascript, Angular, Vue. Web App is all what I Do. And sometimes getting bored, i write articles and poems too!