One of the benefits of SVG files is the ability to edit them with JavaScript in an HTML page. To simplify the process I create a small app with Svelte where you can load an SVG file, edit it and then save it back to disk.
Open an SVG file
First I create a button to select the file to upload and an html element to show the file
After selecting the file I get something like this:
How to scale and move SVG maps
For some maps, an overall view is enough but in this case I am interested in being able to zoom in on some elements. And, of course, also being able to move around the map.
To do this I can use the repository luncheon/svg-pan-zoom-container. I install the package using:
npm i svg-pan-zoom-container
So I change my code:
The data-zoom-on-wheel attribute enables zoom with the mouse wheel. Set as minimum scale 0.3 and maximum scale 20. The data-pan-on-drag attribute enables mouse movement. In this case I set that the movement is done using the combination control key plus left mouse button.
In addition to the mouse wheel it is also useful to have a button or something similar to manage the zoom. I can, for example, create an input element of type range, by binding its value to the scale variable.
To pass the scale from the map to the element I add MutationObserver:
Then I add a new event to the input [range] element in order to dynamically change the zoom:
The result looks like this:
Finally, I can add a button to reset the scale and return to the original one:
The next step is to understand how to manage layers and selections. But I’ll talk about this in the next post.
