用于在web中绘制和显示的SVG工具

我正在寻找一个工具来绘制SVG图，我想在网页上显示相同的内容

有很多工具可以创建SVG图，但我正在寻找一个可以为每个形状添加一些额外字段的工具

好的，首先我会解释清楚我的要求。当我们使用任何SVG工具创建一个矩形时，它将使用rect元素创建一个SVG元素，在我的例子中，我想区分两个设备“device type-1”和“device type-2”（在我的web应用程序中使用CSS），但它们的形状是矩形的

因此，我必须在绘图工具中为每个矩形添加一些附加信息，以便使用Javascript我可以理解设备的类型，基于设备类型，我可以为每个矩形应用不同的CSS

---

如何做到这一点？任何绘图工具都支持这种功能吗？

一种方法是使用我们的Adobe Illustrator设计元素，使用Raphael JS显示并制作所述元素的动画。illustrator绘制矢量图形的方式与SVG绘制矢量图形的方式存在一些差异。一般的共识是保持图形相对简单。有几个指南，但这一个看起来特别好：

---

您可以使用并定义稍后在JavaScript中引用的ID

您真的需要绘图工具吗？如果您的形状足够简单，并且您计划通过CSS为它们设置样式，那么为什么不直接将SVG粘贴到标记中呢？返回404