5.SVG图标
SVG图标是在Web应用或者移动应用中被用作图标或按钮的SVG图片。SVG图标也可以被用作logo。这篇SVG图标教程将会介绍如何创建自己的SVG图标，以及在哪里可以下载预先制作好的高质量的SVG图标。
SVG图标优点
使用SVG图标的优点是，图标可以很容易地按比例放大和缩小，具体取决于你要显示在应用程序的位置，以及显示应用程序的屏幕大小。相较于位图图形，SVG图标在放大或缩小时图片的质量还是很好。位图图形在放大时会变为像素化，并且在缩小时会失真。
免费的SVG图标
在开始制作自己的SVG图标之前，你应该看看http://iconmonstr.com。Iconmonstr.com上有越来越多的SVG图表集供你免费下载和使用。当我第一次发现Iconmonstr.com时，它已经包含大约1100个图标。在撰写本教程的时候，其图标数已经超过2800个。
在Web应用程序中使用SVG图标
就像在上一篇在Web浏览器中显示SVG中所提到的，有很多方式可以将SVG作为HTML页面的一部分来显示SVG。但是，当显示SVG图标时，最容易的方式是使用img元素来显示图标。使用img元素可以方便的放大和缩小SVG图标。
下面是使用img元素显示SVG图标的例子：
如果想放大和缩小SVG图标，只需要使用CSS的width或height样式属性。下面是一个添加了CSSheight样式属性的img元素示例：
在放大或缩小SVG图标时，为了保持它的比例，你只能设置width和height中的一个值。当仅为其中一个属性设置值时，浏览器将沿着另一个轴相应地缩放SVG图标，以使SVG图标保持其宽高比。
创建自己的SVG图标
有时你可能需要创建自己的SVG图标。SVG图标只是包含在SVG文件中的图片。下面是一个使用SVG circle元素制作的非常简单的圆形图标：
下面是使用img元素显示SVG图标的样子：
但是，当你使用img元素显示此SVG图标，并上下缩放时，SCG图标不会放大或缩小。相反，SVG画布或多或少会显示。下面是一个设置img元素CSSheight属性为32像素的例子：
注意，当缩小时，为什么只显示圆的一部分，而不是整个圆。
出现此问题的原因是SVG图片文件缺少某些信息。你必须为SVG viewBox属性设置一个值。SVGviewBox属性指定了SVG画布（在X和Y轴方向上）的大小。
在我们的示例中，我们只想显示包含圆形图标部分的SVG画布。该区域从0,0点延伸到128,128点（圆半径为64，并且以64,64为圆心）。使用SVGviewBox属性，我们可以指定只渲染SVG画布区域。下面是使用viewBox属性的SVG圆图标的样子：
以下是显示高度为32、48和64像素的SVG图标：
最后更新于
