工业标准的矢量图像格式----SVG
什么是SVG
SVG,是可任意放缩矢量图像格式(ScalableVectorGraphics)的简称。它基于XML(可扩展标识语言),是一个全新的标准开放 的矢量图像和动画格式。SVG不同于传统的二元(平面)图像和动画制作,它使用简单的一元(文本)语句,完成矢量图像,以及诸如色彩变化,对象运动,滤镜 和遮照,音效添加等各式动画效果。SVG创造一个利用纯文本完成网络多媒体的神话。
SVG的特点
矢量图像
图像通常分为矢量图像和位图图像。
矢量图像利用点和线等矢量化的数据描述图像,并在图形中包含色彩和位置信息。矢量图像的最大优点是"分辨率独立"。当显示或输出图像时,图像的品质不 受设备的分辨率影响,能够提供高清晰的画面。矢量图相对位图而言,更适合用于直接打印、印刷或输出到一些小型设备如手提装置上。放大和缩小矢量图不会影 响图像品质。
而位图图像则使用我们称为像素的一格一格的小点来描述图像。计算机的屏幕其实就是一张包含大量像素点的网格。位图图像受到分辨率的影响。因此常常出现图像边缘锯齿和放大后"马赛克"现象。相对而言,位图需要的存储空间要比矢量图更多。
SVG作为矢量图像格式,同样具备了矢量图的诸多优点,更适合在网络中传输和应用。SVG除了矢量图的优势,也同样保持了对位图图像的正确表达功能。使用XML中的XLINK(扩展链接)标签,SVG也可以在图像中调用位图图像。
矢量滤镜
虽然SVG图像做为矢量图格式,具有很多优点。但我们也看到,仍然有很多的图像设计师倾向于使用位图创作。这是因为位图常常可以使用大量的滤镜效果、纹理贴图和空间幻影等,加强图像的视觉效果。
但因为位图的创作是直接针对像素操作,所以,一旦完成效果的添加,设计师几乎无法再进行修改。例如,输出一幅雾化效果的位图图像,您已经无法再恢复原来清晰的图像。
而如果使用SVG支持的矢量滤镜,设计师同样可以创作出大量流行的和普遍的滤镜效果。并且,这样的滤镜效果是可调整的。因为SVG的矢量滤镜并不直接 针对像素进行操作,而是作为某一个对象的独立属性保存在文件中。修改图像效果只需要重新调整这些属性,就可以完成对滤镜的修改、替换和删除,非常的便捷。 SVG的矢量滤镜对于远程协作和二次编辑,提供了极大的自由度。
关于滤镜的实例,请参看<<SVG中文教程>>。
基于XML
SVG的语法和结构基于XML(可扩展标识语言)。XML是下一代的网络开发语言,它提供的功能远远超过了目前使用的HTML(超文本链接语言)。当 一个网站变得越来越复杂的同时,为了获得更好的管理和交互,网站开发者同样需要一个比HTML更优秀的网络开发语言和工具。这就是XML。
与HTML不同,XML完全分离了网站内容和网站构架。通过定义结构数据类型,用户端应用程序能够显示和处理,而不仅仅像HTML那样仅仅能显示,网 页或数据。例如,一个利用XML标签定义的电话号码,可以根据需要,由浏览器进行拨号。XML所具有优秀的扩展性,使得它在网络工业应用上,比HTML有 着更大的空间和前景。
SVG的开发和创作是基于XML的,因此,我们也能在SVG中开发出更多新的功能以提供更多的网络服务。例如,制作智能化的数据图像。图像中的数据可以根据需要,由应用程序读取、修改和统计并最终在图像中显示。这些应用是目前HTML及相关图像技术远不可及的。
文本格式
SVG文件是一元(文本)格式的。SVG图像和动画具有了以下文本格式所具备的特点:
1、作为基于文本的格式,SVG图像中的文字也是文本格式。这不同于现在图像和动画中的文字。目前图像和动画中的文字实质上都是图像。因此,SVG中 的文字可以被网络搜索引擎做为关键词搜寻。利用这一性质,通过SVG中定义的文字,就可以制作出非常高效的图像搜索引擎。图像中的文字也可以被用户浏览器 查找。
2、SVG图像可以方便的由程序语言来动态的生成。例如使用javascript,perl,Java等语言,开发自动图像和动画生成系统。这对于一些数据库制表是非常实用的。在线图像还可以根据后台数据库中的关系量实时的进行动态改变。
3、SVG完全支持DOM(文档物件模型)。因而SVG以及SVG中的对象可以通过脚本语言接受外部事件的驱动,例如鼠标动作、键盘动作等,实现对自身或对其他物件、图像的控制,制作交互式的图像和动画。
4、因为是文本格式,SVG可以很好的跨平台工作,同时,还可以解决相关的外部输出、色彩模式、网络带宽等问题。
简言之,文本格式使得SVG获得了与其它技术标准更大的交互和融合的特点。
与GIF,JPEG比较
GIF,JPEG都是目前网络普遍使用的位图格式。SVG较GIF和JPEG有很多独特的优势:
1、具有很高的图像品质。因为是矢量图像,分辨率独立,用户可以自由的放缩图像而不会破坏图像的清晰度。这对于查看某些图像细节例如数据图像中的数字,非常的有用。
2、图像中的文字独立。如上一小节所述,SVG图像中的文字独立于图像,可以进行文本编辑和查询。
3、较小文件尺寸。因为基于矢量格式,由语句完成图像的保存,SVG图像相比较GIF和JPEG具有更小的文件大小,下载更加迅速。
4、色彩适应性更强。SVG图像具有一个1600万色彩的调色板,支持ICC(国际色彩协会)色彩标准,支持RGB色彩模式。
5、可交互性。SVG基于XML,因而能轻易的制作强大的动态交互。SVG图像能对用户动作做出不同响应,例如高亮,声效,特效,动画等,体现了网络互动的本质。而GIF,JPEG都不可以产生交互。
与SWF比较
SWF文件格式是Flash的输出文件格式。从某种意义上,SWF与SVG有很多惊人的相似之处。但是,尽管Flash凭借其优越的表现形式和便利的 创作工具成为目前网络动画设计的首选,SWF日益在网络中普及,但我们也应该看到,与SVG相比较,SWF存在着以下的不足:
1、SWF是一个非开放标准。这就意味着该技术掌握在个体手中,技术的发展受到方方面面的限制。同时,SWF与其他的开放标准也没有完整的融合方案。 尽管SWF目前已经提供了对XML的支持,但这种支持是单方面的。随着XML及其他开放标准的发展,SWF的不协调性将日益显著。
2、SWF的可编辑性不如SVG。SWF做为最终的动画生成格式,其创作过程封装在SWF文件中,几乎无法再进行二次编辑。同时,SWF也不提供对文本格式的支持,因此,无法获得类似SVG的查询图像中文字的功能。
SVG的应用价值
网络发展的需要,与其他开放标准兼容
如同PNG作为W3C的位图图像工业标准,SVG是网络中解决矢量图像的工业标准.在SVG以前,除了Macromedia开发了SWF作为矢量的网 络文件格式,还没有其他的矢量文件在网络中应用.因为位图文件受到本身的很多局限,在图形印刷和传输中,矢量文件有很大的应用价值,所以,必定会有相应的 矢量标准得到开发和应用,这就是SVG.
作为W3C的推荐格式,SVG与现有的其他开放标准有很好的兼容性.这些标准包括DOM1,DOM2,CSS,XML,XPointer,XSLT, XSL,SMIL,HTML,XHTM等L.SVG与其他组织的标准化技术也能很好的协调一致,如ICC,URI,UNICODE,sRGB, ECMAScript/javascript,Java.
使用SVG并不意味着我们将从此放弃现在的网络图像技术如GIF,JPEG,SWF.相比较这些目前有普遍应用的文件格式,SVG更适合网络发展的需求,开发和应用SVG意味着获得一个更优秀的工具和方法.
数据表格,图像地图
在应用领域,SVG可以非常适宜的应用在数据表格和图像地图中.在SVG的源文件中,通过变量可以很方便的控制需要的图形生成.这就为网络图像数据表 格提供了很大的应用前景.一个简单的例子,现有的asp可以方便的构建动态数据网页,利用SVG,则可以同样方便的绘制动态数据图像,例如数据分析中的柱 状图和饼状图.
制作图像地图同样是SVG的一大优势.由于SVG是矢量格式,图像可以在任何显示分辨率下获得同样的图像效果,文件放大观看时也不会有任何的品质损 失,因而可以完全可以制作这样的图像地图,其中包含了一个城市所有的地理信息,文件可以根据观看这不同的需要,对不同的地区进行放大显示,同时,每一个地 理名词又可以独立的包含一段文字说明,或者包含相应的地理数据,但用户需要时,可以通过点击地理名词获得解释说明.这样的图像地图文件的文件大小也仅仅是 K字节级别.
无线设备的需求
SVG另一个非常诱人的应用前景就是开发无线设备的图形和动画.例如目前使用的手机产品,其图像主要是WBMP.这种格式因为是位图文件,受到传输大 小的限制,同时不提供彩色的色彩模式,所以显得很呆板.而如果利用SVG,只要在无线设备中安装一个文本解析器,就可以实现对SVG文件的识别和显示,同 时,因为是矢量的文本文件,文件的尺寸不会很大,非常适合无线产品的网络传输.SVG还提供动画和多媒体编辑功能,所以可以支持二维的平面动画,支持声音 文件和视频文件的播放.结合一些其他的技术,例如SMIL(多媒体同步整合语言),就可以实现创建一个非常理想的多媒体无线终端解决方案.
图像搜索引擎
不同于现在的二维图像,SVG是一个可实现交互和查询的文件格式.在SVG图像中,信息是一元代码形式的,是开放形式的.文字独立于图形信息.这就为 图像搜索和查询提供了可能.例如,在一个SVG动画中,通过搜索某一个关键字,就可以在图像中查询到对应的信息.而这对于同样是矢量图像和动画格式的 SWF就不可能实现.依据SVG的这种交互性,可以创建大型的图像搜索引擎.
网页设计思想的改变
采用SVG进行网页设计,是下一代的网页设计思想.现在的网页设计,通常是在位图图像软件中绘制好整体页面图像,然后进行图像切割,最后完成页面的文 字编辑.通常这样的工作是很繁琐的,进行二次修改也很不简便.而利用SVG,则可以实现页面图形设计和文字编辑的一步完成.如果要进行远程协作完成网页设 计,也只需要传输创作后的页面文件,而不必将所有的图像源文件和页面文件都传输.
因为SVG能够很好的与HTML和XML兼容,所以,下一代的网页编辑软件将开始结合图像创作功能.许多现在需要通过外部图像或动画软件创作的效果,将可以直接在网页编辑软件中完成.
结合SVG创作网页,将使网页设计师真正可以"画"出页面.
SVG的基本格式
与HTML相类似,基于XML的SVG,语法和格式也是结构化的。所谓结构化,也就是文件中的对象通过特定的元素标签定义,任何元素都可以作为对象进行管理,文件是框架式的。掌握基本的文件框架,就可以阅读、编辑和创作自己的文件。
SVG使用一组组的元素标签,创建和组织文件以及文件中的对象。每一个SVG文件都包含最外层的<svg></svg>标 签。该标签用于声明SVG文件的开始和结束。这等同于HTML文件中的HTML文件声明标签<html></html>。下面的 代码是一个通常的独立SVG文件的头部标识:
<?xmlversion="1.0"encoding="iso-8859-1"?>
<!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG20000303Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd";>
<svgxml:space="preserve"width="5.5in"height=".5in">
...
</svg>
其中,<?xmlversion="1.0"encoding="iso-8859-1"?>建立了"本文件基于XML1.0,编码方式是iso-8859-1"的基本信息。
<!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG20000303Stylable//EN""http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd";>
虽然很长,但只要理解,它是一个注释性的提示信息。它声明了文件定义类型(DTD)。文件定义类型(DTD)是一套用于定义元素、元素属性和制定如何形成文件的标准规则。根据特定的需要,DTD可以进行自定义。该行省略不影响SVG文件的生成。
<svgxml:space="preserve"width="5.5in"height=".5in">
...
</svg>用于声明SVG文件主体的开始和结束,同时也声明了图像容器的大小。图像容器也就是最后图形或动画的生成尺寸,相当于绘画中使用的画布。
SVG主体中的语法和格式定义,遵循XML标准。通过各类元素标签和标签对应的属性来描述SVG对象。SVG对象主要包括图形,路径和文本。关于 SVG的对象,请参看<<SVG实战讲义>>,其中给出了SVG创作基本图形,动画,文字的一些例子.
下面是一个调用mp3音乐的例子:
<?xmlversion="1.0"standalone="no"?>
<svgxmlns:a="http://www.adobe.com/svg10-extensions";
a:timeline="independent"width="100%"height="100%"viewBox="00620420">
<a:audioxlink:href="follow.mp3"volume="10"begin="0s"repeatDur="indefinite">
</a:audio>
</svg>
将上面的源代码粘贴到windwos的记事本,选择文件类型为所有文件,保存文件为*.svg(后缀名自己填写),同时在文件保存的文件夹中放置一个名为follow的mp3文件,如果您的浏览器安装有SVG播放器,就可以听见mp3音乐.
SVG创作工具
|
|
目前的SVG创作工具还处于开发和研制阶段,仍然没有一款非常成熟的包含静态,动态,交互功能创作的软件.这里介绍几个目前可以进行一些研究和测试的SVG创作软件.
Adobe Illustator
Adobe在SVG的开发中扮演了重要角色.Adobe Illustrator 9.0是较早的一款结合SVG功能的矢量创作软件.目前可以进行静态图形的创作和部分交互功能的实现.其交互功能需要手写javascript脚本.
创作AI图像后,选择File->Export(文件->输出),选择文件类型SVG,在SVG Option面板中设置相关属性,可以输出SVG文件,关于属性设置,请参看< |
分享到:
相关推荐
标题中的“工控用素材图片及动画svg-gif-png”表明这是一份与工业控制系统相关的图形素材资源包,包含了不同格式的图像和动画。这些素材可能被用于设计、编程或者展示工业设备的工作原理、控制流程等场景。下面将...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,其最大优点在于无论放大多少倍,图像都不会失真,这对于需要精确展示细节的工控设计尤为重要。SVG格式的图库允许用户进行二次编辑,可以轻松调整颜色...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它在WinCC中用于创建清晰、高分辨率的图形对象,尤其适用于在不同屏幕尺寸和分辨率下保持图像质量不变的情况。本文将详细介绍如何使用WinCC中的SVG...
不同于传统图像格式,SVG采用文本形式描述矢量图形,这不仅提高了图像的可读性和可编辑性,还使得SVG文件具有更好的搜索引擎优化性能。文本描述的特性让SVG图像即使在不支持图形渲染的环境中也能保留关键信息,便于...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它被广泛应用于Web图形设计、软件开发以及工业控制系统等领域。SVG图像可以无限放大而不失真,因为它们是由数学公式定义的线条和形状组成的,而不是...
在现代网页设计中,SVG(Scalable Vector Graphics)由于其矢量图特性,能够提供高质量、可缩放的图形,成为了一种流行的选择。然而,SVG图形与CSS和JavaScript的交互有时并不直观,这时就需要借助于插件来简化这一...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它以其可缩放性、清晰度和丰富的图形功能,在工控领域得到了广泛的应用。"csdn_svg.rar"这个压缩包文件,集合了工控图库大全,为自动化工程师提供了一...
例如,位图格式(如BMP、PNG)、压缩格式(如JPEG)、矢量格式(如SVG)等。 通过以上梳理,我们可以看出数字图像处理不仅是一项重要的技术,也是现代信息技术不可或缺的一部分。无论是科学研究还是日常生活中,...
矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真...
SVG与传统的栅格图像格式(如JPEG和PNG)相比,具有诸多优势,例如放大后不会失真、易于与Web标准集成以及适合复杂图形和动画的创建等。 SCADA(Supervisory Control And Data Acquisition)系统是用于数据采集与...
2. **矢量图形**:相比于位图图像,SVG可以无限放大而不失真,非常适合于动态和高分辨率的图形显示。 3. **文本格式**:SVG文件是以文本形式存储的,这使得它们更易于编辑和索引。 4. **高效传输**:由于SVG文件体积...
用来将Adobe PostScript, Encapsulated PostScript (EPS) 和 Acrobat Portable Document Format (PDF)格式的文件转换成工业标准的矢量或图像。目标文件格式支持矢量: SVG, WMF, EMF, CGM, MIF, EPS, DXF, HPGL;图像...
在实际操作中,由于微软Office 2013/2016在某些版本更新后可能不支持SVG和EPS这两种常见的矢量图格式,用户需要借助第三方软件,如Adobe Illustrator (AI),来处理这些格式的文件。首先,使用AI打开SVG或EPS文件,...
SVG是一种基于XML的矢量图像格式,支持无限级别的放大而不失真,非常适合用于创建复杂的图形和图表。在工控组态中,SVG图库能够确保无论是在大屏幕还是小屏幕上显示,都能保持清晰锐利。PNG是一种位图格式,支持透明...
SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、软件开发和工业控制等领域。在电力系统中,SVG有着特殊的应用,即静止无功发生器(Static Var Generator)。它是一种用于...
SVG图库GIF.rar中的SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式。与位图不同,SVG图像无论放大多少倍都不会失真,因为它们是通过数学公式定义的形状和路径。在工业控制图库中,SVG格式特别适合表示...
2. SVG(Scalable Vector Graphics):SVG是一种基于XML的矢量图像格式,它可以无损地缩放,无论放大多少倍,图像依然清晰。在嵌入式系统中,SVG因其小巧的文件大小和高效的渲染性能而受到青睐,特别是在需要高质量...
这些资源的多样性确保了用户可以根据需求选择最适合的图像格式。 位图文件在组态软件中有着重要应用,它们可以作为按钮、仪表盘、流程图等元素,通过编程实现与控制系统的互动。例如,一个触摸屏上的“启动”按钮,...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,广泛应用于Web设计和图形编程。在电力系统中,SVG也有特殊的含义,即Static Var Generator,静态无功发生器,用于改善电力系统的电压质量和稳定性。 ...