Tool for Importing SVG graphics (logos etc)

[rhansson]

Fellow Mappers,

I have created a tool for importing an SVG file (with some limitations). It can be used for map marginalia created in programs such as Inkscape and Illustrator.
If interested, please try it out! You can find it here: https://github.com/rhansson/svg2omap
and let me know what you think.

Cheers

Roland

[ghost]

Related issues: #276, #384

SVG2GeoJSON (lossy conversion)

As I see, your svg2omap.py is convertor of SVG to GeoJSON (in the middle).

Another option is to create GeoJSON is to reuse algorithm from SVG2GeoJSON¹, which is forked from Coördinator² (SVG into XY coordinates converter):

1. https://github.com/mapbox/svg-to-geojson
2. https://github.com/spotify/coordinator

• Pros: SVG converted into GeoJSON could be imported directly into Mapper (via built-in GDAL importer).
• Cons: All SVG geometry objects (curves, regtangles, ellipses, circles, text objects) would be converted into , so there is some sort of vector quality loss (as for logos, it might be significant issue).

SVG2DXF (lossy conversion)

Yet another option is convert from SVG to DXF and import DXF into Mapper (via built in GDAL importer).

For SVG2DXF conversion its possible to use Inkscape app or ezdxf lib:

3. https://github.com/Zigazou/svg2dxf
4. https://gist.github.com/vmario89/4b173c0ad4a03d3773ef8dd938c54621

• Pros & Cons: Same as for SVG2GeoJSON case. But, instead of GeoJSON.

SVG2OMAP (lossless conversion)

Few years ago I was digging into SVG and OMAP file formats specification.

As both has some similar point coordinate semantic, it is possible direct copy-paste object coordinates from SVG-file directly into OMAP-file:

• SVG path object:
  <path d="{path_points_coordinates}"/>
• OMAP path object:
  <object type="1" symbol="{symbol_id}"><coords count="{number_of_points}">{path_point_coordinates}</coords></object>

NOTE: Map coordinates (in mm) are used for both SVG and OMAP path point coordinates, but there are little markup difference in its semantic. So, no additional projection conversion would be needed.

I would recommend to investigate this way to create much better SVG2OMAP converter, preserving Bézier curves and (and then convert it to Python extension for Inkscape app).

[rhansson]

Hi, thanks for comments much appreciated.

As I see, your svg2omap.py is convertor of SVG to GeoJSON (in the middle).

Correct and yes I agree that "SVG2GeoJSON" is a more proper name. I chose the name because the tool derives the georeferencing from an "OMAP" file. Without supplying this information, the geojson becomes more or less useless without further transformation. So at this stage, the GeoJSON is not directly usable other than in OOM.

Another option is to create GeoJSON is to reuse algorithm from SVG2GeoJSON¹, which is forked from Coördinator² (SVG into XY coordinates converter):
https://github.com/mapbox/svg-to-geojson

I tried it, but since it doesn't handle projections and conversion of page units, it's hard to directly import existing graphics (another reason is that I prefer python over javascript in this case).

SVG2DXF (lossy conversion)

Haven't tried but again suspect that it won't handle conversion of graphic page dimensions.

SVG2OMAP (lossless conversion)
Few years ago I was digging into SVG and OMAP file formats specification.

This sounds like the ideal option and preserving bezier etc is obviously much preferred. One potential problem is that, from my cursory inspection of various SVG files, there are quite a few different ways to encode SVG elements (compressed etc). However, by limiting/favoring Inscape, as you suggest, this may not be as much of an issue.
Notice that there are several kinds of SVG path objects (Line, QaudraticBezier, CubicBezier, and Arc). So, I would probably still build on best available SVG parser rather than creating my own. I used svgpathtools, which I found to be fairly robust but not perfect (no text support, not handling various compression formats etc).

Q: Is the OMAP file format documented somewhere?

[ghost]

Is the OMAP file format documented somewhere?

There is Mapper API Docs:

• https://www.openorienteering.org/api-docs/mapper/
  • https://github.com/OpenOrienteering/api-docs

Notice that there are several kind of SVG path objects (Line, QaudraticBezier, CubicBezier, and Arc). So, I would probably still build on best available SVG parser rather than creating my own.

SVG logos in many cases includes features (groups, path effects, gradients, overlaped same size paths, etc.) which might not be handled via CLI-tools without bricking such logo look.

Here are few examples of SVG logos, which has a lot of issues:

• https://commons.wikimedia.org/wiki/File:GDALLogoColor.svg ("ellipse")
• https://commons.wikimedia.org/wiki/File:QGIS_logo,_2017.svg (transparent overlapping "rectangle", "gradient fills")
• https://commons.wikimedia.org/wiki/File:SVG_logo.svg ("clones", "groups", "paths" with and without "stroke")

So, I suppose two workflows:

1. Use Inkscape to manually cleanup and optimize SVG logo to include only paths with geometry limited to Bézier curves. For lossless converting resulted SVG to OMAP new SVG2OMAP (as I described) should be created.
2. Use Scribus app to edit PDF (exported from Mapper) and insert SVG logos, text labels & other elements.

