This is probably going to annoy the more experienced map people here, but I'm sort of new to all this, or at least I don't have a lot of experience. I know this is a bit strange and not ideal, but I have a huge SVG file of geographical shapes and regions. I want to be able to plot points and draw shapes in Openlayers. The problem is that, of course, this file is over 50 MB, so I can't exactly expect users to load the whole thing then navigate around.
I have a less detailed map for when users are zoomed out, so I'd like to use this map as they zoom in, but then tiling would of course be best. I don't need much detail beyond what I have so using just these two maps as starting points is fine. Like I said, I was planning on using OpenLayers since I've used it in the past but I'm not tied to it. How is the best way for me to proceed?

2 Answers 2


An option you could take is with Adobe Illustrator + MAPublisher. MAPublisher is an extension to Adobe Illustrator that geographically enables your content.

1) You could open your SVG in Adobe Illustrator + MAPublisher and make any needed rectification

2) Utilize MAPublisher's "Export Document To Web Tiles" function to tile your SVG out of Illustrator.

If you don't have the software and want to test the workflow, both Illustrator and MAPublisher offer full trial versions which I have effectively used for this very purpose.

in This link (http://download.avenza.com/Downloads/Docs/MAPublisher/MP93_UserGuide.pdf), see pg 248 for documentation on "Export Document To Web Tiles"


You can draw your .svg using OpenLayers by inserting this in a html page:

  <script type="text/javascript">
var map, svg, bounds;
    window.onload = function init()
bounds = new OpenLayers.Bounds(-600, -860, 600, 860);
    map = new OpenLayers.Map ("mapContainer", 
    projection: new OpenLayers.Projection("EPSG:4326"),
    restrictedExtent: bounds
    svg = new OpenLayers.Layer.Image(
        new OpenLayers.Size(600,860),
        {isBaseLayer: true}
map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.Scale());

This code will draw the .svg for an 600 by 800 pixel size html div called mapContainer. You can play with the OpenLayers.Bounds and OpenLayers.Size to deal with any size of a .svg.


  • This is doing exactly what Munzilla said he wanted to avoid ("...I can't exactly expect users to load the whole thing..."). He has a valid concern of not expecting users to wait for a 50MB SVG file to download to the browser, or even load within the browser since the file is so large. gzip is a tremendous help in transferring the file from the server to the browser, but the browser still has to decompress and render the large SVG file, and that is painful even on very fast computers.
    – Matt
    Nov 22, 2013 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.