Wrong viewbox size

[thepasto]

Hello, I recently found this amazing tool to do some experiment, so thanks for your work! I followed your howto to convert SVG file to a Raphael format. I tried to import my home map from a svg, but i got a shifted viewbox image, here's an example.

What am i donig wrong?

Adding this code, i can center my image, but it lost viewport size on zoom cahnges.

afterInit : function(container, paper, areas, plots, options) {
                    paper.setViewBox(-80, -20, 350, 303, false)
                }

Thanks for your help.

[neveldo]

Hello @thepasto ,

I'm glad you appreciate Mapael ! Have you converted the remaining SVG transformations into your paths coordinates through inkscape ? (you shouldn't find any "transform" attribute within your SVG source file)

See :

Go to File > Inkscape Preferences > Transforms. Ensure that “Optimized“ is checked for the “Store transformation” option. It will force Inkscape to translate SVG transforms (such as translations, rotations, …) into coordinates within the paths.

Moreover, did you make the document fit the SVG dimensions ?

The areas in the new document may not fit with the document dimensions. In this case, go to File > Document Properties > Resize page to content, and click on the “Resize page to drawing or selection”.

I hope it whill help you !

[thepasto]

Hi! Thanks for your answer! I already done everything you suggested above, but i investigated a little more, i converted back my map.js file to svg with mapael to SVG tool, and than i resized document page again. Finally i got a perfect SVG! Thanks again for your time and your work!

[neveldo]

You're welcome, I'm glad you solved your issue !

[ChristopherGS]

Hi @neveldo @Indigo744 I have what looks like exactly the same problem. I've been trying for a day to get an svg of London postcodes to render correctly.

I've created a fiddle here: https://jsfiddle.net/quy9bz4q/

You can see the commented JS on line 17 which manually adjusts the viewBox - if you uncomment this line the map displays correctly. Obviously this is no good for different screen sizes and feels like I am fighting the library.

I've carefully read over your instructions on what to do in Inkscape. Here's what I've tried:

• Removing any transform elements from the XML
• Resizing the image in document properties
• I also had a look at ungrouping all the elements, but there are about 300 if you break it down, and I can't seem to do a multiple element select as you describe in the docs (seriously, I think I've tried every possible key combination). If I have to ungroup each one, then copy to a new document, I'm looking at hours of grunt work - there must be a smarter way.

I'm using Inkscape 0.91 on OSX (but also tried on a windows VM)

My SVG is here: https://www.dropbox.com/s/svnxqfm6khronmy/Maproom-London-postcodes.svg?dl=0

I bought this svg and would be happy to the maphael converted js to the existing library of maps if you can help me out.

Many thanks.

[neveldo]

Hello @ChristopherGS ,

Sorry for my late answer ! It seems that there is a remaining viewbox attribute within the SVG, I think the steps below with inkscape should solve your issue :+1:

1 / Edit > XML Editor > click on

Maybe the documention should be improved on this point.

Does it help you ?