Moscow metro map. SVG version
I continue the theme of developing a dynamic vector (by coordinates) map for the dbcartajs browser. In the new version (v2) I translated the drawing of objects from canvas to SVG. And redid several examples, in particular the map of the Moscow metro. In my post about the canvas version of the map, I compared it with the svg version from Wikipedia, focusing on the download speed, which was higher for the canvas. But by reproducing the card through the svg processor in the new version of the project, I realized that the download speed is probably the only advantage of the canvas over SVG.
First, it took less code to create on svg.
Secondly, the simplicity and ease of creating code. In svg, logic is built on individual objects, their properties and methods. For example, to define an object under the cursor, you need to create an event handler for this object (circle for metro stations), in which you can change its properties - color, scale (the scale method is used in the icon for the Khodynskoye field station), etc. Canvas drawing logic is based on the redrawing of the entire map. And to select individual objects, you need to redraw and scale the entire map. In addition, the canvas does not store the drawn objects in memory, they must be separately stored in variables (in dbcartajs in the mflood object) and you should monitor them yourself (add, delete). The SVG image stores the drawn objects in the DOM model and can be accessed directly.
')
Thirdly, there are much more opportunities in svg than in canvas, for example, animation, filters for images.
Fourth, browser compatibility. In SVG, it is higher. I haven't noticed any problems with SVG. In the canvas, some properties in Firefox 3.x and newer versions work differently (for example, setDashLine, isPointInPath). Internet Explorer up to version 9 and Safari up to version 4 did not support canvas at all.
Both svg and canvas can manipulate finished images (png, jpeg). True, only the canvas can refer to it pixel-by-pixel. And this, like the speed of rendering, is perhaps its main feature.
In general, who are interested, see the examples on egaxegax.imtqy.com .
First, it took less code to create on svg.
Secondly, the simplicity and ease of creating code. In svg, logic is built on individual objects, their properties and methods. For example, to define an object under the cursor, you need to create an event handler for this object (circle for metro stations), in which you can change its properties - color, scale (the scale method is used in the icon for the Khodynskoye field station), etc. Canvas drawing logic is based on the redrawing of the entire map. And to select individual objects, you need to redraw and scale the entire map. In addition, the canvas does not store the drawn objects in memory, they must be separately stored in variables (in dbcartajs in the mflood object) and you should monitor them yourself (add, delete). The SVG image stores the drawn objects in the DOM model and can be accessed directly.
')
Thirdly, there are much more opportunities in svg than in canvas, for example, animation, filters for images.
Fourth, browser compatibility. In SVG, it is higher. I haven't noticed any problems with SVG. In the canvas, some properties in Firefox 3.x and newer versions work differently (for example, setDashLine, isPointInPath). Internet Explorer up to version 9 and Safari up to version 4 did not support canvas at all.
Both svg and canvas can manipulate finished images (png, jpeg). True, only the canvas can refer to it pixel-by-pixel. And this, like the speed of rendering, is perhaps its main feature.
In general, who are interested, see the examples on egaxegax.imtqy.com .
Source: https://habr.com/ru/post/268199/
All Articles