Neatline Feature Preview: Importing SVG documents from Adobe Illustrator

;tldr - The new version of Neatline makes it possible to take SVG documents created in vector editing software like Adobe Illustrator and Inkscape and “drag” them directly onto the map, just like a regular polygon. This makes it possible to create really sophisticated illustrations that go far beyond the blocky, “sharp-edge” style that we usually associate with digital maps. Check out the screencast (and scroll down for screenshots):

The first version of Neatline implemented a pretty standard set of GIS controls for sketching vector geometry onto maps - points, lines, and polygons. It was easy to sketch out simple shapes, but more difficult to create really intricate, complex illustrations.

Really, this is a sort of ubiquitous problem with digital maps, which tend to be good at representing points, but bad at representing curves. Under the hood, shapes on digital maps are represented by a series of X/Y coordinate pairs, wrapped up into different geometry types that store information about how the points should be displayed. For example, in Well-Known Text - the serialization format used by databases like PostGIS and MySQL - a line is represented by LINESTRING(1 2,3 4,5 6), a polygon by POLYGON((1 2,3 4,5 6,1 2)), and so on and so forth. At the end of the day, everything is just a series of hard-coded points, strung together to form shapes.

This low-level organization in the data tends to bubble up to the level of user interfaces in the form of map sketching tools that make it easy to draw jagged shapes but hard to draw smooth shapes. For example, in the first version of Neatline, drawing this is easy:

But this is much harder:

It’s still possible, but it’s time-consuming and brittle - if you change your mind later and want to adjust the curvature of the arrow, you have to manually reposition dozens of points. This especially frustrating since, in other domains, this is a well-understood problem with lots of high-quality solutions: Vector graphics editors like Adobe Illustrator, Inkscape, and even in-browser tools like svg-edit make it easy to create smooth, complex vector-based geometries that can be serialized to a portable XML format called SVG (Scalable Vector Graphics).

In the upcoming release of Neatline, we’ve made it possible to take SVG markup created in any vector editing tool and place it directly onto the map. Just save off any vector graphic as a SVG document, open up the file in a text editor, and paste the raw markup into the Neatline editor. Then just drag out the shape to any position, dimension, and orientation on the map. Once the new geometry is in place, it behaves just like regular points and polygons added with the default controls - it can be styled and edited just like anything else on the map.

This also opens up a whole new front of high-fidelity text-based annotation on digital maps. Since vector editors can convert strings of text into SVG paths, this makes it possible to sketch out labels, snippets, or even little paragraphs of content directly onto the map itself.