Even 1st workflow could be implemented somehow, it still would be very limited, including next limitations:

• there would be no "gradient fill" support, because Mapper support only flat colors;
• there would be no way to correctly represent colors which formed inside SVG formed by the stack elements with transparency, because there is no color transparency support in Mapper.

Until native support for SVG import would be added for Mapper, I'm in favor of 2nd workflow to produce high quality orienteering maps:

• Draw only orienteering map in Mapper and export as PDF ("Vector graphics > Device CMYK").
  • Create/Edit logos & other vector graphic elements using Inkscape app and save as SVG files.
    • Edit PDF file with Scribus app to design final map layout by importing SVG files, adding text labels, tables, etc.
      • Replace RGB colors in imported SVG graphics with CMYK colors bundled with PDF or with creating new CMYK colors (corresponding to logo branding colors).
        • Export edited PDF for printing.

In nearest feature Scribus could be totally replaced with Inkscape, as CMYK support for PDF import & export would be added in Inkscape app soon:

• https://www.youtube.com/watch?v=b6yRNgPem7E

[rhansson]

I don't disagree. In the meantime, my tool is a possible workaround for users who prefer to finish their maps in OOM.

[ghost]

JFTR, There is some "Export GeoJSON" extension for Inkscape:

• https://github.com/mtirado1/inkscape-geojson-export

But I can't get it to work with Inkscape 1.2.2.

[ghost]

Inkscape2GeoJSON

UPDATE: Here is an updated "Export GeoJSON" extension modified by @doctormo for Inkscape 1.2.2 on my request:

• ZIP: export-geojson-doctormo-0.5.zip (note that it is a fork of https://github.com/mtirado1/inkscape-geojson-export, but original author )

Extension can export some sort of GeoJSON file, but it has many issues (with object types, coordinates conversion, etc.), and resulted *.geojson not valid (including some markups mistakes), so Mapper can't recognize it.

Here is GeoJSON basic specification:

• https://doc.arcgis.com/en/arcgis-online/reference/geojson.htm

... GeoJSON file must begin with the mandatory type parameter set to FeatureCollection as follows:

"type": "FeatureCollection"

Not valid *.geojson file exported with this "Export GeoJSON" Inkscape extension:

{"Layer 1": [{"type": "Polygon", "properties": {"name": null}, "coordinates": [[[-18.0, 17.711], [18.0, 17.711], [18.0, -17.711], [-18.0, -17.711], [-18.0, 17.711]]]}, {"type": "Point", "properties": {"name": null, "type": null}, "coordinates": [0.0, 0.0]}, {"type": "Polygon", "properties": {"name": null}, "coordinates": [[[-18.0, -17.711], [18.0, 17.711]]]}]}

Valid GeoJSON output in compact format (manually modified *.geojson) is here:

{"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [0.0, 0.0]}, "properties": {"SVGname": "path1", "SVGtype": "circle"}}, { "type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-18.0, -17.711], [18.0, 17.711]]}, "properties": {"SVGname": "path2"}}, {"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[-18.0, 17.711], [-18.0, -17.711], [18.0, -17.711],[18.0, 17.711], [-18.0, 17.711]]]}, "properties": {"SVGname": "rect1"}}]}

Valid GeoJSON output in complete formatted form should look like this:

{ "type": "FeatureCollection",
	"features": [
		{ "type": "Feature",
      "geometry": {
		"type": "Point",
		"coordinates": [0.0, 0.0]
		},
      "properties": {
		"SVGname": "path1",
		"SVGtype": "circle"
		}
      },
    { "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-18.0, -17.711], [18.0, 17.711]
          ]
        },
      "properties": {
        "SVGname": "path2"
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",
         "coordinates": [
           [ [-18.0, 17.711], [-18.0, -17.711], [18.0, -17.711],
             [18.0, 17.711], [-18.0, 17.711] ]
           ]
       },
       "properties": {
         "SVGname": "rect1"
         }
       }
     ]
    }

Inkscape2OMAP

For those who would like to try create "Export OMAP" extension for Inkscape app, here are OMAP file specification, SVG paths specification, Inkscape extensions dev docs:

1. XML format documentation #182 (comment)
   1.1. https://www.openorienteering.org/api-docs/mapper/classOpenOrienteering_1_1XMLFileFormat.html
2. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
3. https://inkscape.gitlab.io/extensions/documentation/authors/index.html
   3.1. https://inkscape.gitlab.io/extensions/documentation/authors/units.html
   3.1.1. https://twitter.com/DanHollick/status/1542176615139921921

And here are few extension which might be useful to get curves coordinates in a form of XY coordinates on paper (as "Map coordinates" in Mapper):

• https://github.com/Simarilius-uk/Inkscape_Exportxy
• https://github.com/camrbuss/nodes_to_csv
• https://github.com/aesuli/toXY