【图像】SVG图片介绍-转

SVG
维基百科，自由的百科全书

汉漢▼

可缩放矢量图形

扩展名 .svg, .svgz
互联网媒体类型 image/svg+xml[1][2]
開發者 万维网联盟
最初版本 2001年9月4日；10年前
穩定版本 Tiny 1.2 ／2008年12月22日；2年前
格式 矢量图形
延伸自 XML
自由檔案格式？ Yes
網站 w3.org/Graphics/SVG/


这张图片展示了位图和矢量图的区别。位图是由点构成的，矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点，而放大矢量图看到的仍然是形状。SVG属于矢量图，因此能夠无级縮放，而不會導致馬賽克。

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。目录 [隐藏]
1 SVG概述
1.1 SVG Basic
1.2 SVG Tiny
2 SVG技术细节
3 标准制定开发历史
4 示例
5 SVG显示
5.1 插件支持
5.2 原生支持
5.3 各种SVG解释器支持程度比较
6 设计工具
7 軟件支援
8 参考资料
9 外部连接

[编辑]
SVG概述

SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG格式具有以下优点：
图像文件可读，易于修改和编辑
与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象
SVG图形格式可以方便的建立文字索引，从而实现基于内容的图像搜索
SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户

SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Adobe Flash竞争的问题，另一个问题就是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文件」。
[编辑]
标准制定开发历史
W3C于2001年9月4日发布SVG 1.0。
W3C于2003年1月4日发布SVG 1.1。
W3C于2003年1月14日推出SVG移动子版本：SVG Tiny和SVG Basic。
2008年12月22日，SVG Tiny 1.2成为W3C的推荐标准。
W3C目前正在研究制定SVG 1.2版本。
[编辑]
示例

示例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" />
</svg>
[编辑]
SVG显示
[编辑]
插件支持

目前，最常用的SVG插件来自Adobe公司（Adobe SVG Viewer），另外Corel也提供SVG浏览器（Corel SVG Viewer）。然而前者宣布于2009年1月1日停止对该产品的支持。
[编辑]
原生支持
比较著名的SVG项目包括Mozilla SVG Project，KDE的KSVG，以及Amaya等。
Mozilla Firefox自版本1.5发行后，即开始支援SVG格式的显示。
基于Java的SVG项目主要有Batik SVG Toolkit等。
Opera、Google Chrome和Safari支持SVG显示。
Microsoft的Internet Explorer 8.0版之前尚未支援SVG，直至由Internet Explorer 9.0版開始支援SVG。[3]
[编辑]
各种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 Illustrator以及CorelDRAW等。

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

另外也有开放源码、功能简单但容易操作、免安装的线上SVG设计工具，例如svg-edit。
[编辑]
軟件支援
Adobe 公司 SVG 插件 及 Adobe 公司 SVG 应用实例演示
Inkscape 開放源代碼的軟體
Karbon14 開放源代碼的軟體
Sodipodi 開放源代碼的軟體
Mozilla SVG and Mozilla SVG 演示
Firefox 1.5－首個 Firefox 版本開始支援顯示 SVG 格式
Opera 瀏覽器－Opera 8.0 版開始支援顯示 SVG Tiny 1.1 的 spec 規格
[编辑]
参考资料
^ M Media Type registration for image/svg+xml. World Wide Web Consortium. 22 December 2008 [29 August 2010].
^ XML Media Types, RFC 3023. Internet Engineering Task Force. January 2001: 24 [29 August 2010].
^ 微軟將加入W3C SVG工作小組　IE 9可望支援 即時新聞 iThome online
[编辑]
外部连接

相關的维基共享资源：
SVG
W3C SVG 官方标准网站
svg.org 社群消息网站
svg中国 新聞及資源網
about-svg.de
svgwiki
SVG Web
Opera開發網站上關于SVG的展示及教程（英文）