I can find lots of documentation on how to convert KML polygons to SVG objects but nothing to do the reverse. Does such a script exist, or does anyone have any idea of how to write one?
Basically I'd like to take some of the GPL SVG maps from wikimedia mons e.g. this, which make individual shapes for each nation/province (and possibly include other geographical overlays), and convert them into KMLs. I'm guessing that a script provided with the coordinate system of the SVG map and the lat/lon of the origin could make this conversion, but this looks like a non-trivial task so I'm hoping something has already been done.
I found the tools at /, but this can only convert SVG files that were produced by the KML->SVG converter on the same site.
I also thought that I could maybe reverse the jsfiddle example posted on convert kml polygons to svg paths, but I've not been able to get the example working in a local web project (I'm pretty new to both SVG/KML development and Javascript, and am unfamiliar with the workings of the Proj.4 library).
Alternatively, if anyone can think of a better approach to solving the original problem of quickly creating "political map" style KML layers I'm open to suggestions.
I can find lots of documentation on how to convert KML polygons to SVG objects but nothing to do the reverse. Does such a script exist, or does anyone have any idea of how to write one?
Basically I'd like to take some of the GPL SVG maps from wikimedia mons e.g. this, which make individual shapes for each nation/province (and possibly include other geographical overlays), and convert them into KMLs. I'm guessing that a script provided with the coordinate system of the SVG map and the lat/lon of the origin could make this conversion, but this looks like a non-trivial task so I'm hoping something has already been done.
I found the tools at http://kml2svg.free.fr/, but this can only convert SVG files that were produced by the KML->SVG converter on the same site.
I also thought that I could maybe reverse the jsfiddle example posted on convert kml polygons to svg paths, but I've not been able to get the example working in a local web project (I'm pretty new to both SVG/KML development and Javascript, and am unfamiliar with the workings of the Proj.4 library).
Alternatively, if anyone can think of a better approach to solving the original problem of quickly creating "political map" style KML layers I'm open to suggestions.
Share Improve this question edited May 23, 2017 at 12:12 CommunityBot 11 silver badge asked Jan 8, 2013 at 22:08 big-obig-o 4854 silver badges7 bronze badges 2- First sentence: do you mean you find lots of docs on how to convert KML polys to SVG? or is the question title backwards? – LarsH Commented Jan 8, 2013 at 22:15
- Oops - that was a typo in the first sentence: the question title is correct. I've fixed the typo now, thanks for spotting it. – big-o Commented Jan 11, 2013 at 23:34
2 Answers
Reset to default 3Just looking for the same I found your post, so here's another hit from my google list.
For an initial step, you may want to look at this page:
https://github./tbrugz/kmlutils
The purpose of this project is to provide functions for XML-based "visual" file formats. Main Focus is KML, SVG and GraphML file formats.
The main functionality of this project is a tool for converting SVG files into KML files. Currently it (svg2kml) partially converts polygons (tbrugz.geo.SVG2KML)
This project also provides a conversion tool for SVG to GraphML (tbrugz.geo.SVG2GraphML)
Good luck!
I found an easy way to convert SVG paths to SVG polygons in JavaScript. SVG polygons can easily be converted to KML placemarks since both use a list of coordinates. This script can be placed in an HTML file and will directly work off a browser. It will take an SVG file from your puter and save the modified file as a text file. I'd remend using Chrome, since the SVG maintains a fixed size on it, which ensures that the coordinate system remains exactly the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reader</title>
</head>
<body>
<h1>SVG paths to polygons</h1>
<input type="file" id="fileReader" />
<br>
<p id="Content"></p>
<script>
document.getElementById("fileReader").addEventListener('change',function(){
var fr = new FileReader();
fr.onload = function(){;
var d = new DOMParser().parseFromString( this.result.toString(), "image/svg+xml" );
var nodelist = d.querySelectorAll('path');
console.log("Number of paths: " + nodelist.length);
nodelist.forEach(function(path){//This replaces each path with a polygon, keeping the same id.
var polygon = d.createElementNS("http://www.w3/2000/svg", "polygon");
polygon.setAttribute("id", path.getAttribute("id"));
console.log("Converting " + path.getAttribute("id"));
var length = path.getTotalLength();
var p=path.getPointAtLength(0);
var stp=p.x+","+p.y;
for(var i=1; i<length; i++){
p=path.getPointAtLength(i);
stp=stp+" "+p.x+","+p.y;
//This places points along the path at one unit distance apart.
}
polygon.setAttribute("points", stp);
path.replaceWith(polygon);
});
var text1 = new XMLSerializer().serializeToString(d);
document.write(text1);
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Starting file download.
download("output.txt", text1);
}
fr.readAsText(this.files[0]);
})
</script>
</body>
</html>You can then directly take the points attribute and place it in the coordinates tag in a KML placemark. You'll just have to replace the spaces with new lines. While this is not very efficient, it is the simplest way to do the convresion.