Learning Center
Contact Us
Connect with us on Facebook Follow MapsAlive on Twitter MapsAlive on LinkedIn
Create Interactive Map Solutions with MapsAlive

Use Scalable Vector Graphics (SVG) for your map images

Use Scalable Vector Graphics images for interactive mapsScalable Vector Graphics, or SVG, is a format for images that can be zoomed or resized without losing any quality. MapsAlive lets you use either an SVG image or a bitmap image like JPG for your map. Which format is best for you depends on the nature of the map, its size, and whether or not you want it to be zoomable. Note that SVG is supported by PC and Mac browsers. You must still supply a JPG image for use on mobile browsers.


In order to use an SVG image with MapsAlive, it must first have been saved as a SWF (Flash) file. Popular illustration programs like Adobe Illustrator and CorelDRAW let you export your drawings as SWF files. Some programs like SmartDraw let you save your drawings so that you can open them in Adobe Illustrator format and then export them from there as SWF files. Once you have your map in a SWF file, you can simply upload it to MapsAlive the same way you would a JPG file.

When to use SVG

SVG works best when the map has a lot of fine lines or text, is very large, and you want to be able to zoom in and out to see more or less detail. When zooming out, fine lines and text in a JPG tend to get "the jaggies" (parts of the lines or text drop out or show a stair step effect). The same map in SVG always looks its best at any size. To determine which format to use, try both and see which works best.

When not to use SVG

SVG might not be a good choice if your map has a tremendous amount of detail and the SWF file size is very large. Why? Because your browser has to draw every graphic and text element when the map loads and while zooming. If your SVG map loads and zooms too slowly, consider removing some detail from the original illustration to simplify the image.
See the Difference — Click the menu items SVG MapZoom and JPG MapZoom to compare how the same map looks when you zoom it as SVG versus JPG. Both images look clear and sharp when you zoom in (click the +), but when zoomed out all the way (click the -), parts of the JPG image drop out (notice the text, doorways, and pool).

Click JPG without MapZoom to see what the JPG image looks like without MapZoom. Why does it look better? Because JPG images scale down very nicely to a fixed size, but not as well when they are zoomable.
Mini FAQ
How do I change my map image (upload a new map)?
How do I make my map zoomable?
Related Links
Feature    Sample
Museum Routes Sample
MapsAlive Plans & Pricing