SVG 图标

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

SVG图标的优势

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

在Web Apps中使用SVG图标

如在Web浏览器中显示SVG所述，有几种方法可以在Web浏览器中显示SVG，作为HTML页面的一部分。 但是，在显示SVG图标时，使用HTML的img元素来显示图标是最容易的，HTML img元素可以轻松地放大和缩小SVG图标的大小。

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

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

要放大或缩小SVG图标的大小，只需使用CSS width或height样式属性。下面是添加了CSS Height Style属性的img元素示例：

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

要在放大或缩小SVG图标时保持其长宽比，应仅为其中一个width 或height - 而不能同时设置这两个值。 当仅设置其中一个属性的宽度时，浏览器将沿另一个轴相应缩放SVG图标，以便SVG图标保持其纵横比。

创建自己的SVG图标

有时您可能需要创建自己的SVG图标。SVG图标只是包含在它自己的SVG文件中的SVG图像。下面是一个非常简单的圆形图标，由SVG circle元素组成：

<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>

下面是此SVG图标与img元素一起显示时的外观：

但是，当您使用img元素显示此SVG图标，并放大和缩小img元素的大小时，SVG图标不会放大或缩小。 相反，或多或少会显示SVG画布。 下面是将img CSS Height属性设置为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像素：