TL;DR

When editing SVG > Illustrator > SVG, the original element classes are lost. How can I edit an svg file visually in a safe way?

A brief background. I was fascinated by the idea of a kind of GIS in miniature, based on a single svg-file. This is an interactive heat map of my hometown with color-coded architectural value of buildings and some visual effects not available in the Google Maps API. So, I have already managed to: convert the street map in the Mercator projection from OpenStreetMap to SVG with geo-referenced coordinates; link building polygons with addresses, number of floors and year of construction; achieve an acceptable scaling and scrolling performance (thanks to D3.js).

How I imagined working with SVG. Two sometimes alternating tasks:

1. Visual geometry correction in Adobe Illustrator: correcting topographical errors, converting polygons into compound shapes (buildings with courtyards), etc.
2. Work on data visualization using JavaScript and CSS in Chrome console. Adding multiple classes or data attributes to polygons, which are responsible for visual representation. Using different selectors and rules in the style sheet, I can, for example, create a glow around the polygon of a certain size, brightness and hue, according to the architectural style, height and time period in which the building was built: <polygon class="bld bld-type-public bld-age-soviet bld-style-constructivism" data-storeys="4" data-year="1927" id="b5270" points="2427,788 2435,786 2436,790 2433,791 2428,792"></polygon>

The process is long and iterative. A vector image requires periodic edits, in parallel with DOM manipulation based on the collected data.

Facing reality. Adobe Illustrator, as a powerful tool for editing complex vector images, converts the DOM of an SVG file into its own object model. But it doesn't do it completely. In my approach, some of the data is permanently lost after editing in Illustrator.

What to do?

All experiments were done on Adobe Illustrator CC 2019. The newest update cannot be installed on my macOS Mojave. I don't think anything has been updated in the SVG engine (or am I wrong?)

• Are there any ways of setting up a vector editor for this kind of project?
• Are there (suddenly) any secret ways to extend Chrome DevTools functionality for visual SVG editing in the browser?

Of course, there is always the option of postprocessing after each edit in Illustrator. Using ID I can restore the list of classes and/or attributes from an external data array (JSON). But I really don't want to complicate the process, which already seems a bit odd.

Minimum test SVG code:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 200" xml:space="preserve">
    <style type="text/css">
        .test {fill:red;}
        .test.blue {fill:blue;}
    </style>
    <g>
        <rect id="item1" data-test="1" x="190" y="20" class="test" width="120" height="120"/>
        <rect id="item2" data-test="1" x="322" y="20" class="test blue" width="120" height="120"/>
    </g>
</svg>

Here is the result of saving in Illustrator (merging/renaming classes, removing attributes):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 640 200" style="enable-background:new 0 0 640 200;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FF0000;}
    .st1{fill:#0000FF;}
</style>
<g>
    <rect id="item1" x="190" y="20" class="st0" width="120" height="120"/>
    <rect id="item2" x="322" y="20" class="st1" width="120" height="120"/>
</g>
</svg>

Grateful to the SO community for any help and tips!