注意 :本页面含有需要
最新版本浏览器才能正确显示 的内容,詳見
瀏覽器更新 說明。
这张图片展示了位图和矢量图的分别。位图是由点构成的,矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状。SVG属于矢量图,因此能夠无级縮放,而不會產生馬賽克
可缩放矢量图形 (英語:Scalable Vector Graphics ,縮寫:SVG )是一种基于可扩展标记语言 (XML),用于描述二维矢量图形 的图形格式。SVG由W3C 制定,是一个开放标准 。
SVG概述
SVG由1998年成立的W3C SVG工作组启动开发,随着当年提交给W3C的六份标准提案而开展。
SVG允许3种图形物件类型:矢量图形 、栅格图像 以及文本。图形物件——包括PNG 、JPEG 这些栅格图像——能够被编组、设计、转换及整合进先前的渲染 物件中。文本可以在任何适用于应用程序的XML命名空间 之内,从而提高SVG图形的搜索能力和无障碍性 。SVG提供的功能集涵盖了嵌套转换、裁剪路径 、Alpha通道 、滤镜效果、模板对象以及可扩展性 。
SVG严格遵从XML 语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率 无关的矢量图形 格式。
优点
图像文件可读,易于修改和编辑(理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案)。
与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL 标准。另外,SVG文件还可嵌入JavaScript (严格地说,应该是ECMAScript )脚本来控制SVG对象。
SVG图形格式可以方便的建立文字索引,从而实现基于内容的图像搜索 。
SVG图形格式支持多种滤镜 和特殊效果,在不改变图像内容的前提下可以实现位图 格式中类似文字阴影的效果。[ 4]
SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。[ 5]
缺点
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技术细节
SVG主要支持以下几种显示对象:
矢量显示对象,基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等
嵌入式外部图像,包括PNG 、JPEG 、SVG等
文字对象
SVG可以实现动态和交互功能。在DOM 模型的基础上,SVG开发设计人员可以利用ECMAScript 或者SMIL 来进行时序控制或对象的操纵。SVG虽然是文本格式,但是SVG支持利用gzip 压缩算法减少文件尺寸,压缩后的文件通常用被称为「SVGZ 文件」。
开发历史
SVG由1998年成立的W3C SVG工作组启动开发,随着当年提交给W3C的六份标准提案应运而生:
当时工作组是由W3C的Chris Lilley领衔。
SVG 1.x
2001年9月4日,发布SVG 1.0。
2003年1月4日,发布SVG 1.1。
2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic。
2008年12月22日,發布SVG Tiny 1.2。[ 12]
2011年8月16日,發布SVG 1.1(第2版),成为W3C目前推荐的标准。[ 3]
SVG Tiny 1.2 Portable/Secure是SVG Tiny 1.2較安全的一個子集,於2020年7月29日作為IETF草案標準推出。[ 13]
SVG 2
SVG 2棄用了SVG 1.1不受所有瀏覽器支援的功能,並整合了HTML5 和Web開放字型格式 (WOFF)的新功能:[ 14]
SVG 2以WOFF取代了多個字體元素,像是glyph
和altGlyph
。
xml:space
屬性已被棄用,由CSS取而代之。
新增HTML5的功能,例如translate
和data-*
屬性。
SVG Tiny 1.2的文字處理功能在註釋中提及,但尚未在文本中正式化。[ 15] 雖然1.2版中的其他功能也是精心挑選的,[ 14] 但是整體而言,SVG 2並不是SVG tiny 1.2的超集 。
W3C目前仍正在研究制定SVG 2,SVG 2於2016年9月15日進入候選推薦階段,[ 16] 修訂版本於2018年8月7日和2018年10月4日發佈。[ 17] 最新草案則於2023年3月8日發佈。[ 18]
示例
示例SVG顯示
简单SVG图片,样如少女。
较为复杂但精细的SVG图片
SVG格式是XML 的一種,意即SVG文件其實只是普通的文本文件 ,用一般的文本編輯器便可查看或修改。
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns= "http://www.w3.org/2000/svg" version= "1.1"
width= "467" height= "462" >
<!-- This is the red square: -->
<rect x= "80" y= "60" width= "250" height= "250" rx= "20" fill= "red"
stroke= "black" stroke-width= "2px" />
<!-- This is the blue square: -->
<rect x= "140" y= "120" width= "250" height= "250" rx= "40" fill= "blue"
stroke= "black" stroke-width= "2px" fill-opacity= "0.7" />
<rect x= "180" y= "160" width= "250" height= "250" rx= "40" fill= "blue"
stroke= "green" stroke-width= "2px" fill-opacity= "0.7" />
</svg>
SVG显示
比较著名的SVG项目包括Mozilla SVG Project[ 19] ,KDE 的KSVG ,以及Amaya 等。
设计工具
能够设计SVG图形作品的软件工具包括開放源代碼 的Inkscape 、Scribus 和Karbon 等,還有專有的Adobe Illustrator 、Adobe Animate 和CorelDRAW 等。
另外也有开放源码、功能简单但容易操作、免安装的在线SVG设计工具,例如Svg-edit。[ 22]
对于移动设备,安卓 系统则可以使用Vector Ink。[ 23]
參見
参考文献
^ M Media Type registration for image/svg+xml . World Wide Web Consortium . 22 December 2008 [29 August 2010] . (原始内容存档 于2016-03-14).
^ XML Media Types, RFC 3023 . Internet Engineering Task Force : 24. January 2001 [29 August 2010] . (原始内容存档 于2011-08-22).
^ 3.0 3.1 3.2 Scalable Vector Graphics (SVG) 1.1 (Second Edition) . W3C.org. 2011-08-16 [2017-12-20 ] . (原始内容存档 于2019-03-29) (英语) .
^ <filter>-SVG . MDN Web Doc. 2016-12-21 [2017-12-20 ] . (原始内容存档 于2021-02-09) (英语) .
^ <a>-SVG . MDN Web Doc. 2017-06-15 [2017-12-20 ] . (原始内容存档 于2021-01-08) (英语) .
^ Schematic Graphics . www.w3.org. [2022-07-29 ] . (原始内容存档 于2022-01-31).
^ Al-Shamma, Nabeel; Robert Ayers; Richard Cohn; Jon Ferraiolo; Martin Newell; Roger K. de Bry; Kevin McCluskey; Jerry Evans. Precision Graphics Markup Language (PGML) . W3C . 1998-04-10 [2009-05-08 ] . (原始内容存档 于2021-12-16).
^ Mathews, Brian; Brian Dister; John Bowler; Howard Cooper stein; Ajay Jindal; Tuan Nguyen; Peter Wu; Troy Sandal. Vector Markup Language (VML) . W3C . 1998-05-13 [2009-05-08 ] . (原始内容存档 于2021-11-06).
^ Hyper Graphics Markup Language (HGML) . www.w3.org. [2022-07-29 ] . (原始内容存档 于2022-04-07).
^ WebCGM Profile . xml.coverpages.org. [2022-07-29 ] . (原始内容存档 于2022-08-14).
^ Secret Origin of SVG . World Wide Web Consortium . 21 December 2007 [1 January 2011] . (原始内容存档 于2020-12-24).
^ Scalable Vector Graphics (SVG) Tiny 1.2 Specification, W3C Recommendation 22 December 2008 . [2014-05-29 ] . (原始内容存档 于2020-12-07).
^ Brotman, Alex; Adams, J. Trent. SVG Tiny Portable/Secure . Ietf Datatracker. 2020-07-29 [2021-02-09 ] . (原始内容存档 于2021-02-14).
^ 14.0 14.1 Appendix K: Changes from SVG 1.1 . World Wide Web Consortium. 2020-05-26 [2020-12-31 ] . (原始内容存档 于2021-02-04).
^ Chapter 11: Text . World Wide Web Consortium. 2020-05-26 [2020-12-31 ] . (原始内容存档 于2021-04-21).
^ Scalable Vector Graphics (SVG) 2 . World Wide Web Consortium. 2016-09-15 [2021-08-17 ] . (原始内容存档 于9 September 2021).
^ Scalable Vector Graphics (SVG) 2 . World Wide Web Consortium. 2018-10-04 [2021-08-17 ] . (原始内容存档 于19 July 2021).
^ Scalable Vector Graphics (SVG) 2, W3C Editor's Draft . [2013-11-24 ] . (原始内容存档 于2023-03-15).
^ Mozilla SVG Project . mozilla.org. (原始内容 存档于2011-02-17) (美国英语) .
^ Firefox 1.5 for developers - Mozilla | MDN . developer.mozilla.org. 2025-02-05 [2025-05-12 ] (美国英语) .
^ 微軟將加入W3C SVG工作小組 IE 9可望支援 即時新聞 iThome online . [2010-11-21 ] . (原始内容 存档于2010-01-11).
^ SVG-Edit/svgedit , SVG-Edit, 2025-05-12 [2025-05-12 ] , (原始内容存档 于2021-02-12)
^ Vector Ink: SVG, Illustrator - Google Play . play.google.com. [2025-05-12 ] (中文) .
外部链接