svg image - zoom and borders.

Question

I have the following small svg file hosted at: http://dl.dropbox.com/u/7393/hmap.svg and I am trying to make it look like this: http://dl.dropbox.com/u/7393/final.png

The docs where I got this from mentions that this change can be easily obtained by changing a couple of tags on the svg file. However I have tried changing everything and I still can't 1) Zoom, 2) Crop, 3) Make the borders white.

Does any one here have familiarity with svg (xml) image file format to point me in the right direction here?

Thanks.

Answer 1

To zoom change the viewbox setting. The file uses one on the first and only svg tag at the top of the file. The viewbox you are using is for the full image viewBox="0 -500 2752.766 2537.631" and you are placing it into a box with height="476.7276" width="634.26801" pixels. So a line 1 unit wide would be about 1/5 of a pixel.

to zoom in on say Europe change it to ... viewBox="1000 -500 1000 1000" ... this basically says start at unit 1000 from the left and -500 units from the top and crop at 1000 units to the right and 1000 units down.

The white lines are stroke-width:0.99986893; units. to make them a whole pixel you would need to zoom in closer. viewBox="1200 -5 450 450"

You are using both style at the top of the document and inline styles, the inline styles overwrite any other styles.

<g class="land fr" id="fr" transform="matrix(1.229834,0,0,1.1888568,-278.10861,-149.0924)" style="fill-opacity:1;stroke:#ffffff;stroke-width:10;stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1;fill:#00ff00">

A stroke width of about 10 should work for the full sized being displayed in a 640 x 480 (the width and height set in the first and only svg tag) screen - but to do this it needs to be done on every element <path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357 2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 2218.0062,810.62352" id="path2404" style="fill-opacity:1;stroke:#ffffff;stroke-width:0.99986994;stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1;fill:#6BAED6" /> or the style needs to be removed from the elements to use the parent style. <path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357 2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 2218.0062,810.62352" id="path2404" />