了解材料设计图标中的 SVG 路径答案

【问题标题】：Understanding SVG path in material design icon了解材料设计图标中的 SVG 路径
【发布时间】：2015-04-17 18:45:49
【问题描述】：

我是 SVG 领域的新手，正在查看一些 Google Material 设计图标 (link)。特别是 clear 图标 (icon link)。

我尝试使用 SVG 创建相同的图标。尽管在 JSFiddle 中两个图标看起来相同，但我认为我缺少一些东西，因为我的版本中的路径有点简洁。有人可以解释一下为什么路径在后面有更多的细节吗？

<!-- My version -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M1 1L15 15M8 8L15 1L1 15" stroke="black" stroke-width="2" />
  <rect x="0" y="0" width="16" height="16" fill="none" />
</svg>

<!-- From Google Material design -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z" />
  <path d="M0 0h24v24h-24z" fill="none" />
</svg>

【问题讨论】：

标签： svg icons material-design

【解决方案1】：

你实际上可以让你的更小

M1 1L15 15M15 1L1 15

你的不同的原因是你用笔划（粗线）画你的十字架。材料设计是追踪形状的轮廓。如果将其放大并添加笔触颜色，您将看到不同之处：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
  <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z" stroke="red" stroke-width="0.5"/>
</svg>

他们为什么这样做？由于各种原因。这是一种更简单的方法，可以与您表示形状的方式保持一致。如果你想改变图标颜色，你只需要改变一个属性。此外，字体只使用轮廓，因此使用笔划的图标集将无法转换为字体。

【讨论】：