title: Horizontal ordered bin packing of svg elements
body: <p>Trying to figure out the best way of bin packing/ distributing a bunch of known width svg images in a horizontal row, where they can be stacked on top of each other if the width of the container is too tight.</p>
  
  <p>Height of container should optimally be self-adjusted, and the gravity should be the vertical center point. Created a few images to illustrate the desired solution.</p>
  
  <p>Are there any JS library out there that solves this problem, d3 perhaps? It feels like a bin packing problem, but perhaps with some added complexity for order and gravity. Not interested in canvas solutions.</p>
  
  <p><em>If container is wide enough</em></p>
  
  <p><img src="https://i.stack.imgur.com/IQpvX.jpg" /></p>
  
  <p><em>Too tight, stack some elements</em></p>
  
  <p><img src="https://i.stack.imgur.com/SFisj.jpg" width="450" /></p>
  
  <p><em>Even tighter, stack all</em></p>
  
  <p><img src="https://i.stack.imgur.com/bVQZg.jpg" width="220" /></p>