SVG是什么?SVG有什么用途?
一、SVG技术背景
SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准。它虽然是一种二维矢量图形格式,但其中可以包含矢量图形、光栅图像及文本等。这种新的图形格式不但拥有Web矢量图形的固有特性,更是结合了XML及其相关技术的所有优越性能。
W3C的开源SVG已成为全球图形技术的发展潮流,它将引领我们走向下一代互联网,我们需要了解、学习并掌握这种图形革新技术。
在 2003 年1月,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:Adobe、苹果、Auto Desk、Bit Flash、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(CCLRC)、Sun、Visio、施乐等,所以SVG不是一个私有格式,而是一个开放的标准。也就是说,它并不属于任何个体的专利,而是一个通过协作、共同开发的工业标准。正是因为这点,才使得SVG能够得到更迅速的开发和应用。
与其他图像格式相比,使用 SVG 的优势在于:
SVG 可被非常多的工具读取和修改(比如记事本),支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果,易于修改和编辑。
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG可以方便的建立文字索引,从而实现基于内容的图像搜索,图像中的文本是可选的,同时也是可搜索的(很适合制作地图)。
SVG 可与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格的说应该是ECMA Script)脚本来控制SVG对象,还可以与 Java 技术一起运行。
SVG 文件是纯粹的 XML。为了保证网络图像能够顺利地和目前已经由W3C开发的 D0M1,DOM2,CSS,XML,X Pointer,XSLT,XSL,SMIL,HTML,XHTML技术,以及其他标准化技术,如 ICC,URI,UNICODE,RGB,ECMA Script/JavaScript,Java协调一致,SVG是完全基于x M L(Extensible Markup Language可扩展置标语言),并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式,由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台X和可扩展X,从而在图形可重用X上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合,构成新的SVG图形。
SVG 图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户
可以说,SVG的出现带来了一次技术革命。利用SVG能够创建更加丰富多彩的信息可视化和交互性的应用,尤其是可以创建具有动态的、数据驱动的、交互式图形、图像。另外,由于是纯文本格式的.SVG比传统的图形、图像格式如GIF和JPEG占用更少的空间。因此,SVG更加适合有线带宽,并可提高下载速度。SVG和XML的开放式标准特性使其成为国际性语言。SVG标准得到了IBM、Adobe、Microsoft、Corel等几十家大公司的支持,其最新的版本是SVG 1.2。
总之,SVG技术的出现,变革了在Web上图文传递信息的方式,并将产生一种更适于Web信息发布的工作流模式,其中包括Web信息显示和印刷出版的组织方式。
二、SVG要素
2.1 SVG的图形对象使用XML,可以很方便地建立模型。对文本格式的语法来说,模型通常是建立在段落级和短语级,而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图像模型而不是独立的许多点。
SVG提供了一个通用的path元素,可以用来创建各种类型的图形对象,但同时也提供了一些基本的形状元素如矩形和椭圆等,这些基本形状对编写代码是非常方便的,也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制,图像对象的定义和变换都是在这个坐标系统之中。
2.2 SVG的符号SVG也能够提供一些像电子、绘画和流程图等使用的标准符号,但目前的版本并没有提供这些。
SVG允许用户创建和共享他们的符号库,设计者能够清楚地知道他们使用的符号的外在表现,而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用,也可以为了达到与其他的图形对象相互组合而进行重新定义样式。
2.3 SVG的展现效果许多Web中使用的图像都是依靠图形工具包来创建模糊、阴影、光线等效果的,要在客户端展现这些效果是不可思议的。
SVG可以单独地或以组合的方式对滤镜效果进行描述,这些效果可以用在客户端,当SVG图像展现的时候展现这些效果,而图像仍可以以图像的分辨率的进行缩放和显示。
2.4 SVG的文字丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。
大多数情况下,图像设计者为了防止图像上的被别人替换,往往会把文字转换成图像,原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后,在SVG中保留了文字元素,这样,文字和图像都被分别进行展现。
2.5 SVG的动画动画可以通过脚本语言操纵文档中元素来实现,但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益,共同在SVG中定义了动画元素,这样,在网页图形中常用的动画效果就可以在SVG中使用。
2.6 SVG的DOM
SVG DOM基于DOM规范。DOM是访问和维护XML文档的应用程序接口。它定义了文档的逻辑结构以及存取和维护文档的方法。在DOM的详细说明中,“文档” 指的是广泛意义的文档。现在XML可以把这样的数据表示为文档,并由DOM管理。利用DOM可以建立文档,遍历文档结构,还能增加、删除、修改文档元素和内容。SVG DOM遵循DOM1、DOM2规范的大部分内容,而且完全支持DOM2 Core规范,因此,SVG中的每个属性和样式都可以通过脚本编程来访问;另外,SVG也提供了一套扩展的DOM接口,通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图像的运动。
SVG是什么?SVG有什么用途?相关推荐
- svg载入html,SVG系列教程:SVG简介与嵌入HTML页面的方式
随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等 ...
- SVG 教程 (七)SVG 实例,SVG 参考手册
SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中. 谷歌Chrome,火狐,Internet Explorer9,和Safari都支持. 注意:下面的例子将不会在Opera运行 ...
- SVG 教程 (六)SVG 阴影,SVG 渐变 - 线性,SVG 渐变- 放射性
SVG 阴影 注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
- SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果
SVG <text> SVG 文本 - <text> <text> 元素用于定义文本. 实例 1 写一个文本: 下面是SVG代码: <svg xmlns=&q ...
- 图像转svg,及绘制svg图像
图像转svg 1:生成svg图 sudo apt install potrace pythonimport osdef t(img_path):"""img转svg方法: ...
- java svg png_java batik svg转png报错,球大神!!!在线等
报错内容:org.apache.batik.transcoder.TranscoderException:nullEnclosedException:Thecurrentdocumentisunabl ...
- 了解什么是SVG并使用SVG绘制圆,椭圆,矩形
一.了解SVG概念 SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图 HTML5支持内联SVG HTML<svg>元素是图形的容器 SVG有多种绘制路 ...
- svg标签和svg文件区别_SVGO减少SVG文件大小的三种方法
svg标签和svg文件区别 This article is part of a series created in partnership with SiteGround. Thank you for ...
- html流程svg动画,html5 svg动画
以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...
- html+引入svg矢量图,SVG 矢量图的加载
一.什么是 SVG SVG 是可缩放矢量图形,用户可以用代码来直接描绘图像.区别于 JPG 和 PNG 的需要用引擎来加载的图片,它直接用画布绘制,所以是无损失的. 二.SVG 的优点 SVG文件时纯 ...
最新文章
- void *指针的加减运算
- SQL数据库常见故障及解决方法
- poj 2728(最小比率生成树)
- Docker学习笔记_网上资源参考
- [转载] 微服务安全和治理
- 数组字符串那些经典算法:最大子序列和,最长递增子序列,最长公共子串,最长公共子序列,字符串编辑距离,最长不重复子串,最长回文子串 (转)...
- 初中计算机ps教程,初中信息技术《认识Photoshop CS2的工作界面》教案
- Google浏览器划词翻译
- c语言malloc(c语言malloc头文件)
- 如何取消计算机待机时间,如何更改电脑待机时间
- 狮子座与摩羯座 ---转载
- aid learning安装应用_aid learning安装python
- 欧洲城市之最:伦敦被评为欧洲最脏城市 巴黎最不友善
- logcat查询日志
- MIT 6.824涉及的部分论文翻译
- 使用veil进行木马生成
- 06.论Redis持久化的几种方式
- 2014年如何找到SEO流量的突破口
- bootstratreeview树形下拉框
- 微软免费的远程桌面管理工具,RDCMan——系统运维不可缺的软件
热门文章
- Unity il2cpp LinuxInterop_dlopen Error
- 如果你突然打了个喷嚏,那
- 深度学习在训练时对图片随机剪裁(random crop)
- win10怎么快捷锁定计算机,win10锁屏快捷键如何设置_让你win10电脑一键秒锁屏的方法...
- import.os 文件操作
- 使用远程virt-manager安装虚拟机的步骤
- oracle卸数的perl脚本,卸载cpan安装的所有perl模块
- ubuntu服务器网站备份,备份云服务器ubuntu系统
- android 实现按键精灵
- 【HDOJ 5654】 xiaoxin and his watermelon candy(离线+树状数组)