跳转到内容

可縮放向量圖形:修订间差异

维基百科,自由的百科全书
删除的内容 添加的内容
InternetArchiveBot留言 | 贡献
补救1个来源,并将0个来源标记为失效。) #IABot (v2.0.9.5
 
(未显示21个用户的29个中间版本)
第1行: 第1行:
{{refimprove|time=2013-12-29T06:41:53+00:00}}
{{refimprove|time=2013-12-29T06:41:53+00:00}}
{{Expand language|de}}
{{BrowserUpdate}}
{{BrowserUpdate}}
{{noteTA|G1=IT}}
{{noteTA|G1=IT}}
第7行: 第8行:
| logo =
| logo =
| extension = <tt>.svg</tt>, <tt>.svgz</tt>
| extension = <tt>.svg</tt>, <tt>.svgz</tt>
| mime = image/svg+xml<ref>{{cite web|url=http://www.w3.org/TR/SVGMobile12/mimereg.html|title=M Media Type registration for image/svg+xml|publisher=[[World Wide Web Consortium]]|date=22 December 2008|accessdate=29 August 2010}}</ref><ref>{{cite web|url=http://tools.ietf.org/html/rfc3023#page-24|title=XML Media Types, RFC 3023|page=24|publisher=[[Internet Engineering Task Force]]|date=January 2001|accessdate=29 August 2010}}</ref>
| mime = image/svg+xml<ref>{{cite web|url=http://www.w3.org/TR/SVGMobile12/mimereg.html|title=M Media Type registration for image/svg+xml|publisher=[[World Wide Web Consortium]]|date=22 December 2008|accessdate=29 August 2010|archive-date=2016-03-14|archive-url=https://web.archive.org/web/20160314183016/http://www.w3.org/TR/SVGMobile12/mimereg.html|dead-url=no}}</ref><ref>{{cite web|url=http://tools.ietf.org/html/rfc3023#page-24|title=XML Media Types, RFC 3023|page=24|publisher=[[Internet Engineering Task Force]]|date=January 2001|accessdate=29 August 2010|archive-date=2011-08-22|archive-url=https://www.webcitation.org/617ELzbTm?url=http://tools.ietf.org/html/rfc3023#page-24|dead-url=no}}</ref>
| owner = [[万维网联盟]]
| owner = [[万维网联盟]]
| released = {{release date and age|2001|09|04}}
| released = {{release date and age|2001|09|04}}
| latest release version = 1.1(第二版)<ref name=SVG1.1SE>{{Cite Web|language=en|url=https://www.w3.org/TR/2011/REC-SVG11-20110816/|title=Scalable Vector Graphics (SVG) 1.1 (Second Edition)|website=W3C.org|date=2011-08-16|access-date=2017-12-20}}</ref>
| latest release version = 1.1(第二版)<ref name=SVG1.1SE>{{Cite Web|language=en|url=https://www.w3.org/TR/2011/REC-SVG11-20110816/|title=Scalable Vector Graphics (SVG) 1.1 (Second Edition)|website=W3C.org|date=2011-08-16|access-date=2017-12-20|archive-date=2019-03-29|archive-url=https://web.archive.org/web/20190329222056/https://www.w3.org/TR/2011/REC-SVG11-20110816/|dead-url=no}}</ref>
| latest release date = {{release date and age|2011|8|16}}<ref name=SVG1.1SE/>
| latest release date = {{release date and age|2011|8|16}}<ref name=SVG1.1SE/>
| genre = [[矢量图形]]
| genre = [[矢量图形]]
第21行: 第22行:
| url = [http://www.w3.org/Graphics/SVG/ w3.org/Graphics/SVG/]
| url = [http://www.w3.org/Graphics/SVG/ w3.org/Graphics/SVG/]
}}
}}
[[File:Bitmap VS SVG.svg|right|300px|thumb|这张图片展示了位图和矢量图的分别。位图是由点构成的,矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状。SVG属于矢量图,因此能夠无级縮放,而不會導致馬賽克]]
[[File:Bitmap VS SVG.svg||300px|缩略图|这张图片展示了位图和矢量图的分别。位图是由点构成的,矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状。SVG属于矢量图,因此能夠无级縮放,而不會產生[[馬賽克]]]]


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


== SVG概述 ==
== SVG概述 ==
SVG由1998年成立的W3C SVG工作组启动开发,随着当年提交给W3C的六份标准提案而开展。
SVG从1999年由一组加入W3C的公司启动开发,与之前1998年提交给W3C的标准({{link-en|PGML|Precision Graphics Markup Language}}、[[VML語言|VML]])构成竞争。SVG从这两个格式吸取了经验。<ref>{{cite web |url=http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG|title=Secret Origin of SVG|date=21 December 2007|publisher=[[World Wide Web Consortium]]|accessdate=1 January 2011}}</ref>


SVG允许3种图形物件类型:[[矢量图形]]、[[栅格图像]]以及文本。图形物件——包括[[PNG]]、[[JPEG]]这些栅格图像——能够被编组、设计<!-- styled -->、转换及整合进先前的[[渲染]]物件中。<!-- SVG does not directly support [[Z-index|z-indices]]<ref>{{cite web|url=http://www.w3.org/TR/2002/WD-SVG12-20021115/#drawingorder |title=Scalable Vector Graphics (SVG) 1.2 W3C Working Draft § 4.2-Drawing Order|publisher=World Wide Web Consortium|date=15 November 2002|accessdate=29 August 2010}}</ref> that separate drawing order from document order for overlapping objects, unlike some other vector markup languages like VML. -->文本可以在任何适用于应用程序的[[XML命名空间]]之内,从而提高SVG图形的搜索能力和[[無障礙環境|无障碍性]]。SVG提供的功能集涵盖了嵌套转换、{{link-en|裁剪路径|Clipping path}}、[[Alpha通道]]、滤镜效果、模板对象以及[[可扩展性]]。
SVG允许3种图形物件类型:[[矢量图形]]、[[栅格图像]]以及文本。图形物件——包括[[PNG]]、[[JPEG]]这些栅格图像——能够被编组、设计<!-- styled -->、转换及整合进先前的[[渲染]]物件中。<!-- SVG does not directly support [[Z-index|z-indices]]<ref>{{cite web|url=http://www.w3.org/TR/2002/WD-SVG12-20021115/#drawingorder |title=Scalable Vector Graphics (SVG) 1.2 W3C Working Draft § 4.2-Drawing Order|publisher=World Wide Web Consortium|date=15 November 2002|accessdate=29 August 2010}}</ref> that separate drawing order from document order for overlapping objects, unlike some other vector markup languages like VML. -->文本可以在任何适用于应用程序的[[XML命名空间]]之内,从而提高SVG图形的搜索能力和[[無障礙環境|无障碍性]]。SVG提供的功能集涵盖了嵌套转换、{{link-en|裁剪路径|Clipping path}}、[[Alpha通道]]、滤镜效果、模板对象以及[[可扩展性]]。
第33行: 第34行:


;SVG格式具有以下优点:
;SVG格式具有以下优点:
*图像文件可读,易于修改和编辑(理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案)
* 图像文件可读,易于修改和编辑(理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案)
*与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于[[同步多媒体集成语言|SMIL]]标准。另外,SVG文件还可嵌入[[JavaScript]](严格地说,应该是[[ECMAScript]])脚本来控制SVG对象
* 与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于[[同步多媒体集成语言|SMIL]]标准。另外,SVG文件还可嵌入[[JavaScript]](严格地说,应该是[[ECMAScript]])脚本来控制SVG对象
*SVG图形格式可以方便的建立文字索引,从而实现[[基于内容的图像搜索]]
* SVG图形格式可以方便的建立文字索引,从而实现[[基于内容的图像搜索]]
*SVG图形格式支持多种[[滤镜]]和特殊效果,在不改变图像内容的前提下可以实现[[位图]]格式中类似文字阴影的效果。<ref>{{Cite Web|language=en|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter|title=<filter>-SVG|website=MDN Web Doc|date=2016-12-21|access-date=2017-12-20}}</ref>
* SVG图形格式支持多种[[滤镜]]和特殊效果,在不改变图像内容的前提下可以实现[[位图]]格式中类似文字阴影的效果。<ref>{{Cite Web|language=en|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter|title=<filter>-SVG|website=MDN Web Doc|date=2016-12-21|access-date=2017-12-20|archive-date=2021-02-09|archive-url=https://web.archive.org/web/20210209204451/https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter|dead-url=no}}</ref>
*SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。<ref>{{Cite Web|language=en|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a|title=<a>-SVG|website=MDN Web Doc|date=2017-06-15|access-date=2017-12-20}}</ref>
* SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。<ref>{{Cite Web|language=en|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a|title=<a>-SVG|website=MDN Web Doc|date=2017-06-15|access-date=2017-12-20|archive-date=2021-01-08|archive-url=https://web.archive.org/web/20210108201447/https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a|dead-url=no}}</ref>


;SVG格式具有以下缺点:
;SVG格式具有以下缺点:
*如何和已经占有重要市场份额的矢量图形格式[[Adobe Animate]]竞争的问题。事实上,[[Adobe Animate]]在Flash CC 2014版及以后的版本就都支持直接导出SVG文件。<ref>{{Cite Web|language=en|url=https://helpx.adobe.com/flash/using/whats-new-2014.html|title=New features summary - 2014|website=Adobe|access-date=2017-12-20}}</ref>
* 如何和已经占有重要市场份额的矢量图形格式[[Adobe Animate]](舊稱Adobe Flash)竞争的问题。事实上,[[Adobe Animate]]在Flash CC 2014版及以后的版本就都支持直接导出SVG文件。<ref>{{Cite Web|language=en|url=https://helpx.adobe.com/flash/using/whats-new-2014.html|title=New features summary - 2014|website=Adobe|access-date=2017-12-20|archive-date=2021-01-08|archive-url=https://web.archive.org/web/20210108113640/https://helpx.adobe.com/flash/using/whats-new-2014.html|dead-url=no}}</ref>
*SVG的本地运行环境下的厂家支持程度。
* SVG的本地运行环境下的厂家支持程度。
*由於原始的SVG檔是遵从[[XML]]语法,導致資料採用未壓縮的方式存放,因此相較於其他的矢量图形格式,同樣的檔案內容會比其他的檔案格式稍大。[[Adobe]]因此使用[[gzip]]壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用。
* 由於原始的SVG檔是遵从[[XML]]语法,導致資料採用未壓縮的方式存放,因此相較於其他的矢量图形格式,同樣的檔案內容會比其他的檔案格式稍大。[[Adobe]]因此使用[[gzip]]壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用。
*舊版的SVG Viewer無法正確顯示出使用新版SVG格式的矢量图形。
* 舊版的SVG Viewer無法正確顯示出使用新版SVG格式的矢量图形。


=== SVG Basic ===
=== SVG Basic ===
第56行: 第57行:
== SVG技术细节 ==
== SVG技术细节 ==
SVG主要支持以下几种显示对象:
SVG主要支持以下几种显示对象:
#矢量显示对象,基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等
# 矢量显示对象,基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等
#嵌入式外部图像,包括[[PNG]]、[[JPEG]]、SVG等
# 嵌入式外部图像,包括[[PNG]]、[[JPEG]]、SVG等
#文字对象
# 文字对象


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


== 标准制定开发历史 ==
== 标准制定开发历史 ==
SVG由1998年成立的W3C SVG工作组启动开发,随着当年提交给W3C的六份标准提案应运而生:
*2001年9月4日,发布SVG 1.0。
* Web Schematics,来自CCLRC<ref>{{Cite web|url=https://www.w3.org/TR/1998/NOTE-WebSchematics-19980331/Overview.html|title=Schematic Graphics|website=www.w3.org|access-date=2022-07-29|archive-date=2022-01-31|archive-url=https://web.archive.org/web/20220131092629/https://www.w3.org/TR/1998/NOTE-WebSchematics-19980331/Overview.html|dead-url=no}}</ref>
*2003年1月4日,发布SVG 1.1。
* [[PGML]],来自[[Adobe Systems]]、[[IBM]]、[[网景]]和[[升阳电脑]]<ref>{{cite web|url=http://www.w3.org/TR/1998/NOTE-PGML-19980410|title=Precision Graphics Markup Language (PGML)|last=Al-Shamma|first=Nabeel|author2=Robert Ayers|author3=Richard Cohn|author4=Jon Ferraiolo|author5=Martin Newell|author6=Roger K. de Bry|author7=Kevin McCluskey|author8=Jerry Evans|date=1998-04-10|publisher=[[W3C]]|access-date=2009-05-08|archive-date=2021-12-16|archive-url=https://web.archive.org/web/20211216103314/http://www.w3.org/TR/1998/NOTE-PGML-19980410|dead-url=no}}</ref>
*2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic。
* [[矢量标记语言|VML]],来自[[Autodesk]]、[[惠普]]、[[Macromedia]]、[[微软]]和[[Vision Corporation|Vision]]<ref>{{cite web|url=http://www.w3.org/TR/1998/NOTE-VML-19980513|title=Vector Markup Language (VML)|last=Mathews|first=Brian|author2=Brian Dister|author3=John Bowler|author4=Howard Cooper stein|author5=Ajay Jindal|author6=Tuan Nguyen|author7=Peter Wu|author8=Troy Sandal|date=1998-05-13|publisher=[[W3C]]|access-date=2009-05-08|archive-date=2021-11-06|archive-url=https://web.archive.org/web/20211106095422/http://www.w3.org/TR/1998/NOTE-VML-19980513|dead-url=no}}</ref>
*2008年12月22日,發布SVG Tiny 1.2。<ref>[http://www.w3.org/TR/SVGTiny12/ Scalable Vector Graphics (SVG) Tiny 1.2 Specification, W3C Recommendation 22 December 2008]</ref>
* Hyper Graphics Markup Language (HGML),来自[[Orange UK]]和[[普利茅斯大学]]<ref>{{Cite web|url=https://www.w3.org/TR/NOTE-HGML.html|title=Hyper Graphics Markup Language (HGML)|website=www.w3.org|access-date=2022-07-29|archive-date=2022-04-07|archive-url=https://web.archive.org/web/20220407205727/https://www.w3.org/TR/NOTE-HGML.html|dead-url=no}}</ref>
*2011年8月16日,發布SVG 1.1(第2版),成为W3C目前推荐的标准。<ref name=SVG1.1SE/>
* [[CGM|WebCGM]],来自[[波音]]、InterCAP Graphics Systems、Inso Corporation、CCLRC和[[施乐]]<ref>{{Cite web|url=http://xml.coverpages.org/NOTE-WebCGM-19981104.html|title=WebCGM Profile|website=xml.coverpages.org|access-date=2022-07-29|archive-date=2022-08-14|archive-url=https://web.archive.org/web/20220814185152/http://xml.coverpages.org/NOTE-WebCGM-19981104.html|dead-url=no}}</ref>
*W3C目前仍正在研究制定SVG 2,目前最新的草稿發布见[https://svgwg.org/svg2-draft/ 此]。<ref>[https://svgwg.org/svg2-draft/ Scalable Vector Graphics (SVG) 2, W3C Editor's Draft]</ref>
* DrawML,来自Excosoft AB<ref name="secretOrigin">{{cite web|url=http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG|title=Secret Origin of SVG|date=21 December 2007|publisher=[[World Wide Web Consortium]]|access-date=1 January 2011|archive-date=2020-12-24|archive-url=https://web.archive.org/web/20201224201644/https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG|dead-url=no}}</ref>
当时工作组是由W3C的Chris Lilley领衔。

* 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。<ref>{{Cite web |url=http://www.w3.org/TR/SVGTiny12/ |title=Scalable Vector Graphics (SVG) Tiny 1.2 Specification, W3C Recommendation 22 December 2008 |accessdate=2014-05-29 |archive-date=2020-12-07 |archive-url=https://web.archive.org/web/20201207093148/https://www.w3.org/TR/SVGTiny12/ |dead-url=no }}</ref>
* 2011年8月16日,發布SVG 1.1(第2版),成为W3C目前推荐的标准。<ref name=SVG1.1SE/>
* W3C目前仍正在研究制定SVG 2,目前最新的草稿發布见[https://svgwg.org/svg2-draft/ 此] {{Wayback|url=https://svgwg.org/svg2-draft/ |date=20210210184527 }}。<ref>{{Cite web |url=https://svgwg.org/svg2-draft/ |title=Scalable Vector Graphics (SVG) 2, W3C Editor's Draft |access-date=2013-11-24 |archive-date=2021-02-10 |archive-url=https://web.archive.org/web/20210210184527/https://svgwg.org/svg2-draft/ |dead-url=no }}</ref>


== 示例 ==
== 示例 ==
第76行: 第86行:
File:Mahuri.svg|较为复杂但精细的SVG图片
File:Mahuri.svg|较为复杂但精细的SVG图片
</gallery>
</gallery>
SVG格式是[[XML]]的一種,SVG文件其實只是普通的[[文本文件]],用一般的文本編輯器便可查看或修改。
SVG格式是[[XML]]的一種,意即SVG文件其實只是普通的[[文本文件]],用一般的文本編輯器便可查看或修改。


<source lang="xml">
<syntaxhighlight lang="xml">
<?xml version="1.0"?>
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
第90行: 第100行:
<rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
<rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
stroke="black" stroke-width="2px" fill-opacity="0.7" />
stroke="black" stroke-width="2px" fill-opacity="0.7" />
<rect x="180" y="160" width="250" height="250" rx="40" fill="blue"
<rect x="180" y="160" width="250" height="250" rx="40" fill="blue"
stroke="green" stroke-width="2px" fill-opacity="0.7" />
stroke="green" stroke-width="2px" fill-opacity="0.7" />
</svg>
</svg>
</syntaxhighlight>
</source>


== SVG显示 ==
== SVG显示 ==


=== 插件支持 ===
=== 插件支持 ===
目前,最常用的SVG插件来自[[Adobe]]公司([http://www.adobe.com/svg/viewer/install/main.html Adobe SVG Viewer]),另外[[Corel]]也提供SVG浏览器([https://web.archive.org/web/20100214155447/http://www.corel.com/servlet/Satellite?pagename=Corel2%2FProducts%2FContent&pid=1047023276653&cid=1047023286996 Corel SVG Viewer])。然而前者宣布于2009年1月1日停止对该产品的支持。
目前,最常用的SVG插件来自[[Adobe]]公司([http://www.adobe.com/svg/viewer/install/main.html Adobe SVG Viewer] {{Wayback|url=http://www.adobe.com/svg/viewer/install/main.html |date=20121016160722 }}),另外[[Corel]]也提供SVG浏览器([https://web.archive.org/web/20100214155447/http://www.corel.com/servlet/Satellite?pagename=Corel2%2FProducts%2FContent&pid=1047023276653&cid=1047023286996 Corel SVG Viewer])。然而前者宣布于2009年1月1日停止对该产品的支持。


=== 原生支持 ===
=== 原生支持 ===
*比较著名的SVG项目包括[http://www.mozilla.org/projects/svg/ Mozilla SVG Project],[[KDE]]的[[KSVG]],以及[[Amaya]]等。
* 比较著名的SVG项目包括[http://www.mozilla.org/projects/svg/ Mozilla SVG Project] {{Wayback|url=http://www.mozilla.org/projects/svg/ |date=20110217090831 }},[[KDE]]的[[KSVG]],以及[[Amaya]]等。
* [[Mozilla Firefox]]自版本1.5发行后,即开始[http://developer.mozilla.org/en/docs/SVG_in_Firefox_1.5 支援SVG格式的显示]。
* [[Mozilla Firefox]]自版本1.5发行后,即开始[http://developer.mozilla.org/en/docs/SVG_in_Firefox_1.5 支援SVG格式的显示] {{Wayback|url=http://developer.mozilla.org/en/docs/SVG_in_Firefox_1.5 |date=20080514224757 }}
* [[Opera瀏覽器|Opera]] 8.0 版開始支援顯示Tiny 1.1规格的SVG。
* [[Opera電腦瀏覽器|Opera]] 8.0 版開始支援顯示Tiny 1.1规格的SVG。
* 基于[[Java]]的SVG项目主要有[[Batik SVG Toolkit]]等。
* 基于[[Java]]的SVG项目主要有[[Batik SVG Toolkit]]等。
* [[Google Chrome]]和[[Safari]]支持SVG显示。
* [[Google Chrome]]和[[Safari]]支持SVG显示。
* [[Microsoft]]的[[Internet Explorer]] [[Internet Explorer 8|8.0]]版及其更老的版本尚未支援SVG,直至由[[Internet Explorer]] [[Internet Explorer 9|9.0]]版開始支援SVG。<ref>[http://www.ithome.com.tw/itadm/article.php?c=59009 微軟將加入W3C SVG工作小組 IE 9可望支援 即時新聞 iThome online] {{webarchive|url=https://web.archive.org/web/20100111035135/http://www.ithome.com.tw/itadm/article.php?c=59009 |date=2010-01-11 }}</ref>
* [[Microsoft]]的[[Internet Explorer]] [[Internet Explorer 8|8.0]]版及其更老的版本尚未支援SVG,直至由[[Internet Explorer]] [[Internet Explorer 9|9.0]]版開始支援SVG。<ref>{{Cite web |url=http://www.ithome.com.tw/itadm/article.php?c=59009 |title=微軟將加入W3C SVG工作小組 IE 9可望支援 即時新聞 iThome online |accessdate=2010-11-21 |archive-date=2010-01-11 |archive-url=https://web.archive.org/web/20100111035135/http://www.ithome.com.tw/itadm/article.php?c=59009 |dead-url=yes }}</ref>


=== 各种SVG解释器支持程度比较 ===
=== 各种SVG解释器支持程度比较 ===
W3C的SVG网站上有一个[[测试套件]]可以用来测试SVG解释器对于标准的支持。这个套件既可以在线运行也可以下载到本地运行。截至2007年中,对于流行的SVG软件有如下测试结果:
W3C的SVG网站上有一个[[测试套件]]可以用来测试SVG解释器对于标准的支持。这个套件既可以在线运行也可以下载到本地运行。截至2007年中,对于流行的SVG软件有如下测试结果:
*对SVG支持最好的浏览器是[[Opera電腦瀏覽器|Opera]],它支持大多数的SVG特性。
* 对SVG支持最好的浏览器是[[Opera電腦瀏覽器|Opera]],它支持大多数的SVG特性。
*作为专门的SVG浏览器,[[Batik|Batik SVG viewer]]能对大多数特性有良好支持,与Opera不相伯仲。但它不能和浏览器互动。
* 作为专门的SVG浏览器,[[Batik|Batik SVG viewer]]能对大多数特性有良好支持,与Opera不相伯仲。但它不能和浏览器互动。
*加载了Adobe SVG Viewer的[[Internet Explorer]]也能支持多数SVG特性,但是由于没有浏览器的原生支持,在交互方面许多特性不支持。
* 加载了Adobe SVG Viewer的[[Internet Explorer]]也能支持多数SVG特性,但是由于没有浏览器的原生支持,在交互方面许多特性不支持。
*[[Firefox|Mozilla Firefox]] 2.0对SVG特性的支持相当弱,许多重要特性如动画等都不能支持。
* [[Firefox|Mozilla Firefox]] 2.0对SVG特性的支持相当弱,许多重要特性如动画等都不能支持。


== 设计工具 ==
== 设计工具 ==
能够设计SVG图形作品的软件工具包括[[Adobe Illustrator]]、[[Adobe Photoshop CC]]、[[Visio]]、[[Xmind8]]以及[[CorelDRAW]]等。
能够设计SVG图形作品的软件工具包括[[Adobe Illustrator]]、[[Adobe Photoshop|Adobe Photoshop CC]]、[[Visio]]、[[XMind|Xmind8]]以及[[CorelDRAW]]等。


而[[開放源代碼]]的軟件有[[Scribus]]、[[Karbon14]]、[[Inkscape]]以及[[Sodipodi]]等。
而[[開放源代碼]]的軟件有[[Scribus]]、[[Karbon14]]、[[Inkscape]]以及[[Sodipodi]]等。


另外也有开放源码、功能简单但容易操作、免安装的在线SVG设计工具,例如[http://code.google.com/p/svg-edit/],该软件现在位于[https://github.com/SVG-Edit/svgedit svgedit]
另外也有开放源码、功能简单但容易操作、免安装的在线SVG设计工具,例如[http://code.google.com/p/svg-edit/ Svg-edit] {{Wayback|url=http://code.google.com/p/svg-edit/ |date=20161212134936 }},该软件现在位于[https://github.com/SVG-Edit/svgedit Github] {{Wayback|url=https://github.com/SVG-Edit/svgedit |date=20210212002830 }}上。

对于移动设备,[[安卓]]系统则可以使用 [https://play.google.com/store/apps/details?id=p.svg PainterSVG] {{Wayback|url=https://play.google.com/store/apps/details?id=p.svg |date=20210528002808 }}。


== 参考文献 ==
== 参考文献 ==
{{Reflist}}
{{Reflist|2}}


== 外部链接 ==
== 外部链接 ==
{{Commons category|SVG}}
{{Commons category|SVG}}
*[http://www.w3.org/TR/SVG/ W3C SVG 官方标准网站]{{en}}
* [http://www.w3.org/TR/SVG/ W3C SVG 官方标准网站]{{Wayback|url=http://www.w3.org/TR/SVG/ |date=20080923061609 }}{{en}}
*[https://web.archive.org/web/20060712105106/http://wiki.svg.org/Main_Page svgwiki]{{en}}
* [https://web.archive.org/web/20060712105106/http://wiki.svg.org/Main_Page svgwiki]{{en}}
*[http://code.google.com/p/svgweb/ SVG Web]{{en}}
* [http://code.google.com/p/svgweb/ SVG Web]{{Wayback|url=http://code.google.com/p/svgweb/ |date=20110122021715 }}{{en}}
*[https://web.archive.org/web/20081217072434/http://dev.opera.com/articles/svg/ Opera開發網站上關于SVG的展示及教程]{{en}}
* [https://web.archive.org/web/20081217072434/http://dev.opera.com/articles/svg/ Opera開發網站上關于SVG的展示及教程]{{en}}
*[http://www.w3school.com.cn/svg/index.asp W3school上关于SVG的教程]
* [http://www.w3school.com.cn/svg/index.asp W3school上关于SVG的教程] {{Wayback|url=http://www.w3school.com.cn/svg/index.asp |date=20210108132425 }}


== 參見 ==
== 參見 ==
第146行: 第158行:
[[Category:图形文件格式]]
[[Category:图形文件格式]]
[[Category:矢量图形]]
[[Category:矢量图形]]
[[Category:标语言]]
[[Category:标语言]]
[[Category:基于XML的标准]]
[[Category:基于XML的标准]]
[[Category:W3C标准]]
[[Category:W3C标准]]
[[Category:页面描述语言]]
[[Category:页面描述语言]]
[[Category:带有代码示例的条目]]

2023年12月15日 (五) 03:40的最新版本

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

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

SVG概述

[编辑]

SVG由1998年成立的W3C SVG工作组启动开发,随着当年提交给W3C的六份标准提案而开展。

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

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

SVG格式具有以下优点:
  • 图像文件可读,易于修改和编辑(理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案)。
  • 与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格地说,应该是ECMAScript)脚本来控制SVG对象。
  • SVG图形格式可以方便的建立文字索引,从而实现基于内容的图像搜索
  • SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。[4]
  • SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。[5]
SVG格式具有以下缺点:
  • 如何和已经占有重要市场份额的矢量图形格式Adobe Animate(舊稱Adobe Flash)竞争的问题。事实上,Adobe Animate在Flash CC 2014版及以后的版本就都支持直接导出SVG文件。[6]
  • 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 animation

SVG技术细节

[编辑]

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

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

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

标准制定开发历史

[编辑]

SVG由1998年成立的W3C SVG工作组启动开发,随着当年提交给W3C的六份标准提案应运而生:

当时工作组是由W3C的Chris Lilley领衔。

  • 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。[13]
  • 2011年8月16日,發布SVG 1.1(第2版),成为W3C目前推荐的标准。[3]
  • W3C目前仍正在研究制定SVG 2,目前最新的草稿發布见页面存档备份,存于互联网档案馆)。[14]

示例

[编辑]

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插件来自Adobe公司(Adobe SVG Viewer页面存档备份,存于互联网档案馆)),另外Corel也提供SVG浏览器(Corel SVG Viewer)。然而前者宣布于2009年1月1日停止对该产品的支持。

原生支持

[编辑]

各种SVG解释器支持程度比较

[编辑]

W3C的SVG网站上有一个测试套件可以用来测试SVG解释器对于标准的支持。这个套件既可以在线运行也可以下载到本地运行。截至2007年中,对于流行的SVG软件有如下测试结果:

  • 对SVG支持最好的浏览器是Opera,它支持大多数的SVG特性。
  • 作为专门的SVG浏览器,Batik SVG viewer能对大多数特性有良好支持,与Opera不相伯仲。但它不能和浏览器互动。
  • 加载了Adobe SVG Viewer的Internet Explorer也能支持多数SVG特性,但是由于没有浏览器的原生支持,在交互方面许多特性不支持。
  • Mozilla Firefox 2.0对SVG特性的支持相当弱,许多重要特性如动画等都不能支持。

设计工具

[编辑]

能够设计SVG图形作品的软件工具包括Adobe IllustratorAdobe Photoshop CCVisioXmind8以及CorelDRAW等。

開放源代碼的軟件有ScribusKarbon14Inkscape以及Sodipodi等。

另外也有开放源码、功能简单但容易操作、免安装的在线SVG设计工具,例如Svg-edit页面存档备份,存于互联网档案馆),该软件现在位于Github页面存档备份,存于互联网档案馆)上。

对于移动设备,安卓系统则可以使用 PainterSVG页面存档备份,存于互联网档案馆)。

参考文献

[编辑]
  1. ^ M Media Type registration for image/svg+xml. World Wide Web Consortium. 22 December 2008 [29 August 2010]. (原始内容存档于2016-03-14). 
  2. ^ XML Media Types, RFC 3023. Internet Engineering Task Force: 24. January 2001 [29 August 2010]. (原始内容存档于2011-08-22). 
  3. ^ 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) (英语). 
  4. ^ <filter>-SVG. MDN Web Doc. 2016-12-21 [2017-12-20]. (原始内容存档于2021-02-09) (英语). 
  5. ^ <a>-SVG. MDN Web Doc. 2017-06-15 [2017-12-20]. (原始内容存档于2021-01-08) (英语). 
  6. ^ New features summary - 2014. Adobe. [2017-12-20]. (原始内容存档于2021-01-08) (英语). 
  7. ^ Schematic Graphics. www.w3.org. [2022-07-29]. (原始内容存档于2022-01-31). 
  8. ^ 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). 
  9. ^ 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). 
  10. ^ Hyper Graphics Markup Language (HGML). www.w3.org. [2022-07-29]. (原始内容存档于2022-04-07). 
  11. ^ WebCGM Profile. xml.coverpages.org. [2022-07-29]. (原始内容存档于2022-08-14). 
  12. ^ Secret Origin of SVG. World Wide Web Consortium. 21 December 2007 [1 January 2011]. (原始内容存档于2020-12-24). 
  13. ^ Scalable Vector Graphics (SVG) Tiny 1.2 Specification, W3C Recommendation 22 December 2008. [2014-05-29]. (原始内容存档于2020-12-07). 
  14. ^ Scalable Vector Graphics (SVG) 2, W3C Editor's Draft. [2013-11-24]. (原始内容存档于2021-02-10). 
  15. ^ 微軟將加入W3C SVG工作小組 IE 9可望支援 即時新聞 iThome online. [2010-11-21]. (原始内容存档于2010-01-11). 

外部链接

[编辑]

參見

[编辑]