SVG图标是SVG图像，用作Web应用程序或者移动应用程序内的图标或者图像按钮。 SVG图标也可以用于徽标。该SVG图标教程介绍了如何创建自己的SVG图标，以及在何处可以下载高质量的预制SVG图标。

SVG Icon的优势

对图标使用SVG的优点是，可以轻松地按比例放大和缩小图标，具体取决于我们要在应用程序中显示的位置以及显示该应用程序的屏幕尺寸。 SVG图标具有优于位图图形的优点，即按比例放大或者缩小时它们仍然看起来不错。位图图形在按比例放大时趋向于像素化，而在按比例缩小时趋于丢失质量(像素)。

免费的SVG图标

在开始制作自己的SVG图标之前，我们应该先看一下http://iconmonstr.com Iconmonstr.com上有越来越多的SVG图标，我们可以免费下载和使用！当我首次发现Iconmonstr.com时，该收藏集中包含约1.100个图标。在撰写本教程时，Iconmonstr.com包含超过2.800个图标。

在Web Apps中使用SVG图标

如在Web浏览器中显示SVG所述，有几种方法可以在Web浏览器中显示SVG(作为HTML页面的一部分)。然而，当显示SVG图标时，最简单的方法是使用imgHTML元素来显示图标。 HTML的img元素使我们可以轻松地缩放SVG图标的大小。

这是显示SVG图标的示例img元素：

<img src="svg-icon.svg">

要上下缩放SVG图标，只需使用CSS的width或者height属性即可。这是添加了CSSheight样式属性的img元素示例：

<img src="svg-icon.svg" style="height:32px">

为了在放大或者缩小SVG图标时保持其长宽比，我们应该仅为" width"或者" height"设置一个值，而不能同时为这两个设置。当仅为其中一个属性设置宽度时，浏览器将沿另一轴相应地缩放SVG图标，以便SVG图标保持其宽高比。

创建自己的SVG图标

有时我们可能需要创建自己的SVG图标。 SVG图标只是其自己的SVG文件中包含的SVG图像。这是一个非常简单的圆圈图标，由SVG圆圈元素组成：

<svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">

    <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

带有img元素显示时，此SVG图标的外观如下：

但是，当我们使用img元素显示此SVG图标并按比例放大和缩小img元素时，SVG图标不会放大或者缩小。而是显示或者多或者少的SVG画布。这是将imgCSSheight属性设置为32的示例：

请注意，如何仅显示圆圈的一部分，而不是按比例缩小整个圆圈。

引起此问题的原因是SVG图像文件缺少某些信息。我们必须为SVG viewBox属性设置一个值。 SVG的viewBox属性指定应显示多少SVG画布(在X和Y方向上)。

在我们的示例中，我们只想显示SVG画布的包含圆圈图标的部分。该区域从点0,0延伸到点128,128(圆的半径为64，并以64,64为中心)。使用SVG的viewBox属性，我们可以指定仅渲染SVG画布的该区域。这是设置了viewBox值的SVG圆圈图标的外观：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 128 128"
        >
    <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>

</svg>

这是显示的SVG图标，高度分别为32、48和64像素：