一、SVG
概述:
SVG (Scalable Vector Graphics,
可伸缩矢量图形)
是W<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3C</chmetcnv>
推出的一种开放标准的文本式矢量图形描述语言,
他是基于XML
的、专门为网络而设计的图像格式。SVG
是一种采用XML
来描述二维图形的语言, SVG
图形可以是动态的、可交互性的,
使用SVG
可以在网页上显示出各种各样的高质量的矢量图形。
今后的网络上将会有更多标准格式的图形文件存在:GIF,JPEG,PNG,SVG.....
之所以这么说,是因为SVG
标准是由众多厂商和W<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3C</chmetcnv>
共同制定的,目的就是为了要在网络上创建一种新的、大家认同的、可扩展的、开放的图形格式。
二、SVG
的特点:
1.SVG
是一种矢量图像
矢量图像利用点和线等矢量化的数据描述图像,并在图形中包含色彩和位置信息。其最大的优点就是图像的任意缩放对分辨率没有影响,或者说,在矢量图中分辨率的概念是模糊的。并且,矢量图在显示和输出等过程中,与设备的分辨率没有关系。
SVG
作为矢量图像格式,除具有矢量图的优势外,对位图图像也能加以正确表达。
2.SVG
是基于xml
创建的
xml
是w<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3c</chmetcnv>
制定的网络开发语言,它的功能远远超过现行的html
语言。xml
语言具有比html
语言更好的管理和交互功能。xml
将网站的内容和框架完全分离,通过定义结构数据类型,网站用户能够自主的利用客户端程序显示和处理数据,具备很好的扩展能力。
SVG
的语法和结构基于xml
,因此同样具备很好的扩展性。
3.SVG
支持矢量滤镜
比较矢量图像和位图图像,可以发现位图图像能够使用大量的滤镜效果、纹理贴图和空间幻影等特效以加强图像的视觉效果。这是位图图像为广大设计师所采纳的重要原因之一。随着SVG
矢量图像格式的出现,这种局面发生了变化,利用SVG
支持的矢量滤镜,可以创作出各种滤镜效果,并且更重要的这些滤镜效果在出现后是可调整的。分析中可以发现SVG
所使用矢量滤镜并不直接针对像素进行操作,而是作为对象的一个独立属性存在于文本中。对图像效果的修改仅仅是调整图像的这一属性。SVG
对矢量滤镜的支持为远程协作和再次开发提供了空间。
4.SVG
沿用的是文本格式
SVG
文件格式是文本的。SVG
图像和动画具有以下文本格式所具备的特点:
(1)SVG
图像中的文字也是文本格式
这一特征完全区别与目前图像和动画中的“文字”,准确地讲,目前图像和动画中的文字实质上都是图像。根据这一特征,SVG
中的文字可以作为关键词被网络搜索引擎所搜寻,并可藉此制作非常高效的图像搜索引擎。用户通过搜索SVG
图像所提供的关键词能够搜寻到相关SVG
图像。
(2)SVG
图像可由程序语言动态生成
例如可以利用JavaScript
、Perl
、java
等程序语言开发出动画生成系统等。这一特性对于数据库制表是非常有用的,在线SVG
图像可根据数据库中关系量实时地进行动态改变。
(3)SVG
完全支持DOM(
文档对象模型)
DOM(Document Object Model,
文档对象模型)
是一种文档平台,她把文档看成是由一系列元素组成的节点树,允许程序或脚本动态的存储或上传文件的内容、结构或样式。
利用为SVG
定义的DOM
,通过脚本语句可以很方便的做出SVG
动画。SVG
以及SVG
中的对象可以通过脚本语言接受外部事件的驱动,例如鼠标动作(OnClick)
、键盘动作等实现对自身或对其他物件、图形的控制,制作交互式的图像和动画。
(4)SVG
跨平台作业
因为SVG
图像是纯文本格式,因此不受操作平台的限制,并可以很好的解决相关的外部输出、色彩模式、网络带宽等一系列问题。
(5)
可二次编辑性
跟同为矢量图像的flash
格式相比,此点表现得尤为突出。SWF
是flash
的输出文件格式,作为最终的动画生成格式,其创作过程封装在SWF
中,无法进行二次编辑,flash
一旦输出成SWF
文件就无法修改了,除非你拥有原始的fla
文件。这一点虽说在知识产权保护方面很有意义,但对于资源的更新和利用就显得不方便了。对于SVG
来说,因为它是一种文本格式,具有与html
类似的结构和语法,只需利用记事本就可打开并进行编辑。
三、SVG
的应用
(1)
网络发展的需要,与其它开放标准兼容
SVG
是网络中解决矢量图像的工业标准。作为w<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3c</chmetcnv>
的推荐格式,SVG
与现有的其他开放标准有很好的兼容性。这些标准包括dom1
,dom2
,css
,xml
,xsl
,smil
,html
,xhtml
等。相比较目前现有的网络图像格式如gif
,jpeg
,SWF
等,SVG
更适合网络发展的需求,开发和应用SVG
意味着获得一个更优秀的工具和方法。
(2)
数据表格,图像地图
在应用领域,SVG
可以非常适宜的应用在数据表格和图像地图中。在SVG
的源文件中,通过变量可以很方便的控制需要的图形生成。这就为网络图形数据表格提供了很大的应用前景。
制作图形地图同样是SVG
的一大优势。由于SVG
是矢量格式,图像可以在任何显示分辨率下获得同样的图像效果,文件放大观看是也不会有任何的品质损失,因而完全可以制作出包含地理信息和文字信息的图像地图,而且还能具有交互性和搜索功能。
(3)
无线设备的需求
SVG
另一个非常诱人的应用前景就是开法设备的图形和动画。利用SVG
,只要在无线设备中安装一个文本解析器,就可以实现对SVG
文件的识别和显示;同时,因为是矢量的文本文件,文件的大小不会很大,非常适合无线产品的网络传输。SVG
还提供动画和多媒体编辑功能,所以可以支持二维的平面动画,支持声音文件和视频文件的播放。结合一些其他技术(smil),
就可以实现创建一个非常理想的多媒体无线终端解决方案。
(4)
图像搜索引擎
在SVG
图像中,信息是文本形式的,是开放形式的。文字独立于图形信息,这就为图像搜索和查询提供了可能。例如,在一个SVG
动画中,通过搜索某一个关键字,就可以在图像中查询到对应的信息。而这对于同样是矢量图像和动画格式的SWF
就不可能实现。依据SVG
的这种交互性,可以创建大型的图像搜索引擎。
(5)
可实现图形的web
发布
因为SVG
具有许多适于网络应用的功能特点,比如说开放性、可二次编辑性和良好的压缩质量,非常适于二维矢量图形文件的web
发布,成为研究的热点。比如《
基于SVG
的甲骨文网络平台的设计与实现
》、《
SVG
与建筑设计图的web
发布
》等。
(6)
动态生成图形
在服务器端,
从数据库中抽取更新的数据,
转换成XML
文档,
利用DOM
对文档进行解析,
形成SVG
文件。客户端浏览器利用SVG
插件实现对图像的浏览。比如《
基于SVG
的图像信息实时发布模式
》、《
基于XML - SVG
的图像动态更新与动画演播系统实现
》等。
四、总结
SVG
作为xml
的一种词汇表,具有xml
的许多优点,如良好的数据存储格式,可扩展性,高度结构化,便于网络传输等,具有无限的前途。但介于目前SVG
还没有得到浏览器的支持,用户还需下载专门的插件才能浏览。
分享到:
相关推荐
SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图形描述语言,他是基于XML 的、专门为网络而设计的图像格式。
针对煤矿图形系统传统实施方案的诸多不足,设计了一种基于SVG技术的煤矿综合自动化矢量图形系统。详细论述了SVG技术概念、优势及SVG格式文档解析方式。利用传统ASP.NET三层架构体系,对煤矿矢量图形系统整体架构进行...
用SVG技术实现基于Web的GIS-_NET教程,Web Service开发站长天空|虚拟主机资讯虚拟主机新闻虚拟主机动态。...SVG与UML图。 CAD文件转换为SVG文件的探讨 - SVG中国。 基于Batik的SVG应用 关于几何变换。
SVGcode 是一个渐进式 Web 应用程序,可让您将 JPG、PNG、GIF、WebP、AVIF 等光栅图像转换为 SVG 格式的矢量图形。它使用文件系统访问 API、异步剪贴板 API、文件处理 API 和窗口控件覆盖自定义
电力行业可用的SVG图--图标 包括:电力监控、电力设施、电力网厅、电力用户、电力组态图、应用容器、电力立杆、电力趋势
矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真...
SVG绘图技术文档,从初步的绘图,到精细绘图,都有详细描述,SVG绘图是矢量图,交互性较好
158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能.doc
网络图形标准svg的特征与实现.pdf 摘要:SVG(Scalable Vector ...本文介绍 SVG 的技术特点,实际应用和发展趋势。并结合实验室主页的制 作介绍 SVG图形的实现。 关键词:SVG,XML, 网络图形,矢量图形, 图形标准
SVG是基于XML标准的一种描述二维矢量图像的语言,对图形展现上有良好的可用性和适用性。基于SVG建立的图形展示系统,通过浏览器端以SVG为核心,建立动画引擎,驱动SVG的动画图像,实现工业控制数据实时显示、生产数据动态...
适合初学者参考,所使用了是GDI技术和SVG矢量图技术,使用的VS2012作为编译器,纯C#语言编写。
传统的B/S模式在系统中的运用存在一些缺陷,如页面刷新速度较慢、占据空间较...针对这个缺陷,文章引入了Ajax技术,利用这项技术将SVG转换成矢量图的形式,创建一种新型模式,满足系统的更高要求,操作起来也更加方便、简洁。
《SVG精髓(第2版)》通过实例透彻讲解了SVG(可缩放矢量图形)这种标记语言的规范及应用。作者从简单的SVG应用开始,带领读者逐步探索了SVG的复杂功能,包括滤镜、变换、渐变和模式。从应用层面看,本书涵盖了动画...
《SVG精髓(第2版)》通过实例透彻讲解了SVG(可缩放矢量图形)这种标记语言的规范及应用。作者从简单的SVG应用开始,带领读者逐步探索了SVG的复杂功能,包括滤镜、变换、渐变和模式。从应用层面看,本书涵盖了动画...
SVG 模板这个 repo 包含一个可编辑的 SVG 文件,其中包含空白的笔记本电脑... 药片: 外部:850 x 1220px 内部:750 x 950px 电话: 外部:440 x 900px 内部:400 x 700px使用的技术在 Inkscape 中创建的所有矢量图像。
本书详尽介绍了可缩放矢量图形(SVG)技术。SVG是一种标记语言,为大多数矢量绘图程序和交互式Web图形工具所使用。本书将带你详细了解SVG的功能,首先学习简单的SVG应用,如绘制线条,然后逐步探索复杂的特性,比如...
基于svg(可缩放矢量图形)的成像特性及其元素易操作等特性,使其用来显示煤矿设备运行状态及实时数值成为可能并效果很好,但在C/S模式程序中大多数语言操作svg文件都比较复杂,进而CeSharp的应用起到了关键作用,CefSharp...
为了以图形图像形式高效发布煤矿实时数据,提出将SVG技术应用到煤矿监控系统中,...该方案采用Ajax技术获取数据库服务器中的实时数据,并利用SVG技术构建直观、实时的远程监控矢量图形页面,实现了实时数据的加载及显示。
本套系统是基于SVG的雨量分析系统,实现的主要功能是对各地收集的雨量数据加以分析,并以SVG矢量图形方式进行显示,使用户能够更加直观地了解某一区域的历史雨量。雨量分析系统主要应用于防汛、水文等部门,通过对...