可缩放矢量图形
SVG logo.svg
扩展名.svg, .svgz
互联网媒体类型image/svg+xml[1][2]
开发者万维网联盟
初始版本2001年9月4日,​20年前​(2001-09-04
最新版本
1.1(第二版)[3]
2011年8月16日,​10年前​(2011-08-16[3]
格式类型矢量图形
延伸自XML
自由格式
网站w3.org/Graphics/SVG/
这张图片展示了位图和矢量图的分别。位图是由点构成的,矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状。SVG属于矢量图,因此能夠无级縮放,而不會產生馬賽克

可缩放矢量图形(英語:Scalable Vector Graphics,縮寫:SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准

SVG概述

SVG从1999年由一组加入W3C的公司启动开发,与之前1998年提交给W3C的标准(PGML英语Precision Graphics Markup LanguageVML)构成竞争。SVG从这两个格式吸取了经验。[4]

SVG允许3种图形物件类型:矢量图形栅格图像以及文本。图形物件——包括PNGJPEG这些栅格图像——能够被编组、设计、转换及整合进先前的渲染物件中。文本可以在任何适用于应用程序的XML命名空间之内,从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径英语Clipping pathAlpha通道、滤镜效果、模板对象以及可扩展性

SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

SVG格式具有以下优点:
  • 图像文件可读,易于修改和编辑(理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案)。
  • 与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格地说,应该是ECMAScript)脚本来控制SVG对象。
  • SVG图形格式可以方便的建立文字索引,从而实现基于内容的图像搜索
  • SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。[5]
  • SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。[6]
SVG格式具有以下缺点:
  • 如何和已经占有重要市场份额的矢量图形格式Adobe Animate(舊稱Adobe Flash)竞争的问题。事实上,Adobe Animate在Flash CC 2014版及以后的版本就都支持直接导出SVG文件了。[7]
  • SVG的本地运行环境下的厂家支持程度。
  • 由於原始的SVG檔是遵从XML语法,導致資料採用未壓縮的方式存放,因此相較於其他的矢量图形格式,同樣的檔案內容會比其他的檔案格式稍大。Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用。
  • 舊版的SVG Viewer無法正確顯示出使用新版SVG格式的矢量图形。

SVG Basic

SVG Basic又称SVGB,是英语「Scalable Vector Graphics, Basic Profile」的简写,可以翻译为「可缩放的矢量图形标准的基本版」。它是SVG的一个子集,而主要目标是为掌上电脑等高端移动设备提供矢量图形显示格式。

SVG Tiny

SVG Tiny又称SVGT,是英语「Scalable Vector Graphics, Tiny Profile」的简写,可以翻译为「可缩放的矢量图形标准的微型简化版本」。它也是SVG的一个子集,而主要目标是为手机等低端移动设备提供矢量图形显示格式。

SVG动画

主條目:

SVG主要支持以下几种显示对象:

  1. 矢量显示对象,基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等
  2. 嵌入式外部图像,包括PNGJPEG、SVG等
  3. 文字对象

SVG可以实现动态和交互功能。在DOM模型的基础上,SVG开发设计人员可以利用ECMAScript或者SMIL来进行时序控制或对象的操纵。SVG虽然是文本格式,但是SVG支持利用gzip压缩算法减少文件尺寸,压缩后的文件通常用被称为「SVGZ文件」。

标准制定开发历史