Al editar SVG > Illustrator > SVG , las clases de elementos originales se pierden. ¿Cómo puedo editar un archivo svg visualmente de forma segura?
Un breve trasfondo. Me fascinó la idea de una especie de GIS en miniatura, basado en un solo archivo svg. Este es un mapa de calor interactivo de mi ciudad natal con el valor arquitectónico de los edificios codificado por colores y algunos efectos visuales que no están disponibles en la API de Google Maps. Entonces, ya he logrado: convertir el mapa de calles en la proyección de Mercator de OpenStreetMap a SVG con coordenadas georreferenciadas; enlazar polígonos de edificios con dirección, número de pisos y año de construcción; lograr un rendimiento de escalado y desplazamiento aceptable (gracias a D3.js).
Cómo me imaginé trabajando con SVG. Dos tareas a veces alternas:
<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>El proceso es largo e iterativo. Una imagen vectorial requiere ediciones periódicas, en paralelo con la manipulación DOM basada en los datos recopilados.
Enfrentando la realidad. Adobe Illustrator, como una poderosa herramienta para editar imágenes vectoriales complejas, convierte el DOM de un archivo SVG en su propio modelo de objeto. Pero no lo hace completamente. En mi enfoque, algunos de los datos se pierden permanentemente después de editarlos en Illustrator.
| Datos | Después de editar en Adobe Illustrator |
|---|---|
| Coordenadas del punto | ✅ Guardado como en la fuente SVG |
Agrupación de elementos ( <g> ) | ✅ Guardado (disponible en el panel Capas) |
| identificaciones | ✅ Guardado (disponible como nombres de objetos en el panel Capas) |
| Clases CSS | ❌ Perdido (cualquier lista de clases se reemplaza por un solo nombre de clase como st0, st1... o a, b, c...) |
| Atributos arbitrarios (datos) | ❌ Perdido |
Todos los experimentos se realizaron en Adobe Illustrator CC 2019. La actualización más reciente no se puede instalar en mi macOS Mojave. No creo que se haya actualizado nada en el motor SVG (¿o me equivoco?)
Por supuesto, siempre existe la opción de posprocesar después de cada edición en Illustrator. Usando ID puedo restaurar la lista de clases y/o atributos de una matriz de datos externa (JSON). Pero realmente no quiero complicar el proceso, que ya parece un poco extraño.
Código SVG mínimo de prueba:
<?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>Aquí está el resultado de guardar en Illustrator (fusionar/renombrar clases, eliminar atributos):
<?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>¡Agradecido con la comunidad SO por cualquier ayuda y consejos!