SVG`symbol`是图标的不错选择

最新推荐文章于 2024-06-05 09:36:26 发布

cunqu9743

最新推荐文章于 2024-06-05 09:36:26 发布

阅读量656

点赞数

文章标签： java 人工智能 linux python 编程语言

您可以设计一个图标集，其中所有图标都具有完全相同的宽高比。但是，通常情况可能并非如此。一个小烧杯图标周围的容器可能又高又窄。围绕着一条小鱼的容器也许长短不一。您可能不必对此进行过多考虑，但是不幸的是，您在使用SVG图标系统时就不得不像我之前描述的那样，因为您需要使用viewBox属性来描述该容器/长宽比。

一种改进是在SVG中使用<symbol>元素，而不是直接引用形状（或<g> ），因为您可以直接在<symbol>上定义viewBox ，然后在以后<use>时不需要它。一个<svg> 。

有一个例子。

正如您可以从Illustrator的画板中看到的，这是两个纵横比非常不同的图标。

我们可以将它们调整为以一致的宽高比放置，但是我发现知道图标的边缘在形状停止的位置是正确的，而不是周围有任意的空白，这样更加灵活和可行。

“旧”方式

如果我们使用<defs> -block路线，我们可以将它们组合为：

<svg>
  <defs>
    <g id="shape-icon-1">
      <!-- all the paths and shapes and whatnot for this icon -->
    <g>
    <g id="shape-icon-2">
      <!-- all the paths and shapes and whatnot for this icon -->
    <g>
  </defs>
</svg>

然后像这样使用它们：

<!-- These viewBox's better be right or the icons won't look right! -->

<svg class="icon" viewBox="214.7 0 182.6 792">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon" viewBox="0 26 100 48">
  <use xlink:href="#shape-icon-2" />
</svg>

这给实现者带来了很大的负担，以使标记中的viewBox属性正确无误。这就是为什么可能想要尝试以一致的viewBox="0 0 100 100" （或诸如此类）获取所有这些图标的原因之一，但是然后我们又会进行某种空白操作。

“新”方式

输入Fabrice Weinberg和TxHawks 。 Fabrice在grunt-svgstore上工作， grunt-svgstore是一个Grunt插件，用于从SVG文件的文件夹创建SVG精灵。这种事情使SVG图标的工作流程变得快速而简单。也就是说，除了您需要在使用每个图标之前都知道该视图viewBox的事实。

TxHawks建议让grunt-svgstore至少将data-*属性放在包装每个图标的<g>元素上，以便可以通过编程方式访问其应有的内容。但是不幸的是，SVG不允许这样做（它本来可以工作，但也可能使构建工具符合规范）。没关系，因为不久之后，他们建议改用<symbol> ，这真是个好主意。

不要使用<g>来包装所有图标形状，而应使用<symbol> ，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
</svg>

请注意，viewBox是为每个图标定义的，定义时与使用时相反。这意味着使用它变得更加容易：

<!-- We ain't even need no viewBox round here. --> 

<svg class="icon">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

更容易，更不容易出错。

它变得更好：您可以在符号中添加<title>和<desc>标记，这意味着可访问性在使用时会被放入。

<symbol id="icon1" viewBox="original-file's-viewBox">
  <title>original-file's-title</title> 
  <desc>original-file's-desc</desc>

  <!-- <path>s and other shapes -->

</symbol>

grunt-svgstore现在可以做到这一点，这要感谢TxHawks和Fabrice！