📄 svg 简介.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0044)http://www.w3school.com.cn/svg/svg_intro.asp -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>SVG 简介</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=zh-cn>
<META content=all name=robots>
<META content=w3school.com.cn name=author>
<META content="Copyright W3school.com.cn All Rights Reserved." name=Copyright>
<META content=true name=MSSmartTagsPreventParsing>
<META http-equiv=imagetoolbar content=false><LINK href="SVG 简介_files/c1.css"
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.3790.4134" name=GENERATOR></HEAD>
<BODY id=xml>
<DIV id=wrapper>
<DIV id=header>
<H1><A title=点击此处,返回首页
href="http://www.w3school.com.cn/index.html">w3school在线教程</A></H1></DIV>
<DIV id=navfirst>
<UL id=menu>
<LI id=h><A title=HTML教程 href="http://www.w3school.com.cn/h.asp">HTML教程</A>
</LI>
<LI id=x><A title=XML教程 href="http://www.w3school.com.cn/x.asp">XML教程</A>
</LI>
<LI id=b><A title=浏览器脚本 href="http://www.w3school.com.cn/b.asp">浏览器脚本</A>
</LI>
<LI id=s><A title=服务器脚本 href="http://www.w3school.com.cn/s.asp">服务器脚本</A>
</LI>
<LI id=d><A title="dot net教程" href="http://www.w3school.com.cn/d.asp">dot
net教程</A> </LI>
<LI id=m><A title=多媒体教程 href="http://www.w3school.com.cn/m.asp">多媒体教程</A>
</LI>
<LI id=w><A title=建站手册 href="http://www.w3school.com.cn/w.asp">建站手册</A>
</LI></UL></DIV>
<DIV id=navsecond>
<DIV id=course>
<H2>SVG 基础</H2>
<UL>
<LI><A title="SVG 首页" href="http://www.w3school.com.cn/svg/index.asp">SVG
首页</A>
<LI><A title="SVG 简介" href="http://www.w3school.com.cn/svg/svg_intro.asp">SVG
简介</A>
<LI><A title="SVG 实例"
href="http://www.w3school.com.cn/svg/svg_example.asp">SVG 实例</A>
<LI><A title=在HTML文档中的SVG
href="http://www.w3school.com.cn/svg/svg_inhtml.asp">SVG in HTML</A> </LI></UL>
<H2>SVG 形状</H2>
<UL>
<LI><A title="SVG 矩形" href="http://www.w3school.com.cn/svg/svg_rect.asp">SVG
矩形</A>
<LI><A title="SVG 圆形" href="http://www.w3school.com.cn/svg/svg_circle.asp">SVG
圆形</A>
<LI><A title="SVG 椭圆"
href="http://www.w3school.com.cn/svg/svg_ellipse.asp">SVG 椭圆</A>
<LI><A title="SVG 线条" href="http://www.w3school.com.cn/svg/svg_line.asp">SVG
线条</A>
<LI><A title="SVG 多边形"
href="http://www.w3school.com.cn/svg/svg_polygon.asp">SVG 多边形</A>
<LI><A title="SVG 折线"
href="http://www.w3school.com.cn/svg/svg_polyline.asp">SVG 折线</A>
<LI><A title="SVG 路径" href="http://www.w3school.com.cn/svg/svg_path.asp">SVG
路径</A> </LI></UL>
<H2>SVG 滤镜</H2>
<UL>
<LI><A title="SVG 滤镜简介"
href="http://www.w3school.com.cn/svg/svg_filters_intro.asp">SVG 滤镜简介</A>
<LI><A title="SVG 高斯滤镜"
href="http://www.w3school.com.cn/svg/svg_filters_gaussian.asp">SVG 高斯滤镜</A>
</LI></UL>
<H2>SVG 渐变</H2>
<UL>
<LI><A title="SVG 线形渐变"
href="http://www.w3school.com.cn/svg/svg_grad_linear.asp">SVG 线形渐变</A>
<LI><A title="SVG 放射渐变"
href="http://www.w3school.com.cn/svg/svg_grad_radial.asp">SVG 放射渐变</A>
</LI></UL>
<H2>SVG 实例</H2>
<UL>
<LI><A title="SVG 实例"
href="http://www.w3school.com.cn/svg/svg_examples.asp">SVG 实例</A> </LI></UL>
<H2>SVG 参考</H2>
<UL>
<LI><A title="SVG 元素"
href="http://www.w3school.com.cn/svg/svg_reference.asp">SVG 元素</A>
</LI></UL></DIV>
<DIV id=selected>
<H2>建站手册</H2>
<UL>
<LI><A title=网站构建 href="http://www.w3school.com.cn/site/index.asp">网站构建</A>
<LI><A title=W3C href="http://www.w3school.com.cn/w3c/index.asp">万维网联盟</A>
<LI><A title=浏览器信息
href="http://www.w3school.com.cn/browsers/index.asp">浏览器信息</A>
<LI><A title=网站品质 href="http://www.w3school.com.cn/quality/index.asp">网站品质</A>
<LI><A title=语义网 href="http://www.w3school.com.cn/semweb/index.asp">语义网</A>
<LI><A title=职业规划 href="http://www.w3school.com.cn/careers/index.asp">职业规划</A>
<LI><A title=网站主机 href="http://www.w3school.com.cn/hosting/index.asp">网站主机</A>
</LI></UL></DIV></DIV>
<DIV id=maincontent>
<H2>SVG 简介</H2>
<DIV id=tpn>
<UL class=prenext>
<LI class=pre><A href="http://www.w3school.com.cn/svg/index.asp">Previous
Page</A> </LI>
<LI class=next><A href="http://www.w3school.com.cn/svg/svg_example.asp">Next
Page</A> </LI></UL></DIV>
<DIV id=intro>
<P><STRONG>SVG是使用XML来描述二维图形和绘图程序的语言。</STRONG></P></DIV>
<DIV>
<H3>学习之前应具备的基础知识:</H3>
<P>继续学习之前,你应该对以下内容有基本的了解:</P>
<UL>
<LI>HTML
<LI>Basic XML </LI></UL>
<P>如果希望首先学习这些内容,请在本站的<A title="W3School 在线教程首页"
href="http://www.w3school.com.cn/">首页</A>选择相应的教程。</P></DIV>
<DIV id=definition>
<H3>什么是SVG?</H3>
<UL>
<LI>SVG指可伸缩矢量图形 (Scalable Vector Graphics)
<LI>SVG用来定义用于网络的基于矢量的图形
<LI>SVG使用XML格式定义图形
<LI>SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
<LI>SVG是万维网联盟的标准
<LI>SVG与诸如DOM和XSL之类的W3C标准是一个整体 </LI></UL></DIV>
<DIV>
<H3>SVG的历史和优势</H3>
<P>在2003年一月,SVG 1.1被确立为W3C标准。</P>
<P>参与定义SVG的组织有:太阳微系统、Adobe、苹果公司、IBM以及柯达。</P>
<P>与其他图像格式相比,使用SVG的优势在于:</P>
<UL>
<LI>SVG可被非常多的工具读取和修改(比如记事本)
<LI>SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。
<LI>SVG是可伸缩的
<LI>SVG图像可在任何的分辨率下被高质量地打印
<LI>SVG可在图像质量不下降的情况下被放大
<LI>SVG图像中的文件是可选的,同时也是可搜索的(很适合制作地图)
<LI>SVG可以与Java技术一起运行
<LI>SVG是开放的标准
<LI>SVG文件是纯粹的XML </LI></UL>
<P>SVG的主要竞争者是Flash。</P>
<P>与Flash相比,SVG最大的优势是与其他标准(比如XSL和DOM)相兼容。而Flash则是未开源的私有技术。</P>
<P>目前,不是所有的浏览器都支持SVG,这也是SVG普及的最大障碍。Mozilla、Firefox和Opera都支持SVG,而微软也计划这么做。</P>
<P>SVG编辑器的数量正在增长,Adobe GoLive 5也支持SVG。</P>
<P><A title=查看支持SVG的软件和服务 href="http://www.svgi.org/">查看支持SVG的软件和服务</A></P>
<P>目前,只有安装插件(比如Adobe SVG Viewer)才能查看SVG文件。</P></DIV>
<DIV>
<H3>查看SVG文件</H3>
<P>如果你使用的浏览器不支持SVG文件,就需要下载并安装SVG查看器。</P>
<P class=important><SPAN>注意:</SPAN>Firefox 1.5和Opera
9天生就支持SVG。如果你使用这些浏览器中任何的一款,那么恭喜你,你不需要下载SVG查看器了。</P>
<P><A title=从Adobe下载免费的SVG查看器
href="http://www.adobe.com/svg/viewer/install/">从Adobe下载免费的SVG查看器。</A></P></DIV>
<DIV id=bpn>
<UL class=prenext>
<LI class=pre><A href="http://www.w3school.com.cn/svg/index.asp">Previous
Page</A> </LI>
<LI class=next><A href="http://www.w3school.com.cn/svg/svg_example.asp">Next
Page</A> </LI></UL></DIV></DIV>
<DIV id=sidebar>
<DIV id=searchui>
<FORM id=searchform action=http://www.google.com/search method=get>
<P><LABEL for=searched_content>Search:</LABEL></P>
<P><INPUT type=hidden value=www.w3school.com.cn name=sitesearch></P>
<P><INPUT class=box id=searched_content title=在此输入搜索内容。 name=as_q> <INPUT class=button title=搜索! type=submit value=Go> </P></FORM></DIV>
<DIV id=tools>
<H5 id=tools_reference><A
href="http://www.w3school.com.cn/svg/svg_reference.asp">SVG 参考手册</A></H5>
<H5 id=tools_example><A
href="http://www.w3school.com.cn/example/svge_examples.asp">SVG
实例</A></H5></DIV>
<DIV id=books></DIV></DIV>
<DIV id=footer>
<P>W3School提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。当使用本站时,代表您已接受了本站的使用条款和隐私条款。</P>
<P>版权所有,保留一切权利。未经书面许可,不得转载。W3School(s)简体中文版授权上海蒙信网络科技有限公司在中华人民共和国运营。</P></DIV></DIV></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -