本文介绍了将SVG图标用于网页项目的优点，包括可缩放性、易于样式化、滤镜效果、交互性和浏览器支持。通过使用SVG，开发者可以实现多色图标、独立样式和媒体查询，甚至利用SMIL、CSS或JavaScript进行动画处理。SVG图标比图标字体更快，占用空间小，且在现代浏览器中得到良好支持。
把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.
最低0.47元/天 解锁文章
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
