Home Basics Using a custom SVG file

Using a custom SVG file

When you create a new map from a SVG file, MapSVG parses the file and tries to find SVG shapes that should be interactive. Those objects get into the list of Regions in MapSVG.

SVG file requirements

SVG objects that match ALL of the following rules get into the list of Regions:

Type of the object is: path / rect / polygon / ellipse / circle
Object has an ID. Example, SVG object without ID:
```
<path d="..." />
```
SVG object with ID:
```
<path id="area-51" d="..." />
```
If you're creating a custom SVG file in Adobe Illustrator: you can't set IDs for individual SVG objects there. AI converts layer names to IDs but layer may contain multiple SVG object. ID will be given to a <g id="layer-name">...</g> SVG tag and individual SVG objects inside of it will be left without IDs. So it is recommended to use Inkscape (free SVG editing software) for SVG editing (at least for final SVG editing after AI). How to set an Object ID in Inkscape: open your SVG file, right-click on a vector shape, choose "Object properties", enter ID, click "Set". Also you can set IDs right in MapSVG by clicking on "Edit SVG file" button in the top toolbar.
Object has a color fill. If you create a custom SVG file and you need to have Regions that are transparent, don't use empty or none color fill values, use rgba(0,0,0,0) as a trasparent color.
If Region ID prefix is provided in MapSVG settings, SVG Object ID must start with the prefix. In more detail: when you use a custom SVG file, sometimes there are too many small graphical details that have IDs - so they will get into the list of Regions, and you don't want all of them to get there. In that case you can add a prefix to IDs of SVG object that you want to become Regions in MapSVG. Example. In MapSVG settings you did set up Region ID prefix = "lot_". Then, the following objects will get into the list of Regions:
```
<path id="lot_number_12" d="..." />
<rect id="lot_number_3" x="..." y="..." />
```
These objects will be skipped:
```
<path id="path_231" d="..." />
<circle id="circle_89" x="..." y="..." />
```

Calibrating your SVG file

If you want to calibrate your SVG file, open it in any text editor and add the following lines to the root <svg> tag:

<svg 
  xmlns:mapsvg="https://mapsvg.com"
  mapsvg:geoViewBox="1.409450 42.654907 1.786860 42.426982"
  ...
 >

Numbers in the "mapsvg:geoViewBox" attribute are lat/lng coordinates of map borders in the following order: left-lng top-lat right-lng bottom-lat

Uploading the file and creating a new map

Click on "Upload SVG file" on MapSVG start screen and choose your file. Please note that uploading a large file may take a long time. When uploading finishes, you'll see a green message "File uploaded". Now you can click on the "New SVG file" drop-down, enter your file name in the search box (or enter "user-uploads/" to see all uploaded files) and choose your file from the list to create a new map.