一篇文章带你了解SVG 图标-技术圈

点击上方“前端进阶学习交流”，进行关注

回复“前端”即可获赠前端相关学习资料

今

日

鸡

汤

半壁见海日，空中闻天鸡。

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

一、SVG图标的优势

图标使用SVG的优点：

1、可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸。

2、SVG图标具有优于位图图形的优点，即按比例放大或缩小时它们仍然看起来不错。

3、位图图形在按比例放大时趋于像素化，而在按比例缩小时会失去质量（像素）。

二、在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元素组成：

<html>    <head>        <meta charset="utf-8">        <title>项目title>    head>    <body style="background-color: aqua;">        <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>    body>html>

SVG图标与img元素一起显示时的效果图：

但是，当使用img元素显示此SVG图标，并放大和缩小img元素的大小时，SVG图标不会放大或缩小。相反，或多或少会显示SVG画布。

下面是将img CSS Height属性设置为32。

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

注：

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

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

如何只显示SVG画布的包含圆圈图标的部分？

只想显示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="16" cy="16" r="16" style="fill: #00ccff;">            circle>        svg>        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">            <circle cx="32" cy="32" r="32" style="fill: #00ccff;">            circle>        svg>        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">            <circle cx="48" cy="48" r="48" style="fill: #00ccff;">            circle>        svg>