如何在不丢失类和属性的情况下直观地编辑 SVG？

Question

长话短说

\n

\n

编辑SVG > Illustrator > SVG时，原始元素类会丢失。如何以安全的方式直观地编辑 svg 文件？

\n

\n

---

\n

简要背景。我对基于单个 svg 文件的微型 GIS 的想法很着迷。这是我家乡的交互式热图，其中包含建筑物的颜色编码建筑价值以及 Google 地图 API 中不提供的一些视觉效果。因此，我已经设法： 将墨卡托投影中的街道地图从 OpenStreetMap 转换为具有地理参考坐标的 SVG；将建筑物多边形与地址、楼层数和建造年份联系起来；实现可接受的缩放和滚动性能（感谢 D3.js）。

\n

我想象如何使用 SVG。两个有时交替的任务：

\n

\n
1. Adobe Illustrator 中的视觉几何校正：校正地形错误、将多边形转换为复合形状（带庭院的建筑物）等。
\n
2. 在 Chrome 控制台中使用 JavaScript 和 CSS 进行数据可视化。向多边形添加多个类或数据属性，它们负责视觉表示。例如，在样式表中使用不同的选择器和规则，我可以根据建筑物的建筑风格、高度和建造时间段，在特定大小、亮度和色调的多边形周围创建发光：<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>
\n

\n

这个过程是漫长且反复的。矢量图像需要定期编辑，同时根据收集的数据进行 DOM 操作。

\n

面对现实。Adobe Illustrator 作为编辑复杂矢量图像的强大工具，可将 SVG 文件的 DOM 转换为其自己的对象模型。但它并没有完全做到这一点。在我的方法中，一些数据在 Illustrator 中编辑后会永久丢失。

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n

数据	在 Adob​​e Illustrator 中编辑后
点坐标	\xe2\x9c\x85 在源 SVG 中另存为
元素分组 ( <g>)	\xe2\x9c\x85 已保存（可在“图层”面板中找到）
ID	\xe2\x9c\x85 已保存（在“图层”面板中作为对象名称提供）
CSS 类	\xe2\x9d\x8c 丢失（任何类列表都被单个类名替换，如 st0、st1... 或 a、b、c...）
任意（数据）属性	\xe2\x9d\x8c 丢失

\n

该怎么办？

\n

所有实验均在 Adob​​e Illustrator CC 2019 上完成。最新更新无法安装在我的 macOS Mojave 上。我认为 SVG 引擎中没有更新任何内容（或者我错了？）

\n

\n
• 有没有办法为此类项目设置矢量编辑器？
\n
• 是否有（突然）有任何秘密方法可以扩展 Chrome DevTools 功能以在浏览器中进行可视化 SVG 编辑？
\n

\n

当然，在 Illustrator 中每次编辑后始终可以选择进行后处理。使用 ID，我可以从外部数据数组 (JSON) 恢复类和/或属性的列表。但我真的不想让这个过程变得复杂，这看起来已经有点奇怪了。

\n

最低测试 SVG 代码:\n

\r\n

\r\n

<?xml version="1.0" encoding="utf-8"?>\n<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">\n    <style type="text/css">\n        .test {fill:red;}\n        .test.blue {fill:blue;}\n    </style>\n    <g>\n        <rect id="item1" data-test="1" x="190" y="20" class="test" width="120" height="120"/>\n        <rect id="item2" data-test="1" x="322" y="20" class="test blue" width="120" height="120"/>\n    </g>\n</svg>

\r\n

\r\n

\r\n

\n

这是在 Illustrator 中保存的结果（合并/重命名类，删除属性）：

\n

\r\n

\r\n

<?xml version="1.0" encoding="utf-8"?>\n<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\n<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"\n     viewBox="0 0 640 200" style="enable-background:new 0 0 640 200;" xml:space="preserve">\n<style type="text/css">\n    .st0{fill:#FF0000;}\n    .st1{fill:#0000FF;}\n</style>\n<g>\n    <rect id="item1" x="190" y="20" class="st0" width="120" height="120"/>\n    <rect id="item2" x="322" y="20" class="st1" width="120" height="120"/>\n</g>\n</svg>

\r\n

\r\n

\r\n

\n

感谢 SO 社区提供的任何帮助和提示！

\n

Answer 1

我强烈推荐Boxy SVG作为 SVG 的可视化编辑器。它不使用单独的对象模型，它是 100% SVG。我不知道它是否会保留您所有的手动编辑，但我认为它会比 Illustrator 更接近。

\n

以下是在 Boxy SVG 中保存最小 SVG 测试代码的结果：

\n

<?xml version="1.0" encoding="utf-8"?>\n<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">\n    <style type="text/css">\n        .test {fill:red;}\n        .test.blue {fill:blue;}\n    </style>\n    <g>\n        <rect id="item1" data-test="1" x="190" y="20" class="test" width="120" height="120"/>\n        <rect id="item2" data-test="1" x="322" y="20" class="test blue" width="120" height="120"/>\n    </g>\n</svg>\n

\n

正如您所看到的，代码是相同的，因此加载到 Boxy SVG 并执行“另存为”的过程没有破坏任何内容。据我所知，Boxy SVG 不会触及您的样式块或类属性 \xe2\x80\x94 事实上，它甚至不提供编辑它们的方法，它就让他们一个人呆着。

\n

您对 Boxy SVG 中的填充或描边颜色所做的任何更改都将作为样式属性添加到对象上，并且当然会覆盖类分配的任何样式。以下是在 Boxy SVG 中定义几个命名颜色并将它们分配给两个对象的结果。正如您所看到的，命名颜色是在块中定义的<def>，并分配有样式属性，因此它们会覆盖类分配的颜色，但您的类属性和样式块本身保持不变。

\n

<?xml version="1.0" encoding="utf-8"?>\n<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 640 200" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">\n  <defs>\n    <linearGradient id="color-0" bx:pinned="true">\n      <title>greyish green</title>\n      <stop style="stop-color: rgb(115, 169, 111);"/>\n    </linearGradient>\n    <linearGradient id="color-1" bx:pinned="true">\n      <title>pinkish</title>\n      <stop style="stop-color: rgb(214, 98, 187);"/>\n    </linearGradient>\n  </defs>\n  <style type="text/css">\n        .test {fill:red;}\n        .test.blue {fill:blue;}\n    </style>\n  <g>\n    <rect id="item1" data-test="1" x="190" y="20" class="test" width="120" height="120" style="fill: url(#color-0);"/>\n    <rect id="item2" data-test="1" x="322" y="20" class="test blue" width="120" height="120" style="fill: url(#color-1);"/>\n  </g>\n</svg>\n

\n

请注意，Boxy SVG 现在对 SVG 根元素的属性进行了一些细微的更改；这些对于你想做的事情可能重要也可能不重要。

\n