阿开 2021-03-21 21:07:49 15681 2 0 0 0

SVG图标 / 矢量图标介绍:一大串字符串,如何获取,如何使用

一直不会用图标,引用图片也没找到合适的。

后来知道有图标字体,但一直没时间学,偶尔看过几次,也没学明白。

今天学别人的网站做个模板,看到有这样用的图标:

<svg t="1616345676618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3042" width="200" height="200"><path d="M512 651.04l131.968 66.336-25.12-139.968 103.104-96.064-142.816-19.84L512 331.488l-67.136 130.016-142.816 19.84 103.104 96.064-25.12 139.936L512 651.072zM294.464 832l41.536-231.552L160 436.448l243.2-33.76L512 192l108.8 210.688 243.2 33.76-176 164L729.536 832 512 722.688 294.464 832z" fill="#8997B2" p-id="3043"></path></svg>

但有些图标不合适,而且要增加一些图标。

但去哪找这些图标,怎么生成这一大串字符,一点头脑也摸不着。。。

在网上搜了一圈也没找到方法,又在群里问了一圈,有人告诉我,用Ai生成的图标导出就能得出这种矢量图标。

但下载个AI还要买注册码激活才能用。。。。

想了想,这事应该不会这么麻烦。

于是又在网上搜了一下,网上有很多图标库。

我上的是阿里的图标库iconfont:https://www.iconfont.cn/

打开后图标下载页面,发现下面的下载按钮中就有【SVG下载】,还有【复制SVG代码】的按钮。

你可以点击【SVG下载】,直接下载图标,然后用记事本打开就,就看到SVG代码了。

也可以点击【复制SVG代码】,可以直接复制SVG代码,可以直接粘贴到网页代码中。

以前也下载过图标,但一直没注意这种有下载方式,原来这么简单!

找到一个His Icon的图标,颜色也比较浅,很适合页面:

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=29775

顺利下载,放到网页中,非常合适!

看着小巧,颜色也合适的图标,非常舒服。

其实一开始在网页中看到这些图标我还很烦,有的图标可能比较大,所以有时一大屏字符,代码显得太乱了!

但了解之后才知道,这种方式的好处。

SVG (可放缩的矢量图形)是 W3C (World Wide Web ConSortium 国际互联网标准组织)在 2000 年 8 月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。W3C 是作为一个国际X的工业联盟而创建的, 目的是领导整个互联网协作的发展和创新, 以实现科技的进步和共同发展。由于W3C联盟关于SVG的开发工作组的成员都是一些知名厂商, 如Adobe、苹果、Aut0De sk、Bit Fla sh、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(C C LRC)、S un、V i S i 0、施乐等,所以SVG不是一个私有格式,而是一个开放的标准。也就是说,它并不属于任何个体的专利,而是一个通过协作、共同开发的工业标准。正是因为这点,才使得SVG能够得到更迅速的开发和应用。

而且这种图标很以下特点:

  1.基于 XML

  为了保证网络图像能够顺利地和目前已经由W3C开发的D0M1,DOM2,CSS,XML,XPointer,XSLT,XSL,SMIL,HTML,XHTML技术,以及其他标准化技术,如ICC,URI,UNICODE,RGB,ECMAScr ipt/JavaScript,Java协调一致,SVG是完全基于x M L(EXtensibleMarkup Language可扩展置标语言), 并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台X和可扩展X,从而在图形可重用X上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。

  2.采用文本来描述对象

  SVG包括3种类型的对象: 矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换,并且修改其样式,也能够定义成预处理对象。

  与传统的图像格式不同的是,svG采用文本来描述矢量化的图形,这使得svG图像文件可以像HTML网页一样有着很好的可读性。当用户用图像工具输出svG后,可以用任何文字处理工具打开SVG图像,并可看到用来描述图像的文本代码。掌握了svG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。

  svG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果,但却仍然是以文本的形式存在的,可以选择复制、粘贴。由于SVG内的文字都以文本的形式出现在XML文件中, 这些信息可以为搜索引擎所用,而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人,可以通过其他方式(如声音)来传送这些信息。

  3.具有交互 X 和动态 X

  由于网络是动态的媒体,SVG要成为网络图像格式,必须要具有动态的特征,这也是区别于其它图像格式的一个重要特征。SVG是基于XML的,它提供无可匹敌的动态交互X。你可以在svG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等),或通过脚本定义来达到高亮显示、声音、动画等效果。

  4.完全支持 DOM

  D0M (Document Object Model文档物件模型)是一种文档平台,它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM, 因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动,例如鼠标动作,实现自身或对其他物件、图像的控制等。这也是电子文档应具备的优秀特X之一。

