Community
Select to view content in your preferred language

Export to SVG with ID attribute

1648
1
08-20-2023 07:03 AM
Labels (1)
Labels
BF_TadejBevk
by
New Contributor II
‎08-20-2023 07:03 AM

Hi,

i'd like to convert an existing SHP file to SVG with included id attributes to identify each polygon (path) in the exported SVG.  However, when exported, only the <g> tag that includes all polygons in the SVG is assigned an id attribute equal to the SHP name. I would need each <path> element to have an id attribute equal to the id of the polygon from shapefile (well, from it's attribute table). 

Step by step replication (version 3.1.2):

Open new project, load a single shapefile, no basemaps. Go to Share, Export Map. Choose SVG under File Type, set location and name, leave Output as image unchecked. Export. Inspect SVG in notepad to see if each <path> element has id assigned. 

What I need to see in SVG file is something like:

 

<svg height="400" width="450">
  <path id="Poly1" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="Poly2" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="Poly3" d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
</svg>

 

what I instead get is something like this:

 

<svg height="400" width="450">
  <g id="ShpName">
    <path d="M 100 350 l 150 -300" stroke="red"
    stroke-width="3" fill="none" />
    <path d="M 250 50 l 150 300" stroke="red"
    stroke-width="3" fill="none" />
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
    fill="none" />
  </g>
</svg>

 

The help page on exporting to svg here mentions "Options specific to vector data, such as Layers and attributes...", but I cannot find these options anywhere.

A workaround might be to create a separate SHP for each polygon in original SHP and export the map - each SHP would then be it's own <g> element. But I would prefer a more elegant solution if anyone has any idea how to acheive this.

Best regards,

T

Tags (2)
1 Reply
JoannaMerson2
by
New Contributor III
‎10-17-2023 01:04 PM

Hi - We'd like to do something very similar. We are using an SVG as a lightweight interactive map. Our processes is to export a layer of point features to and SVG that we can overlay over a basemap image.
For a map with a small number of features our workflow for creating the interactive svg maps is:

  1. Export from ArcGIS Pro to .aix
  2. Open .aix in illustrator
  3. Overlay layer over AI/Photoshop designed basemap and refine placement of data points
  4. Manually rename data points (paths) to include an id attribute that links the data point to the aspatial data set (essentially an attribute table)
  5. Export to SVG in illustrator
  6. Add interactivity using D3.JS
    1. set CSS styling for points
    2. Add hover iterations

For a larger dataset, setting the IDs by hand is rather onerous.  We'd appreciate any other workflows or methods to get the IDs onto the points (paths).

Thanks.

0 Kudos