I am looking for a bit of wisdom from someone with a bit of experience working with SVGs. I am attempting to create a drag and drop widget using SVGs in HTML similar to Tetris (except you can move the blocks any which way). As of now, I have a canvas with a bunch of SVG’s for each block:
- SVG A
- SVG B
- SVG C
- SVG D
Each SVG has its own event listeners so I can drag each block but I soon want to add grid-snapping and prevent overlapping. What would be the best way to structure my code? Should I re-structure my code to be one big SVG instead of a canvas and have each block be an element of the SVG? What would be the pros and cons of each direction?