您可以设计一个图标集,其中所有图标都具有完全相同的宽高比。 但是,通常情况可能并非如此。 一个小烧杯图标周围的容器可能又高又窄。 围绕着一条小鱼的容器也许长短不一。 您可能不必对此进行过多考虑,但是不幸的是,您在使用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!
为什么<symbol>更适合图标
只是要指出一点:
-
viewBox
可以在符号上定义,因此您无需在标记中使用它(更轻松,更不易出错)。 - 可以在
<symbol>
内添加title
和desc
标签,当使用该符号时,它们有点像“随行而去”,从而使可访问性更容易正确实现。 - 符号在您定义时不会显示,因此不需要
<defs>
块。 - 无论如何,这可能是
<symbol>
发明的。
演示版
有用:
在CodePen上查看Chris Coyier ( @chriscoyier )的Pen Hwcxp 。