一篇文章带你了解SVG 图标-svg图标大全

[[356233]]

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

<!DOCTYPE html> 
<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>

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

四、总结

本文基于HTML基础，介绍了SVG 图标。什么是SVG图标，以及SVG图标的在实际的优势，如何在Web Apps中使用SVG图标，如何去自定义自己的SVG图标。每一个目录都通过案例分析，运行效果图的展示进行详细讲解。能够加深读者的印象。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。