Css 在SVG中使用尽可能多的元素/属性是否有好处？

下面我用两种风格编写了相同的SVG文件：一种几乎具有尽可能多的元素/属性，另一种则没有。除了人物数量和美学之外，两者之间还有什么实际的区别吗

我最好的猜测是，答案（如果有的话）与向后兼容性、性能和/或从SMIL到CSS动画/Web动画的转换有关，但这些都是在黑暗中拍摄的。不过，我主要关心的是兼容性部分

使用元素/属性：

没有元素/属性：

---

它们都有相同数量的CSS样式。许多的在第二个例子中，这就是你正在做的。除了CSS的特殊性略有不同之外，所有内容都是一样的。

我更喜欢将所有内容都放在CSS中，因为这样可以减少冗长，并且更容易阅读我在中发现的有趣和相关的内容：将来，任何应用于SVG内容的新属性都不会获得表示属性。因此，建议作者使用样式属性（通过内联“样式”属性或样式表，而不是表示属性）来设置SVG内容的样式。注意：SVG中对样式的支持仍然有限。对于具有几何体属性的元素，Firefox会显示无效属性名称警告，Illustrator会将这些元素转换为，Inkscape根本不会渲染这些元素。我会避免使用几何体属性，只使用位置和维度的表示属性，至少在支持稳定之前是这样。这样做还可以与没有几何属性的元素（如“文本”）保持一致。澄清：我的问题示例中的和元素（例如）在Illustrator中打开时会转换为。Firefox支持SVG 2的几何属性。它不会显示无效的属性名，尽管我承认这种支持是最近才出现的。

<svg xmlns="http: //www.w3.org/2000/svg" viewBox="-50 -50 200 200">
  <style>
    path, .path {
      fill: none;
      stroke: #000;
      stroke-width: 2.25;
    }
  </style>
  <rect style="fill: none; x: -50; y: -50; width: 200; height: 200;"/>
  <rect class="path" style="fill: #fff; x: 1.125; y: 1.125; width: 97.75; height: 97.75;"/>
  <rect style="x: 34; y: 87.5; width: 2.5; height: 2.5;"/>
  <path d="M41,84 q3,1 9,1 t9,-1"/>
  <polygon points="45,80 50,71 55,80 50,78"/>
  <polygon points="67,77 62,73 62,76"/>
  <polygon points="33,77 38,73 38,76"/>
  <circle style="cx: 73.5; cy: 71; r: 5;"/>
  <circle style="cx: 26.5; cy: 71; r: 5;"/>
  <path d="M63.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <path d="M15.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <polygon points="86,64 76,58 64,60 63,64 77,62"/>
  <polygon points="14,64 24,58 36,60 37,64 23,62"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 200 200">
  <rect fill="none" x="-50" y="-50" width="200" height="200"/>
  <rect fill="#fff" stroke="#000" stroke-width="2.25" x="1.125" y="1.125" width="97.75" height="97.75"/>
  <rect x="34" y="87.5" width="2.5" height="2.5"/>
  <path fill="none" stroke="#000" stroke-width="2.25" d="M41,84 q3,1 9,1 t9,-1"/>
  <polygon points="45,80 50,71 55,80 50,78"/>
  <polygon points="67,77 62,73 62,76"/>
  <polygon points="33,77 38,73 38,76"/>
  <circle cx="73.5" cy="71" r="5"/>
  <circle cx="26.5" cy="71" r="5"/>
  <path fill="none" stroke="#000" stroke-width="2.25" d="M63.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <path fill="none" stroke="#000" stroke-width="2.25" d="M15.5,71 q3,-5 10.5,-5 t10.5,5"/>
  <polygon points="86,64 76,58 64,60 63,64 77,62"/>
  <polygon points="14,64 24,58 36,60 37,64 23,62"/>
</svg>