SVG是一种图像文件格式,目的在于改善网页上头图片的品质,这种格式的文件可以包含渐层、动画、自型的处理及一些特效等功能,让网页的图片可以“活”起来,不再只是单纯的图片而已,并且其有取代“动态GIF”文件的架式呢。当您安装之后,可以先连上Adobe的SVG测试网页,看看是否真的可以使用了,如您看到如上面标题旁的时钟图,就表示您的浏览器可以观看SVG格式了。
中文名可变动的向量绘图形文件
Scalable Vector Graphics
转换方法
转换为 SVG 图标代码 svgsus 工具可以转换种代码格式,包括:Web, iOS, OS X, Android 等。使用方法也超简单:
方法1:单击你需要用的图标,然后在编辑器上 Ctrl + V 即可粘贴代码。
方法2:直接拖动图标到编辑器
方法3:这个有点帅,直接在拖动图标时,经过 svgsus 界面,再拖入编辑器里,就可以生成代码了,请看帅气的 DEMO 吧!
1.基于XML
为了保证网络图像能够顺利地和目前已经由W3C开发的DOM1,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图像文件可以像HT札网页一样有着很好的可读X。当用户用图像工具输出SVG后,可以用任何文字处理工具打开SVG图像,并可看到用来描述图像的文本代码。掌握了SVG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。
SVG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果,但却仍然是以文本的形式存在的,可以选择复制、粘贴。由于SVG内的文字都以文本的形式出现在XML文件中, 这些信息可以为搜索引擎所用,而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人,可以通过其他方式(如声音)来传送这些信息。
SVG on Minimo3.具有交互X和动态X
由于网络是动态的媒体,SVG要成为网络图像格式,必须要具有动态的特征,这也是区别于其它图像格式的一个重要特征。SVG是基于XML的,它提供无可匹敌的动态交互X。你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等),或通过脚本定义来达到高亮显示、声音、动画等效果。
4.完全支持DOM
DOM(Document Object Model文档物件模型)是一种文档平台,它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM, 因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动,例如鼠标动作,实现自身或对其他物件、图像的控制等。这也是电子文档应具备的优秀特X之一。
SVG较G I F、JPEG的优势
首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。SVG是一种矢量图形格式,GIF、JPEG是位图图像格式。有了两者的概念后,SVG较GIF、JPEG的优势显而易见。
SVG1.任意放缩
用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。
2.文本独立
SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。
3.较小文件
总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。
4.超强显示效果
SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨力和打印分辨力。
5.超级颜色控制
SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
6.交互X和智能化
由于SVG是基于XML的, 因而能制作出空前强大的动态交互图像。即SVG图像能对用户动作做出不同响应, 例如高亮、声效、特效、动画等。
相关信息
SVG查看工具Adobe SVG Viewer 3.03 下载http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe
参考资料
1.SVG简介·菜鸟教程
2.SVG简介·菜鸟教程
3.可直接转代码!超实用的免费SVG图标管理工具: SVGSUS·优设网
支付宝转账赞助
支付宝扫一扫赞助
微信转账赞助
微信扫一扫赞助