所以优势也很明显:

  首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。SVG是一种矢量图形格式,GIF、JPEG是位图图像格式。有了两者的概念后,SVG较GIF、JPEG的优势显而易见。

  1.任意放缩。

  用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。

  2.文本独立。

  SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。

  3.较小文件。

  总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。

  4.超强显示效果

  SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨力和打印分辨力。

  5.超级颜色控制。

  SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

  6.交互X和智能化。

  由于SVG是基于XML的, 因而能制作出空前强大的动态交互图像。即SVG图像能对用户动作做出不同响应, 例如高亮、声效、特效、动画等。

了解之后,才发现原来SVG矢量图标这么好,以后就用这个了,也不用学字体图标了!

对了,我上午还问了几个群,好多人不知道,看来这个确实还不是很常用,所以写一下,希望能帮助到需要的人。


Tag: 网站开发 矢量图标 SVG图标
我也要发一个   ·   返回首页   ·   返回[Html]   ·   前一个   ·   下一个
评论
阿开#1阿开 2021-03-22 00:42:58(N) 链接地址

  说点题外话:

  今天在几个群里问SVG图标怎么用,在哪里找。。。

  一个PHP技术交流群里有人直接说:出50块钱教我怎么弄。

  我感叹,这社会都这么现实了,张口就是钱,问个问题就是50块。。。

  ...

  现在尊重知识技术,提倡有偿服务,本也无可厚非。

  我也经常花钱找人做点东西,因为现在知识更新太快,你根本不可能什么都要自己会,什么都自己学自己做。那样太浪费时间和精力。

  而花点钱找专业懂行的人来做,省时省力,别人也劳有所得,属于各取所需,互惠互利,非常好的一件事。

  但我感觉这个有点贵,因为我的直觉告诉我:这个应该不难,应该就是一点就透的东西。

  因为这个不复杂,也不存在什么高深的技术,也不需要付出什么多大精力去搞定。

  只是因为自己没接触过,所以不懂。。。

  所以没有答应他。

  ...

  另外一个群里倒有人帮忙,说可以用AI自己生成,导出就可以了。

  但查了一下,下载AI软件想试一下,发现还要注册激活。。。

  而且想到即使安装了,还要自己画,那我自己哪画的好啊!

  感觉这不是正确的解决办法!

  于是我就又去搜,终于想到图标下载界面去看看,一看果然就是这么简单!

  ...

  那个群里还有人说他报价50够客气了,要我直接报价100。

  ...

  还有个朋友说,现在免费一般很难,而且现在的50块也就相当于2018年的10块钱,也不多。

  我说这个不难,下载就能得到,当时已经会下载了。

  那朋友还说:你那个应该是要高深技术的,所以人家才收费。

  ...

  好想对那朋友说,别在那混了,那群风气太差了。。。

  虽然群里都是陌生人,但也不能这样事事都讲钱吧,那这样的群也没啥意思了!

  ...

  真的,我不反对付费,对于自己不会的东西,花钱找人解决,互惠互利,是非常好的事。

  但我不喜欢被坑。

  对于这种简单的事,如果我遇到有人问我会直接告诉他,因为这不是多难的事。

  当然不能要求别人象自己一样,但也不能凭借自己会点东西就胡乱要价,

  当然这个价因人而异,但我觉得这个不值50,我觉得也就值10块钱,因为就是一句话点一下的事。

  那个朋友还说起2018年物价的事,还不如说上世纪90年代50块也就相当于3块,更不多了!

  ...

  对了,本不想说,但想想我不说名字也没人知道。

  那群里还有人加我好友,私聊我说30块就可以,我也没答应。

  唉,看来经济确实不好了,都这么着急挣钱了。还是被唯物洗脑太深,拜金拜物,金钱至上了!

  什么都要讲钱也可以理解了!

阿开#2阿开 2021-03-22 11:39:35(N) 链接地址

还是人家总结的简练:

SVG 的历史和优势

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比,使用 SVG 的优势在于:

  • SVG 可被非常多的工具读取和修改(比如记事本)
  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。

来源:https://www.w3school.com.cn/svg/svg_intro.asp

顶部     1/1 
欢迎评论
未登录,
请先 [ 注册 ] or [ 登录 ]
(一分钟即可完成注册!)
返回首页     ·   返回[Html]   ·   返回顶部