blob: e4e6ba60acf98035702692645ff97ab046173cc9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: SVG
slug: Web/SVG
tags:
- 2D图形
- SVG
- Web
- 参考
- 响应式网页设计
- 矢量图形
translation_of: Web/SVG
---
<p>{{SVGRef}}</p>
<div class="callout-box"><strong><a href="/zh-CN/docs/Web/SVG/Tutorial">准备开始吧！</a></strong><br>
这篇教程会帮助你开始使用 SVG。</div>
<p><span class="seoSummary"><strong>可缩放矢量图形</strong>（<strong>Scalable Vector Graphics，SVG</strong>），是一种用于描述二维的<a class="external" href="https://zh.wikipedia.org/wiki/%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%BD%A2">矢量图形</a>，基于 <a href="/zh-CN/docs/XML_%E4%BB%8B%E7%BB%8D">XML</a> 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和<a href="/zh-CN/docs/Learn/CSS">CSS</a>，<a href="/zh-CN/docs/MDN/Doc_status/API/DOM">DOM</a>，<a href="/zh-CN/docs/Web/JavaScript">JavaScript</a>和<a href="/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>等其他网络标准无缝衔接。</span>本质上，SVG 相对于图像，就好比 <a href="/zh-CN/docs/Web/HTML">HTML</a> 相对于文本。</p>
<p>SVG 图像及其相关行为被定义于 <a href="/zh-CN/docs/XML_%E4%BB%8B%E7%BB%8D">XML</a> 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。</p>
<p>和传统的点阵图像模式，像{{Glossary("JPEG")}}和{{Glossary("PNG")}}不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。</p>
<p>SVG 是由<a href="https://www.w3.org/">万维网联盟（W3C）</a>自 1999 年开始开发的开放标准。</p>
<div class="cleared row topicpage-table">
<div class="section">
<h2 class="Documentation" id="文档">文档</h2>
<dl>
<dt><a href="/zh-CN/docs/Web/SVG/Element" title="SVG/Element">SVG 元素参考</a></dt>
<dd>了解所有 SVG 元素的细节。</dd>
<dt><a href="/zh-CN/docs/Web/SVG/Attribute" title="SVG/Attribute">SVG 属性参考</a></dt>
<dd>了解所有 SVG 属性的细节.</dd>
<dt><a href="/zh-CN/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">SVG DOM 接口参考</a></dt>
<dd>了解有关 SVG DOM API 的全部细节。</dd>
<dt><a href="/zh-CN/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">在 HTML 内容中应用 SVG 效果</a></dt>
<dd>SVG与 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("JavaScript")}}一起工作，使用 SVG <a href="/zh-CN/docs/SVG_In_HTML_Introduction">增强常规 HTML 页面和web 应用</a>。</dd>
<dt>SVG 与 Mozilla</dt>
<dd>SVG 在 Mozilla 产品中的实现情况.
<ul>
<li><a href="/zh-CN/docs/Web/SVG/Firefox对SVG_1.1的支持" title="SVG_in_Firefox">Firefox 中 SVG 实现情况</a></li>
<li><a href="/zh-CN/docs/Web/SVG/Tutorial" title="SVG_in_Firefox">SVG 教程</a></li>
<li><a href="/zh-CN/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">在 HTML 中使用 SVG</a></li>
</ul>
</dd>
</dl>
<p><span class="alllinks"><a href="/zh-CN/docs/tag/SVG" title="tag/SVG">查看全部...</a></span></p>
<h2 class="Community" id="社区">社区</h2>
<ul>
<li>浏览 Mozilla 论坛… {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
</ul>
<h2 class="Tools" id="工具">工具</h2>
<ul>
<li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG 测试套件</a></li>
<li><a href="https://validator.w3.org/#validate_by_input">SVG 语法校验工具</a></li>
<li><a href="/zh-CN/docs/tag/SVG:Tools" title="tag/SVG:Tools">更多工具…</a></li>
<li>其他资源：<a href="/zh-CN/docs/XML_%E4%BB%8B%E7%BB%8D" title="XML">XML</a>、<a href="/zh-CN/docs/CSS" title="CSS">CSS</a>、<a href="/zh-CN/docs/Web/API/Document_Object_Model" title="DOM">DOM</a>、<a href="/zh-CN/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
</ul>
</div>
<div class="section">
<h2 class="Related_Topics" id="实例">实例</h2>
<ul>
<li>Google <a href="http://maps.google.com">地图</a> (route overlay) & <a href="http://docs.google.com">文档</a> (电子表格图表)</li>
<li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG 气泡菜单</a></li>
<li><a href="http://jwatt.org/svg/authoring/">SVG 创作指导方针</a></li>
<li><a href="/zh-CN/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Mozilla SVG 项目</a>概览</li>
<li>SVG 与 Mozilla 之间的<a href="/zh-CN/docs/Web/SVG/FAQ" title="SVG/FAQ">常见问题</a></li>
<li>SVG Open 2009 上 <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG 和 Mozilla</a> 主题的幻灯片和范例</li>
<li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li>
<li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG 艺术画廊</a></li>
<li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Lion</a>、<a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Butterfly</a> & <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li>
<li>更多实例（<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>、<a href="http://www.carto.net/papers/svg/samples/">carto.net</a>）</li>
</ul>
<h3 id="动画与交互">动画与交互</h3>
<p> 正如 HTML 一样，SVG 也有可被 JavaScript 访问的文档对象模型（DOM）和事件。这允许开发者创建丰富的动画和可交互的图像。</p>
<ul>
<li>一些真正赏心悦目的 SVG <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li>
<li>一个能为浏览器添加 {{Glossary("SMIL")}} 子集支持的 Firefox 扩展（<a href="http://schepers.cc/grafox/">Grafox</a>）</li>
<li>交互式<a href="http://people.mozilla.com/~vladimir/demos/photos.svg">图片</a>操作</li>
<li>当 <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> 使用 SVG 的 <code>foreignObject</code></li>
<li>动画<a href="http://lab.vodafone.com/vienna/">艺术</a></li>
</ul>
<h3 id="地图、图表、游戏以及3D体验">地图、图表、游戏以及3D体验</h3>
<p> 少许的 SVG 即可极大地丰富网页内容，下面是一些大量使用 SVG 的范例。</p>
<ul>
<li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li>
<li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li>
<li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li>
<li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li>
<li><a href="http://jvectormap.com/">jVectorMap</a>（交互式数据可视化地图）</li>
<li><a href="http://jointjs.com">JointJS</a>（JavaScript 图表库）</li>
</ul>
</div>
</div>
|
