Import the SVG paths into JOSM to create a geocoded file format as follows:
- Install Java
- Download JOSM (Java OpenStreetMap Editor)
- Run JOSM:
java -jar josm-latest.jar
- Click Edit > Preferences
- Click Plugins icon (socket and plug)
- Click Available
- Search for
importvec
- Check importvec
- Click Download
- Click OK
- Click Restart when prompted
- Click File > New Layer
- Click File > Open
- Browse to and select the SVG file
- Set the Scale units to:
620,000
metres (found by trial and error)
- Set the Curve steps to:
24
- Click OK to confirm import of vector graphics
- Zoom out (press
-
several times)
The vector is imported:

Export the JOSM layer to a GeoJSON file as follows:
- Click File > Save As
- Set Files of Type to:
GeoJSON Files
- Set the File Name to:
cracks.geojson
The file is exported. Next, create a web page such as:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tellus Collision Cracks</title>
<meta charset="utf-8"/>
<script crossorigin="anonymous" src="d3.v5.min.js"></script>
<script crossorigin="anonymous" src="d3-geo.v1.min.js"></script>
<script crossorigin="anonymous" src="versor.js"></script>
<style>
.cracks {
fill: none;
stroke: red;
stroke-width: 1px;
}
.graticule {
fill: none;
stroke: blue;
stroke-width: 1px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var w = 750,
h = 750,
scale = h / 4,
lastX = 0,
lastY = 0;
var origin = { x: 0, y: 0 };
var projection = d3.geoOrthographic()
.scale(scale)
.translate([w/2, h/2])
.rotate([origin.x, origin.y])
.center([0, 0]);
var geoPath = d3.geoPath().projection( projection );
var svg = d3
.select( '#container' )
.append( 'svg' )
.attr( 'width', w )
.attr( 'height', h );
svg.call( d3.drag()
.on( "start", dragstart )
.on( "drag", dragging )
);
d3.json('cracks.geojson').then( function( lines ) {
svg.append( "path" )
.datum( lines )
.attr( "class", "cracks" )
.attr( "d", geoPath );
});
var v0, r0, q0;
function dragstart() {
v0 = versor.cartesian(projection.invert(d3.mouse(this)));
r0 = projection.rotate();
q0 = versor(r0);
}
function dragging() {
var v1 = versor.cartesian(projection.rotate(r0).invert(d3.mouse(this))),
q1 = versor.multiply(q0, versor.delta(v0, v1)),
r1 = versor.rotation(q1);
projection.rotate(r1);
svg.selectAll(".cracks").attr("d", geoPath);
};
</script>
</body>
</html>
Browse to the web page (e.g., http://localhost/d3/index.html
).
The browser shows:

The data is loaded into D3 and the lines are curved. Extract the data as follows:
- Right-click on the sphere.
- Select Inspect Element (or equivalent for your browser).
- Right-click on the
div
container.
- Select Copy > Inner HTML.
- Open a new file.
- Paste the HTML.
- Save the file as
cracks-curved.svg
.
Open cracks-curved.svg in Inkscape, which reveals two objects, both black:

- Select the large black outer circle.
- Delete the circle to reveal the curved paths.
- Press Ctrl+Shift+F to bring up the fill panel.
- Remove the Fill settings.
- Click the Stroke paint tab.
- Set the fill colour to black.
The curved lines are shown:
