把svg图标制作成字体图标_SVG图标FTW
把svg图标制作成字体图标
A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. Using raster graphics for icons means that they are not manageable in CSS. What if we need to change a color of an icon for its hover/active/focus state? For each icon state we need to add one more icon image. What about size? For each icon size we need to add yet another icon image. What about a shape? A shadow? Yup, the same thing. Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale.
出现了许多很棒的方法和原理，使我们CSS越来越模块化，结构化和灵活。 但是考虑一下您的图标。 对图标使用光栅图形意味着它们无法在CSS中管理。 如果我们需要更改图标的颜色以使其处于悬停/活动/焦点状态该怎么办？ 对于每个图标状态，我们需要再添加一个图标图像。 大小呢？ 对于每个图标大小，我们需要添加另一个图标图像。 形状呢？ 一个影子？ 是的，同样的事情。 不是很方便吧？ 因此，我们最终遇到了难以维护和缩放的肿的精灵和样式表。
But fortunately we’ve had icon fonts coming to the rescue. They allow us to manage all these things more easily and we have the following benefits:
但是幸运的是，我们已经有了一些图标字体来解救。 它们使我们能够更轻松地管理所有这些事情，并且我们具有以下好处：
- It’s plain text, which means they can be gzipped to up to 95% 它是纯文本格式，这意味着可以将它们压缩成高达95％的格式
- It’s a vector graphic, which means it can be scaled to any size making it Retina ready这是一个矢量图形，这意味着它可以缩放到任意大小，使其适合视网膜
- It’s one source file, which means a minimum of HTTP requests这是一个源文件，这意味着最少的HTTP请求
- It’s a font – you can easily change size, color, shape and add a shadow它是一种字体–您可以轻松更改大小，颜色，形状并添加阴影
- Browser support for older browsers possible (e.g. IE6)可能支持较旧的浏览器(例如IE6)
Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text shadow. We can’t, for example, use an inset text shadow or apply different colors to the details.
不幸的是，图标字体有一些局限性，例如单色(仍然)，并且我们只能对文本使用样式，例如文本阴影。 例如，我们不能使用嵌入的文本阴影或将不同的颜色应用于细节。
So today we will explore the possibilities of using SVG icons instead.
因此，今天我们将探讨改用SVG图标的可能性。
使用SVG图标 (Using SVG icons)
The icon solution I want to share here with you is based on SVG (Scalable Vector Graphics). Extending the benefits of icon fonts, it will give us some additional super powers:
我想在这里与您分享的图标解决方案基于SVG (可缩放矢量图形)。 扩展图标字体的优点，它将为我们提供一些额外的超级功能：
- The power of consistently crisp rendering across browsers and operating systems. 跨浏览器和操作系统持续进行清晰渲染的能力。
- The power of CSS. We will obtain the ability to style our icons with CSS. CSS的力量。 我们将获得使用CSS设置图标样式的功能。
-
The power of SVG filter effects.
SVG滤镜效果强大。
-
The power of interactivity. We will be able to use animations with SMIL, CSS or JavaScript.
互动的力量。 我们将能够使用带有SMIL，CSS或JavaScript的动画。
-
The power of the Markup language.
标记语言的力量。
Currently, SVG looks more like a retired super hero. For humanity’s sake, let’s kick him off the sofa and send him to the gym.
目前，SVG看起来更像是退休的超级英雄。 为了人类的利益，让我们将他踢下沙发，然后送他去健身房。
入门 (Getting started)
First, we’ll need to get some SVGs to work with. I’m assuming you are familiar with vector graphics and know how to create or where to get a SVG file. Check out this article over at CSS-Tricks for a good introduction on how to create and work with SVGs. For this tutorial we’ll be using this SVG file. All demos you will see here will actually be working pens, so you will have the opportunity to play with them live.
首先，我们需要使用一些SVG。 我假设您熟悉矢量图形，并且知道如何创建或在哪里获取SVG文件。 在CSS-Tricks上查看本文，以获取有关如何创建和使用SVG的良好介绍。 在本教程中，我们将使用此SVG文件。 您将在此处看到的所有演示实际上都是工作笔，因此您将有机会现场使用它们。
At this point we have a vector graphic to play with, so let’s add an empty SVG document just after the opening body tag.
至此，我们有了一个矢量图形，因此让我们在body标签之后添加一个空的SVG文档。
I will refer to this SVG as “SVG source document” throughout this tutorial.
在本教程中，我将这个SVG称为“ SVG源文档”。
Let’s add the “inner” SVG source into the empty SVG declaration and give this shape a unique ID for future reference.
让我们将“内部” SVG源添加到空的SVG声明中，并给此形状一个唯一的ID，以供将来参考。
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<!-- SVG SOURCE -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
<path id="heart-icon" d="M256,465.559c0,0- 239.054-135.345-239.054-291.062c0-159
.761,224.692-177.574,239.054-7.756 c17.244-169.692,239.054-152.008,239.054,
7.756C495.054,330.214,256,465.559,256,465.559z"/>
</svg>
<!-- SVG SOURCE ends-->
<body>
<html>
If your shape consist of many small chunks, you’ll need to wrap them all with a g tag and add an ID to that group.
如果形状由许多小块组成，则需要用g标签将它们全部包裹起来，然后向该组添加一个ID。
Now we can “use” this graphic wherever we want in our HTML document with the help of use. The xlink:href attribute is a reference to our shape by its ID:
现在的地方，我们希望我们的帮助下HTML文档中，我们可以“用”这个图形use 。 xlink:href属性通过ID引用我们的形状：
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<!-- SVG SOURCE —>
...
<!-- SVG SOURCE ends —>
<svg class="icon" viewBox="0 0 32 32">
<use xlink:href="#heart-icon">
</svg>
</body>
</html>
See the Pen 7bec14841770e985c98af75331e339a9 by Lego Mushroom (@sol0mka) on CodePen
见笔7bec14841770e985c98af75331e339a9由乐高积木蘑菇( @ sol0mka )上CodePen
Isn’t that nice?
那不是很好吗？
The
useelement takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is, much like anonymous content and XBL.— Mozilla DN
use元素从SVG文档中获取节点，并将其复制到其他位置。 效果与将节点深度克隆到未公开的DOM中，然后粘贴到use元素所在的位置相同，就像匿名内容和XBL一样。— Mozilla DN
Thoughtful readers probably noticed the most interesting part of the above pen: we can simply use CSS to style our icons. Take a look:
有思想的读者可能会注意到上面笔最有趣的部分：我们可以简单地使用CSS设置图标样式。 看一看：
See the Pen 80187d6000795e8cfd104486861a801e by Lego Mushroom (@sol0mka) on CodePen
见笔80187d6000795e8cfd104486861a801e由乐高积木蘑菇( @ sol0mka )上CodePen
The set of properties we can work with is pretty large. The most useful and common ones are:
我们可以使用的属性集非常大。 最有用和最常见的是：
-
width and height
宽度和高度
-
icon color by using the fill property
使用fill属性的图标颜色
-
stroke by setting stoke or stroke-width
行程由设置冲程或笔划宽度
Styling these properties will give us many possibilities. But let’s make it even better – let’s add our wanted inset shadow.
设置这些属性的样式将为我们提供许多可能性。 但是，让我们做得更好–让我们添加想要的插图阴影。
添加滤镜效果 (Adding filter effects)
Filter effects are the real super powers of SVG and if you are interested in a detailed overview, check out Filter Effects – SVG 1.1 (Second Edition) and SVG Filters by Mike Sierra.
滤镜效果是真正的超能力SVG的，如果你有兴趣的详细介绍，请查看滤镜效果- SVG 1.1(第二版)和SVG滤镜由麦克·塞拉。
Let’s work with some pre-made filters. Fortunately, there are a lot of ready-to-use SVG filters around.
让我们使用一些预制的过滤器。 幸运的是，周围有很多现成的SVG过滤器。
To use a filter effect with our icon we need to declare it in our “SVG source document” with a unique ID for referencing, just like the we did with the icon but now we’ll have a filter tag.
要对图标使用滤镜效果，我们需要在“ SVG源文档”中用唯一的ID对其进行声明，以进行引用，就像我们对图标所做的一样，但是现在我们有了一个filter标签。
<filter id='inset-shadow'>
<!-- Shadow offset -->
<feOffset
dx='0'
dy='0'
/>
<!-- Shadow blur -->
<feGaussianBlur
stdDeviation='1'
result='offset-blur'
/>
<!-- Invert drop shadow to make an inset shadow -->
<feComposite
operator='out'
in='SourceGraphic'
in2='offset-blur'
result='inverse'
/>
<!-- Cut color inside shadow -->
<feFlood
flood-color='black'
flood-opacity='.95'
result='color'
/>
<feComposite
operator='in'
in='color'
in2='inverse'
result='shadow'
/>
<!-- Placing shadow over element -->
<feComposite
operator='over'
in='shadow'
in2='SourceGraphic'
/>
Now, let’s add the reference to the filter to a new group wrapper:
现在，让我们将对过滤器的引用添加到新的组包装器中：
<svg viewBox="0 0 32 32">
<g filter="url(#inset-shadow)">
<use xlink:href="#heart-icon"></use>
</g>
</svg>
Check out the following examples of SVG filters:
查看以下SVG过滤器示例：
Inset shadow:
插图阴影：
See the Pen c6721c06e93b4ee6cc95a21f6a4caedc by Lego Mushroom (@sol0mka) on CodePen
在CodePen上查看Lego Mushroom( @ sol0mka )的Pen c6721c06e93b4ee6cc95a21f6a4caedc
Drop shadow:
投影：
See the Pen 3bb230339c8f72008ef410246b44c127 by Lego Mushroom (@sol0mka) on CodePen
见笔3bb230339c8f72008ef410246b44c127由乐高积木蘑菇( @ sol0mka )上CodePen
More examples:
更多示例：
See the Pen 6eca814eda8ec7e758d0feab628bd390 by Lego Mushroom (@sol0mka) on CodePen
请参阅CodePen上Lego Mushroom( @ sol0mka )的Pen 6eca814eda8ec7e758d0feab628bd390
Isn’t this awesome?
这不是很棒吗？
增加互动 (Adding interactivity)
As I’ve mentioned at the beginning of this tutorial, we can use SMIL, CSS or JavaScript for animating icons.
正如我在本教程开始时提到的那样，我们可以使用SMIL ，CSS或JavaScript来制作图标动画。
So let’s bring some life to our icons! We’ll create a working animated clock which will be great for showing the possibilities of what we can do.
因此，让我们为图标增添活力吧！ 我们将创建一个有效的动画时钟，这将非常适合展示我们可以做的事情。
We will start with an alarm clock icon as the “SVG source document”. It consists of different shapes wrapped in a group with the ID #clock-icon for reference.
我们将以一个闹钟图标作为“ SVG源文档”开始。 它由包裹在ID ＃clock-icon中的不同形状组成，以供参考。
See the Pen 841a1d6e68f73f7c10ac9c3385ec7d17 by Lego Mushroom (@sol0mka) on CodePen
见笔841a1d6e68f73f7c10ac9c3385ec7d17由乐高积木蘑菇( @ sol0mka )上CodePen
Icon credits go to visualpharm. License: CC by-nd 3.0.
图标学分归于visualpharm 。 许可证： CC by-nd 3.0 。
I’ve also added some other IDs like #hour-hand, #minute-hand and #second-hand where appropriate for referring to the paths in the animation we will create.
我还添加了其他一些ID，例如＃hour-hand ， ＃minute-hand和＃second-hand ，用于引用我们将创建的动画中的路径。
Now, let’s declare a rotation 2D transform for each of the clock hands.
现在，让我们为每个时钟指针声明一个旋转2D变换。
For that we’ll add a transform value of rotate(0 16 17) where
为此，我们将添加一个transform( rotate(0 16 17)值rotate(0 16 17) ，其中
-
0 is the amount of degrees the clock hand is rotated
0是钟针旋转的度数
-
16 17 simply the center of our rotation on the X and Y axis.
16 17只是我们在X和Y轴上的旋转中心。
So, using this rotation value
因此，使用此旋转值
<rect id="hour-hand" transform="rotate(320 16 17)" x="15.386" y="10.291" width="1.227" height="7.626"/>
will rotate hour clock hand 320 degrees.
将时针旋转320度。
Take a look at the demo:
看一下演示：
See the Pen 9da5c5c7ba2a9fc636ad041cd38a8f2e by Lego Mushroom (@sol0mka) on CodePen
见笔9da5c5c7ba2a9fc636ad041cd38a8f2e由乐高积木蘑菇( @ sol0mka )上CodePen
The next step is to add an animation of the rotation we made above. For this purpose we will use some JavaScript and set a new rotate value every full second:
下一步是添加我们上面所做的旋转动画。 为此，我们将使用一些JavaScript并每秒钟设置一个新的轮播值：
<script>
var setTime = function(){
var date = new Date(),
MINUTE = 60, HOUR = 60*MINUTE,
seconds = date.getSeconds(),
minutes = (date.getMinutes()*MINUTE) + seconds,
hours = (date.getHours()*HOUR)+minutes;
document.getElementById('second-hand').setAttribute('transform', 'rotate('+360*(seconds/MINUTE)+',16,17)');
document.getElementById('minute-hand').setAttribute('transform', 'rotate('+360*(minutes/HOUR)+',16,17)');
document.getElementById('hour-hand').setAttribute('transform', 'rotate('+360*(hours/(12*HOUR))+',16,17)');
}
setTime();
var interval = setInterval(setTime,1000);
</script>
See the Pen 66f2f34eb1a34dee4486060360a7c1a7 by Lego Mushroom (@sol0mka) on CodePen
见笔66f2f34eb1a34dee4486060360a7c1a7由乐高积木蘑菇( @ sol0mka )上CodePen
Isn’t this awesome?
这不是很棒吗？
If you are interested in seeing a version using SMIL animation, you can take a look at this demo. Also, check out the CSS version (both demos best viewed in Chrome). Note that SMIL animation support is limited.
如果您有兴趣使用SMIL动画查看版本，可以看一下这个演示。 另外，请查看CSS版本(两个演示都最好在Chrome中查看)。 请注意， SMIL动画支持有限。
使用媒体查询 (Using Media Queries)
We can use isolated CSS and especially media queries inside of our SVG icon. That means that we have the ability to change, for instance, a shape of an icon depending on screen size and more. We’ll use this kind of inline style for this purpose:
我们可以在SVG图标中使用隔离CSS，尤其是媒体查询。 这意味着我们可以根据屏幕尺寸等来更改图标的形状。 为此，我们将使用这种内联样式：
<style>
<![CDATA[
@media screen and (max-width:810px){
.hide{
display: none;
}
}
]] >
</style>
Try to resize the browser when viewing this pen in a new window to less or more than 810 pixel.
在新窗口中查看此笔时，尝试将浏览器的大小调整为810像素以下。
See the Pen d4676a34387d630bced2bc2979c02cbb by Lego Mushroom (@sol0mka) on CodePen
见笔d4676a34387d630bced2bc2979c02cbb由乐高积木蘑菇( @ sol0mka )上CodePen
Isn’t this… SVG?
这不是……SVG吗？
SVG图标带来更多乐趣 (More fun with SVG icons)
Let’s do something fun with all these things we’ve just gone over. The demo below shows differently sized and filled icons, with some JS animations:
让我们用刚刚结束的所有事情来做一些有趣的事情。 下面的演示显示了不同大小和填充的图标，以及一些JS动画：
See the Pen 430f1716da3ab67e3f86d45f59da3283 by Lego Mushroom (@sol0mka) on CodePen
见笔430f1716da3ab67e3f86d45f59da3283由乐高积木蘑菇( @ sol0mka )上CodePen
In the next demo we’ll add some filter effects:
在下一个演示中，我们将添加一些滤镜效果：
See the Pen 92ca494d1a1f8fc1abaa3b4a83faf11c by Lego Mushroom (@sol0mka) on CodePen
请参阅CodePen上的Lego Mushroom( @ sol0mka )的Pen 92ca494d1a1f8fc1abaa3b4a83faf11c
Having all these superpowers, the only limit is your imagination.
拥有所有这些超级大国，唯一的限制就是您的想象力。
浏览器支持 (Browser support)
What we have done so far should work well in all popular modern browsers:
到目前为止，我们所做的一切应该可以在所有流行的现代浏览器中正常运行：
- IE 9+ (filter effects since IE10) IE 9+(自IE10起的滤镜效果)
- Mozilla 4+ Mozilla 4+
- Opera 11.6+ (filter effects since Opera 12) Opera 11.6+(自Opera 12起的滤镜效果)
- Safari 5.1+ (filters since Safari 6) Safari 5.1+(自Safari 6起过滤)
- Chrome 14+ (at least) Chrome 14以上版本(至少)
性能 (Performance)
After running a couple of tests, it shows that SVG icons are about two times slower compared to using a .wof icon font in Chrome. The time cost of the first paint operation is about 0.05 millisecond per icon or about 1.453ms for an average of 30 icons per user’s view.
经过几次测试，结果表明，与在Chrome中使用.wof图标字体相比，SVG图标的速度要慢大约两倍。 第一次绘制操作的时间成本是每个图标约0.05毫秒，或每个用户视图平均30个图标约1.453毫秒。
| Number of icons | Paint operation time, ms | Paint operation time per 1 icon, ms |
| 1 | 0.059 | 0.059 |
| 30 | 1.453 | 0.04843 |
| 90 | 4.373 | 0.04858 |
| 180 | 9.315 | 0.05175 |
| 3000 | 32.131 | 0.01071 |
| 图标数量 | 喷漆操作时间，毫秒 | 每1个图标的绘画操作时间，毫秒 |
| 1个 | 0.059 | 0.059 |
| 30 | 1.453 | 0.04843 |
| 90 | 4.373 | 0.04858 |
| 180 | 9.315 | 0.05175 |
| 3000 | 32.131 | 0.01071 |
These tests were made without any filter effects or interactivity which clearly will have an impact on these numbers.
进行这些测试时，没有任何过滤效果或交互作用，这显然会对这些数字产生影响。
结论 (Conclusion)
Let’s look back and analyze what we’ve done.
让我们回顾并分析我们所做的事情。
Using SVG as icons in our web projects gives us the following advantages:
在我们的Web项目中使用SVG作为图标具有以下优点：
- Only one HTTP request 仅一个HTTP请求
- Scalable vector and hence intrinsically Retina ready可伸缩矢量，因此具有视网膜固有的功能
- Easy styling of color/size/effects in CSS在CSS中轻松设置颜色/大小/效果的样式
- SVG icons are “light-weight” (the heart icon from my examples has only 189 bytes not gzipped)SVG图标是“轻量级的”(示例中的心脏图标只有189字节未压缩)
- It’s text so it can be gzipped up to 95% 它是文本，因此可以压缩到95％
- Power of SVG filter effects SVG滤镜效果的力量
- XML like structure类似于XML的结构
- We can have multi-colored icons我们可以有多种颜色的图标
- We can make use of isolated styles and media queries我们可以利用孤立的样式和媒体查询
- We can make use of isolated animations with SMIL, CSS or JS我们可以通过SMIL，CSS或JS使用孤立的动画
- Supported by all major modern browsers受所有主要的现代浏览器支持
Iconmelon项目(The Iconmelon project)
As you have seen, using SVGs in your web project gives you a lot of possibilities but it would be great to have some kind of boilerplate for the icons itself, the filters and the CSS. So, I’ve been working on a free and open project called Iconmelon which aims to collect free SVG icon sets and provide a filter and CSS boilerplate. You can create your icon sets and download all the needed files and also submit your own graphics.
如您所见，在您的Web项目中使用SVG可以为您提供很多可能性，但是对图标本身，过滤器和CSS进行一些样板化将是很棒的。 因此，我一直在从事一个名为Iconmelon的免费开放项目，该项目旨在收集免费的SVG图标集并提供过滤器和CSS样板。 您可以创建图标集并下载所有需要的文件，还可以提交自己的图形。
It’s a brand new project so if you see any issues or have any feedback please let me know. Please also check out the support us page to see how you can help it grow.
这是一个全新的项目，因此，如果您发现任何问题或有任何反馈，请告诉我。 还请查看“支持我们”页面，以了解如何帮助其发展。
谢谢！ (Thanks!)
I’ve spent quite some time playing with SVG, so if you have any questions don’t hesitate to ask me. I’m waiting for your feedback in the comments. Cheers!
我已经花了很多时间来玩SVG，因此，如果您有任何疑问，请随时询问我。 我正在等待您在评论中的反馈。 干杯!
把svg图标制作成字体图标