I am rendering a map composed by 600+ SVG elements aligned in a cartesian plane. I need them to be separate elements because I want them to individually respond to mouse events, etc.
My question is: for the purpose of applying a lot of transformations like "translate" (changing their positions) for example, which option is "lighter" to browsers?
Rendering polygons like this hexagon:
<polygon points="43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50"></polygon>
... or creating them as paths like this one:
<path d="M43.301270189221924,55L43.301270189221924,65L51.96152422706631,70L60.6217782649107,65L60.6217782649107,55L51.96152422706631,50Z"></path>