文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章带你了解SVG 图标

2024-12-03 15:46

关注

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图标元素:

  1. "svg-icon.svg"

 

要放大或缩小SVG图标的大小,只需使用CSS width或height样式属性。

下面是添加了CSS Height Style属性的img元素示例:

  1. "svg-icon.svg" style="height:32px"

 

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

三、自定义SVG图标

有时可能需要创建自己的SVG图标。SVG图标只是包含在它自己的SVG文件中的SVG图像。

下面是一个非常简单的圆形图标,由SVG circle元素组成:

  1.  
  2.  
  3.      
  4.         "utf-8"
  5.         项目 
  6.      
  7.     "background-color: aqua;"
  8.         "http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  9.             "64" cy="64" r="64" style="fill: #00ccff;"
  10.              
  11.          
  12.      
  13.  

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

 

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

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

  1. "http://www.w3.org/2000/svg" 
  2.         xmlns:xlink="http://www.w3.org/1999/xlink"
  3.     "32" cy="32" r="64" style="fill: #00ccff;"
  4.  

 

注:

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

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

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

只想显示SVG画布的包含圆圈图标的部分。该区域从点0,0延伸到点128,128(圆的半径为64,以64,64为中心)。使用SVG Viewbox属性,可以指定只渲染SVG画布的这一区域。

下面是设置了Viewbox值的SVG圆图标的外观。

  1. "http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"
  2.             "16" cy="16" r="16" style="fill: #00ccff;"
  3.              
  4.          
  5.         "http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"
  6.             "32" cy="32" r="32" style="fill: #00ccff;"
  7.              
  8.          
  9.         "http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"
  10.             "48" cy="48" r="48" style="fill: #00ccff;"
  11.              
  12.          

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

 

四、总结

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

 

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

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

 

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