一篇文章带您了解SVG图标

SVG图标是在Web应用程序或移动应用程序中用作图标或图像按钮的SVG图像。SVG图标也可用于徽标。这篇文章解释了如何创建您自己的SVG图标，以及您可以从哪里下载高质量的预制SVG图标。一、SVG图标的优点使用SVG图标的优点：1.图标可以很容易地按比例放大和缩小，这取决于它们在应用程序中的显示位置和显示应用程序的屏幕大小。2.SVG图标相对于位图图形的优势在于，它们在按比例放大或缩小时看起来仍然不错。3.位图图形在放大时往往会像素化，而在缩小时会失去质量（像素）。2.在Web应用程序中使用SVG图标如在Web浏览器中显示SVG中所述，有多种方法可以在Web浏览器中将SVG显示为HTML页面的一部分。但是，在显示SVG图标时，最简单的方法是使用HTML的img元素来显示图标，这样可以方便地缩放SVG图标的大小。这是显示SVG图标元素的img：要放大或缩小SVG图标的大小，只需使用CSS宽度或高度样式属性。下面是添加了CSS高度样式属性的img元素示例：应该只是宽度或高度之一-而不是两者。当仅设置其中一个属性的宽度时，浏览器将沿另一个轴相应地缩放SVG图标，以便SVG图标保持其纵横比。3.自定义SVG图标有时您可能需要创建自己的SVG图标。SVG图标只是包含在其自己的SVG文件中的SVG图像。这是一个非常简单的圆形图标，由SVG圆形元素组成：SVG图标和img元素一起显示：但是，当这个SVG图标使用img元素显示，img元素的大小会缩放，SVG图标不会缩放。相反，或多或少显示了SVG画布。下面是将imgCSS高度属性设置为32。注意：如何只显示圆的一部分而不是缩小整个圆.出现此问题的原因是SVG图像文件缺少一些信息。必须为SVGviewBox属性设置一个值。SVGviewBox属性指定应显示多少SVG画布（在X和Y方向）。如何仅显示包含圆形图标的SVG画布部分？只想显示包含圆形图标的SVG画布部分。该区域从点0,0延伸到点128,128（以64,64为中心的半径为64的圆）。使用SVGViewbox属性，可以指定只渲染SVG画布的这个区域。这是设置了Viewbox值的SVG圆形图标的样子。这是显示的SVG图标，高度为16、32和48像素：四、摘要本文介绍基于HTML基础知识的SVG图标。什么是SVG图标，以及SVG图标的实用优势，如何在WebApps中使用SVG图标，以及如何自定义自己的SVG图标。每个目录都通过案例分析和运行效果图展示进行了详细的讲解。可以加深读者的印象。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。