xml - 任何字形图标都可以只是一条路径吗？

Question

我说的是 svg 格式的单色图标。stackoverflow 网站右上角的图标就是一个例子。

我注意到 twitter bootstrap 上的所有图标都只是一个路径（即使它们由许多元素组成）： https ://getbootstrap.com/docs/3.3/components/

  <path d="M250 700h800q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5z" />

但其他图标集如： https ://glyph.smarticons.co/

他们的字形由多个元素组成：

<path d="M7.984,0.053 C3.599,0.053 0.045,3.614 0.045,8.006 C0.045,12.398 3.6,15.959 7.984,15.959 C12.368,15.959 15.923,12.398 15.923,8.006 C15.923,3.614 12.369,0.053 7.984,0.053 L7.984,0.053 Z M7.49,2.045 C8.328,2.045 9.009,2.699 9.009,3.505 C9.009,4.311 8.328,4.965 7.49,4.965 C6.65,4.965 5.971,4.311 5.971,3.505 C5.971,2.699 6.65,2.045 7.49,2.045 L7.49,2.045 Z M8.035,14.908 C4.984,14.908 2.342,10.918 8.101,7.984 C13.357,5.308 10.904,0.744 8.035,1.008 C12.41,1.008 14.974,4.119 14.974,7.958 C14.975,11.797 11.867,14.908 8.035,14.908 L8.035,14.908 Z" class="si-glyph-fill"></path>
<ellipse cx="8.493" cy="11.445" rx="1.493" ry="1.445" class="si-glyph-fill"></ellipse>

我注意到使用矢量程序可以将对象转换为路径，然后组合所有路径。

但我想知道理论上是否有可能每个字形图标都可以通过这种方式转换为一条路径？或者有没有图标不能出现的情况？

标签： xmlsvgvectorgraphicsglyphicons

Answer 1

这是一个愚蠢的例子：你有 2 个简单的 svg 图像。第一个只有一条路径。对于第二个，我从第一个 SVG 中获取了点，并制作了 2 条路径。2张图片看起来很像。

svg{display:inline-block;border:1px,solid;}
path{fill:none; stroke:black;}

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z
                     M100,100 L120 180L170,170z"/>
  
</svg>

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z"/>
  <path id="test" d="M100,100 L120 180L170,170z" />
  
</svg>

现在删除笔触并让填充为黑色：

svg{border:1px solid;display:inline-block;}

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z
                     M100,100 L120 180L170,170z" />
  
</svg>

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z"/>
  <path id="test" d="M100,100 L120 180L170,170z" />
  
</svg>