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.

zoom-01.gif

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:

zoom-02.gif

Finally, I can add a button to reset the scale and return to the original one:

zoom-03.gif

The next step is to understand how to manage layers and selections. But I’ll talk about this in the next post.