SVG语法教程指南中文版
SVG中文说明书
说明书
前言
PCS-9章节！
本章叙述了使用产品前的安全预防建议。在安装和使用时，本章内容必须全部阅读且充分理解。 忽略说明书中相关警示说明，因不当操作造成的任何损害，本公司不承担相应责任。
在对本装置做任何操作前，相关专业人员必须仔细阅读本说明书，熟悉操作相关内容。 z 操作指导及警告
我们定期仔细检查本文档中的内容，在后续版本中会有必要的修正。 资料相关，请联系：
但不可避免会有一些错误之处，欢迎提出改进的意见。
电话：025-87178185、传真：025-8718208
我们保留在不事先通知的情况下进行技术改进的权利。
电子信箱：nr_techsupport@
z 外部回路 当把装置输出的接点连接到外部回路时，须仔细检查所用的外部电源电压，以防止所连接的回
路过热。 z 连接电缆
仔细处理连接的电缆避免施加过大的外力。
版权声明
版本: R1.00 P/N: ZL_DLDZ0203.1206
Copyright © 2012NR 南京南瑞继保电气有限公司版权所有
我们对本文档及其中的内容具有全部的知识产权。除非特别授权，禁 止复制或向第三方分发。凡侵犯本公司版权等知识产权的，本公司必 依法追究其法律责任。
南京南瑞继保电气有限公司 公司地址：中国南京江宁区苏源大道 69 号 邮编 211102 公司网址:
ii
南京南瑞继保电气有限公司
PCS-9583 静止无功发生器
目录
前言 .................................................................................................................................................i 目录 ...............................................................................................................................................iii 第 1 章 概述 ...................................................................................................................................1
svg操作方法及注意事项
svg操作方法及注意事项SVG（Scalable Vector Graphics）是一种基于XML的图形格式，用于描述二维矢量图形。
在使用SVG进行操作时，需要掌握一些基本的方法和注意事项。
一、SVG操作方法：1. 创建SVG元素：可以使用HTML的<svg>标签创建SVG元素，设置其属性，如宽度、高度等。
2. 绘制基本形状：SVG支持绘制矩形、圆形、椭圆、直线、多边形等基本形状，可以使用相应的<rect>、<circle>、<ellipse>、<line>、<polyline>等标签进行绘制。
3. 使用路径绘制复杂形状：路径是SVG中最常用的绘制复杂形状的方法，可以使用<path>标签，通过设置路径命令（如M、L、C等）来描述路径的起点、直线段、曲线段等。
4. 设置样式：可以通过设置元素的样式属性，如fill（填充颜色）、stroke（边框颜色）、stroke-width（边框宽度）等来改变SVG元素的外观。
5. 使用变换：可以使用transform属性对SVG元素进行平移、旋转、缩放等变换操作，常用的值有translate、rotate、scale等。
6. 添加文本：可以使用<text>标签添加文本内容，并设置其样式属性，如字体大小、字体颜色等。
7. 添加动画：SVG支持添加动画效果，可以使用<animate>、<animateTransform>等标签来实现平移、旋转、缩放等动画效果。
二、注意事项：1. 使用正确的XML语法：SVG是基于XML的格式，因此需要遵循XML的语法规则，如正确嵌套标签、正确闭合标签等。
2. 注意坐标系：SVG使用笛卡尔坐标系，原点在左上角，x轴向右，y轴向下。
在绘制图形时，需要注意坐标系的转换。
3. 注意单位：SVG中的长度单位可以是像素（px）、百分比（%）等，需要根据具体情况选择合适的单位。
泰开SVG操作步骤
泰开SVG操作步骤1.理解泰开SVG的基本概念：泰开SVG使用XML语法来描述图形，它由各种元素和属性组成。
元素可以是形状（如圆、矩形、路径等）、文本、图片或其他嵌套的元素。
属性用于定义元素的样式、位置和动画效果。
3. 添加SVG元素：在SVG文档中，可以添加各种元素来创建图形。
例如，可以使用 `<circle>` 元素创建一个圆形，使用 `<rect>` 元素创建一个矩形，使用 `<path>` 元素创建一个路径等。
每个元素都有相应的属性，可以通过这些属性来定义元素的样式和位置。
4. 定义图形样式：可以使用属性来定义图形的样式。
例如，可以使用 `fill` 属性来定义填充颜色，使用 `stroke` 属性来定义边框颜色，使用 `stroke-width` 属性来定义边框宽度等。
还可以使用 CSS 样式表来定义元素的样式。
5. 添加文本和图片：SVG文档中不仅可以包含图形元素，还可以包含文本和图片等。
可以使用 `<text>` 元素来添加文本，使用 `<image>` 元素来添加图片。
这些元素可以通过属性来定义位置、样式和大小。
6. 缩放和平移图形：可以使用 `transform` 属性来缩放和平移图形。
例如，可以使用 `scale` 属性来缩放图形的大小，使用 `translate` 属性来平移图形的位置。
这些属性可以通过数值来定义缩放和平移的量。
7. 添加动画效果：SVG允许使用动画来为图形添加交互效果。
可以使用 `<animate>` 元素来定义动画效果。
例如，可以使用`animateTransform` 元素来为图形添加平移、旋转或缩放动画。
还可以使用 `<animateMotion>` 元素来定义图形的运动路径。
8. 嵌套元素：SVG允许嵌套元素，即在一个元素内部添加另一个元素。
例如，可以在一个 `<g>` 元素内部创建多个图形元素，并对该组进行整体操作。
SVG规范1.1
SVG1.1规范中文译稿（一）----1 简介1 简介目录· 1.1 关于SVGo 1.1.1 模块化o 1.1.2 元素和属性集o 1.1.3 剖析SVG 规范· 1.2 SVG MIME 类型, 文件扩展名和Macintosh 文件类型· 1.3 SVG 命名空间, 公共标识符与系统标识符· 1.4 与其它规范标准的兼容性· 1.5 术语· 1.6 定义1.1 关于SVG本规范定义可扩展矢量图形(SVG).的特性和语法。
SVG是一种基于XML[XML10]的二维图形描述语言。
SVG允许三种图形对象：矢量图形形状（如有直线和曲线组成的轨迹）、图像和文本。
图形对象可以被组合、定制样式、变形和组成先前渲染过的对象。
其特性包括嵌套变换(Nested Transformations)、路径分割（clipping paths）、蒙版（alpha masks）、滤镜效果和模板对象。
SVG 图形是可交互和动态的。
动画可以既直接定义和触发(例如，把SVG动画元素嵌入SVG 文本中)，也可以通过脚本控制。
通过脚本语言访问SVG文档对象模型 (DOM)，使得复杂的SVG 应用成为可能。
SVG文档对象模型 (DOM)可以提供对所有元素（elements）、特性（attributes）和属性（properties）的完全访问。
可以给SVG图形对象分配onmouseover and onclick等许多事件(event handlers)。
由于它的兼容性和对其他Web标准的杠杆所用(leveraging of other Web standards)，在同一个Web页面中可以同时出现针对XHTML和 SVG元素编写的脚本。
SVG是一种针对复杂图形的语言。
出于访问性的原因，如果一个初始源文档包含较高级别的结构和语义，建议较高级别的信息时可访问的，既可以让初始源文件可访问，也可以让能够传达高级别信息的其他格式或其他版本的文档可访问，或将较高级别的信息包含到SVG内容中。
SVG基础教程（Tutorials Point）说明书
About the T utorialScalable Vector Graphics commonly known as SVG is a XML based format to draw vector images. It is used to draw twodimentional vector images.This tutorial will teach you basics of SVG. Also, this training material contains chapters discussing all the basic components of SVG with suitable examples.AudienceThis tutorial has been prepared for beginners to help them understand the basic concepts related to SVG. Also, it will give you enough understanding on SVG from where you can take yourself to a higher level of expertise.PrerequisitesBefore proceeding with this tutorial, it is advisable to have some basic knowledge of XML, HTML, and JavaScript.Disclaimer & CopyrightCopyright 2015 by Tutorials Point (I) Pvt. Ltd.All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute, or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness, or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at **************************iT able of ContentsAbout the Tutorial (i)Audience (i)Prerequisites (i)Disclaimer & Copyright (i)Table of Contents ...................................................................................................................................... i i SVG – OVERVIEW (1)What is SVG? (1)Advantages (1)Disadvantages (1)Example (1)How SVG Integrates with HTML (2)SVG – SHAPES (4)SVG Rect (4)SVG Circle (7)SVG Ellipse (9)SVG Line (12)SVG Polygon (14)SVG Polyline (17)SVG Path (19)SVG – TEXT (24)Declaration (24)Attributes (24)Example (25)SVG – STROKE (27)iiExample (27)SVG – FILTERS (30)Declaration (30)Attributes (31)Example (31)SVG – PATTERNS (34)Declaration (34)Attributes (34)Example (35)SVG – GRADIENTS (37)Linear Gradients Declaration (37)Attributes (37)Example (38)Radial Gradients Declaration (39)Attributes (40)Example (41)SVG – INTERACTIVITY (43)Example (43)Explanation (44)SVG – LINKING (46)Declaration (46)Attributes (46)Example (46)iiiSVG 1What is SVG?∙SVG, Scalable Vector Graphics is an XML based language to define vector based graphics. ∙SVG is expected to display images over the web. ∙As these are vector images, SVG images never drops on quality no matter how they are zoomed out or resized. ∙SVG images supports interactivity and animation. ∙SVG is a W3C standard. ∙Other image formats like raster images can also be clubbed with SVG images. ∙ SVG integrates well with XSLT and DOM of HTML.Advantages∙Use any text editor to create and edit SVG images. ∙Being XML based, SVG images are searchable, indexable and can be scripted and compressed. ∙SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized ∙Good printing quality at any resolution ∙ SVG is an Open StandardDisadvantages∙Since text format size is larger, it is generally compared to binary formatted raster images. ∙ Size can be big even for a smaller image.ExampleFollowing XML snippet can be used to draw a circle in web browser. <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" /> </svg>Embed the SVG XML directly in an HTML page.testSVG.htm<html><title>SVG Image</title>SVG – OVERVIEWSVG<body><h1>Sample SVG Image</h1><svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" /></svg></body></html>OutputOpen textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. In Internet Explorer, activeX controls are required to view SVG images.How SVG Integrates with HTML∙<svg> element indicates the start of SVG image.∙<svg> element's width and height attributes defines the height and width of the SVG image.∙In the above example, we've used a <circle> element to draw a circle.∙cx and cy attribute represents center of the circle. Default value is (0,0).∙“r”attribute represents radius of circle.∙Other attribues stroke and stroke-width controls the outlining of the circle.2SVG ∙fill attributes defines the fill color of the circle.∙Closing</svg> tag indicates the end of SVG image.3SVGEnd of ebook previewIf you liked what you saw…Buy it from our store @ https://4。
html、css、javascript语法手册
ash CS3 / Firework CS3 Drea m aver CSwe 3 / Fl1其中 Href 属性指定了文档的基础U R L地址。
该属性在<BASE> 标签中是必须存在的。
Target 定义的是打开页面的窗口，同框架一起使用。
它定义了当文档中的链接被单击后，在哪一个框架集中展开页面。
如果文档中的超级链接没有明确指定展开页面的目标框架集，则就使用这里定义的地址代替。
2.3 元信息标签<META><META> 标签的功能是定义页面中的信息，这些文件信息并不会出现在浏览器页面的显示之中，只会显示在源代码中。
<META> 标签通过属性来定义文件信息的名称、内容等。
<META> 标签是实现元数据的主要标签，它能够提供文档的关键字、作者、描述等多种信息，在HTML的头部可以包括任意数量的<META> 标签。
如表 2 所示。
表2 <MET A> 标签属性通过这些属性，可以建立多种多样的效果，实现多种多样的功能。
1. 定义编辑工具前面介绍过，使用Frontpage、Dreamweaver 等多种编辑工具可以制作网页，在源代码中可以设定网页编辑器的名称。
这个名称不会出现在浏览器的显示中。
<MEta name=”generator”content=”value”>Generator 为编辑器定义，content 中定义编辑器的名称。
2. 设定关键字关键字是为搜索引擎而提供的，如一个音乐网站，为了提高在搜索引擎中被搜索到的机率，可以设定多个和音乐主题相关的关键字以便搜索。
这些关键字不会出现在浏览器的显示中。
需要注意的是，大多数搜索引擎进行检索时都会限制关键字的数量，有时关键字过多该网页会在检索中被忽略。
所以关键字的输入不宜过多，应切中主题。
另外，关键字之间要用逗号分隔。
<MEta name=”keywords”content=”value”>其中，keywords 为关键字定义，content 中定义关键字的内容。
SVG培训资料
SVG培训资料SVG（Scalable Vector Graphics）是一种基于XML语言描述二维图形的格式。
它使用文本文件来定义图形，可以实现矢量图形在不同尺寸下的无损放大和缩小，同时也支持动画效果。
本文将为大家介绍一些关于SVG培训资料的内容。
SVG培训资料通常包括以下几个方面的内容：SVG的基本概念、SVG的优势和应用、SVG的基本语法和标签、SVG路径绘制和变换、SVG 滤镜和动画效果等。
首先，我们来了解一下SVG的基本概念。
SVG是一种使用XML （eXtensible Markup Language）语言描述二维图形的格式。
它可以被任何支持XML的文本编辑器创建和编辑，也可以在Web页面中嵌入或者作为单独的文件使用。
与像素图形不同，SVG图形可以在不同尺寸下进行无损放大和缩小，因此非常适合用于响应式Web设计。
接下来，我们来了解一下SVG的优势和应用。
SVG图形是基于矢量的，因此可以无损地进行缩放和放大。
它可以被搜索引擎解析和索引，因此对于SEO（搜索引擎优化）非常有利。
另外，SVG还支持互动性和动画效果，可以用于创建交互式的Web页面和用户界面。
除此之外，SVG还可以与其他Web技术（如CSS和JavaScript）结合使用，实现更丰富的效果和功能。
接下来，我们来了解一下SVG的基本语法和标签。
SVG的语法是基于XML的，因此使用了XML的标签语法和规则。
SVG的根元素是<svg>，可以在其中定义各种图形元素，如<rect>（矩形）、<circle>（圆形）、<path>（路径）等。
可以通过设置各种属性来控制图形的外观，如颜色、线条粗细、阴影等。
然后，让我们来了解一下SVG路径绘制和变换。
路径是SVG中非常重要的概念，它可以用来绘制各种复杂的图形。
路径由一系列的命令组成，如移动到（M）、直线到（L）、二次贝塞尔曲线（Q）等。
通过使用这些命令配合坐标参数，可以绘制出各种形状的图形。
SVG 文档语法
SVG语法结构一、S VG文档结构格式1.<?xml version="1.0"encoding="UTF-8"standalone="no"?>2.<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w/Graphics/SVG/1.1/DTD-/svg11.dtd">3.<svg width="1000"height="400"viewBox="0 0 1000 400"Version="1.1"xmlns="-/2000/svg">4.<title>此标注相当于HTML中的title标注</title>5.<desc>SVG文件内容描述，类似文件功能注解，这部分内容不会出现在以后显示的画面中</desc><defs>预定义可重用部件。
并给它们指定以后可在图像主体中调用的标识。
在图像主体部分通过用<use/> 标注引用预定义项的元素将它们链接到文档。
</defs>6.<defs><style type="text/css"><![CDATA[circle {fill:none; stroke:#00C; stroke-width:2px;}#abc123 { fill: #00C; opacity: 0.5; }.xyz { font-family: "Courier New", Courier, monospace; font-size: 20px; font-weight: bold; fill: #F00; }asd { fill:none; stroke-width:1; stroke:black; stroke-opacity:1; }]]></style>7.<script type="text/javascript"Xlink:href="uri"> <!-- 引用外部脚本--> </script><script type="text/javascript"><![CDATA[<!-- 内嵌脚本-->]]></script></defs>8.<defs><symbol id="c1"><circle cx="25"cy="25"r="25"/></symbol></defs>9.<defs><symbol id="2c1"><use xlink:href="#c1"x="20"y="50"/><use xlink:href="#c1"x="20"y="85"/></symbol></defs>10.<defs><symbol id="3c1"viewBox="0 0 500 200"><use xlink:href="#c1"x="80"y="50"/><use xlink:href="#c1"x="65"y="85"/><use xlink:href="#c1"x="95"y="85"/></symbol></defs>11.<defs><rect id="abc123"x="50"y="150"width="150"height="75"/><rect id="rect1"x="200"y="150"width="60"height="90"/><line id="lineation1"x1="20"y1="50"x2="250"y2="50"class="asd"stroke-dasharray="5 5 5 5"/><line id="lineation2"x1="50"y1="70"x2="350"y2="70"class="asd"stroke-dasharray="1 1 1 1"/><line id="lineation3"x1="50"y1="90"x2="250"y2="90"class="asd"stroke-dasharray="4 3 1 4"/><line id="lineation4"x1="50"y1="110"x2="250"y2="110"class="asd"stroke-dasharray="53 1 2 1 3"/></defs>12.<defs><symbol id="专用变压器"><use xlink:href="#2c1"x="120"y="50"/><use xlink:href="#rect1"x="120"y="55"/></symbol></defs>13.<defs><symbol id="变压器组"><use xlink:href="#3c1"x="200"y="50"/></symbol></defs>14.<defs><marker id="arrow"viewBox="0 0 10 10"refX="0"refY="5"markerUnits="strokeWidth"markerWidth="3"markerHeight="10"orient="auto"><path d="M 0 0 L 10 5 L 0 10 z"fill="yellow"stroke="black"stroke-width="2"/></marker></defs><defs><path id="wavyPath"d="M75,250 c25,-75 50,50 100,0 s50,-5 150,50"/></defs><desc>这里开始是整个SVG文件的重心，向量图形、图像、文字、动画等内容都应包含置于此</desc>15.<g id="g"name="图层管理"><g id="g1"name="一次图标层（设备层）"visibility ="visibility">16.<use xlink:href="#c1"x="50"y="100"/><use xlink:href="#c1"x="100"y="100"/>17.<use xlink:href="#lineation1"x1="20"y1="50"x2="250"y2="50"transform="scale(2)"/><use xlink:href="#lineation2"x1="20"y1="70"x2="250"y2="70"/><use xlink:href="#lineation3"x1="20"y1="90"x2="400"y2="90"/><use xlink:href="#lineation4"x1="20"y1="110"x2="450"y2="110"/><use xlink:href="#abc123"x="50"y="150"/><use xlink:href="#专用变压器"x="160"y="70"/><use xlink:href="#变压器组"x="260"y="70"/>18.<circle cx="143"cy="163"r="84"style="fill:rgb(192，192，255); stroke:rgb(0，0，128);stroke-width:1"/><ellipse cx="160"cy="163"rx="101"ry="81"style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/><rect x="80"y="53"width="189"height="52"style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/><line x1="127"y1="65"x2="127"y2="200"style="stroke:rgb(0，0，0); stroke-width:2"/><polyline points="100，200 100，20 10，200 100，20"style="stroke:rgb(64，64，64);stroke-width:1"/><polygon points="223.5，123.034 276，213.966 171，213.966"style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>23.<path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"stroke="purple"stroke-width="5"fill="none"marker-start="url(#arrow)"marker-mid="url(#arrow)"marker-end="url(#arrow)"/> </g><g id="g2"name="一次文字层（设备名、属性层）">24.<text x="100"y="120"stroke="black"stroke-width=".5">专用变压器</text><text x="150"y="200"stroke="black"stroke-width=".5">变压器组</text><text x="50"y="120"stroke-width="2"stroke="green"transform="scale(2)translate(-25 -60)">让我们荡起双桨</text>25.<text x="20"y="100"font-size="30">显示属性<tspan fill="rgb(255,0,0)">ID:</tspan>26.<tspan fill="rgb(0,255,0)"class="abbr">GroupID:</tspan><tspan fill="rgb(0,0,255)">Remark:</tspan></text>27.<text x="20"y="250"font-size="20"><textPath xlink:href="#wavyPath">Text travels along any path that you define for it!</textPath></text></g><g id="g3"name="一次连线层"></g></g></svg>第一行：从本质上来说，SVG 文档是XML 文档。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
来源：SVG中国()翻译：蔡发明英文版：/svg/default.asp(对照W3C官方英文版格式,再做一次翻译修正，最末部分还待翻译完成)1 SVG简介SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。
1.1 学习之前应具备的知识基础你应该确保你有以下知识基础以便在后面更好的学习和理解SVG，并达到事半功倍的效果：* HTML* Basic XML如果你想先学习一下这些知识。
请访问W3Schools Online Web Tutorials(英文站点)，中文内容可以访问SVG中国的基础内容栏目。
1.2 什么是svg?* SVG指的是Scalable Vector Graphics，“可升级矢量图形”的意思；* SVG是用来定义面向web的矢量图形；* SVG基于XML语言定义图形；* 当你放大或重新设置图形大小时，SVG图形质量不会有所损失；* SVG里的每一个元素和属性都可以自定义；* SVG是一个W3C推荐标准；* SVG可以和W3C的其他推荐标准结合使用。
1.3 SVG的历史和优点Web浏览器在表现矢量图形方面的薄弱，引起各大软件厂商和组织纷纷推出自己的矢量图形规范，为统一标准结束这种混乱局势，W3C组织于1998年8月专门成立了SVG工作组致力于图形标准的制定工作，同时Microsoft、Sun、HP、IBM、Apple、Adobe、Corel 及Kodak等一些著名公司也参与到SVG标准的制定。
W3C于1999年2月11日发布了SVG第一个讨论草案；W3C于2001年9月4日发布SVG 1.0;W3C于2003年1月4日发布SVG 1.1;W3C于2003年1月14日推出SVG移动子版本：SVG Tiny和SVG Basic;W3C于2005年4月日发布的SVG 1.2草案;W3C于2006年8月10日SVG Tiny 1.2 为W3C 候选推荐标准。
与其他图形格式（JPEG、GIF）相比使用SVG的优点如下：* SVG文件可以被很多的工具（比如记事本）阅读和编辑；* SVG文件比JPEG和GIF更小压缩比更大；* SVG图像是可压缩的；* SVG图像可以以任何分辨率高清晰打印；* SVG图像是可缩放的，图像的任何部分都可以无损失缩放；* SVG里的文字是可供选择和搜索（制作地图的良好功能）；* SVG可以和诸如java等技术共同工作；* SVG是一个开放标准；* SVG文件是纯xml的。
SVG的主要竞争对手是Flash。
SVG与Flash两者有很多的相似特征，但和Flash相比SVG最大优点是他与其他标准（比如XSL和DOM）相兼容。
而Flash则是未开源的私有专利技术，只属Adobe公司所有，不具有开放性。
1.4 查看SVG文件SVG的最大缺点是没有完全支持SVG的浏览器，准确的说是主流浏览器不支持SVG 文件的显示。
不过当前越来越多的厂商已经投入到开发SVG项目中，并且很多著名企业已经发布支持SVG的程序软件，SVG阵营正在迅猛扩大。
Opera浏览器支持SVG显示。
Mozilla Firefox浏览器自版本1.5发行后，开始支持SVG显示。
加载了Adobe SVG Viewer的Internet Explorer也能支持多数SVG特性，但是由于没有浏览器的原生支持，在交互方面许多特性不支持。
不过Microsoft正计划Internet Explorer 8.0内置支持SVG显示。
我们等待SVG在更多流行的浏览器软件上支持，到那时SVG的时代就将带来。
二、SVG实例SVG是用XML来编写的。
2.1 SVG的一个实子下面的例子是一个SVG的简单实例，SVG文件必须保存扩展名为“.svg”格式。
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg>查看例子（仅用于支持SVG的浏览器）（如需查看SVG源代码，请打开此例，然后在窗口中右击。
选择“查看源代码”。
）2.2 代码解释第一行包含了XML声明。
请注意standalone属性，这个属性规定本SVG文件是独立的还是包含一个对外部文件的引用。
standalone="no"意味着本SVG文档包含一个对外部文件的引用，比如说DTD文件。
第二和第三行引用了这个外部的SVG DTD。
该DTD位于“/Graphics/SVG/1.1/DTD/svg11.dtd”。
该DTD位于W3C，含有所有允许的SVG元素。
SVG文档以根元素<svg>开始，包含开始标签<svg>和结束标签</svg>。
width和height 属性用来设置SVG文档的宽和高，Version属性定义了SVG的版本，xmlns属性定义了SVG 的名称空间。
<circle>元素用来划一个圆。
cx和cy属性定义了圆中心点的x，y坐标。
如果cx，cy省略，则圆以（0，0）点为中心。
r属性定义了圆的半径。
Stroke和stroke-width属性控制图形的外轮廓。
我们给圆设置了一个宽2px的黑色边框。
fill属性指出了图形的颜色。
我们给圆设置了红色。
</svg>标签则结束了svg根元素和本文档。
注意：所有开始标签必须有对应的结束标签。
三、在HTML页面中的插入SVGSVG文件可通过以下标签嵌入HTML文档：<embed>、<object>或者<iframe>。
下面你将看到SVG嵌入到HTML文档的三种方法。
3.1 使用<embed>标签所有主流浏览器都支持<embed>标签，允许使用脚本。
注释：Adobe SVG Viewer推荐您使用<embed>标签来将SVG包含进HTML文档！但是，当你要创建有效的XHTML文档的时候，你不能使用<embed>。
因为任何一个HTML的推荐标准里都不推荐<embed>标签。
语法：<embed src="/rect.svg" width="300" height="100"type="image/svg+xml"pluginspage="/svg/viewer/install/" />注释：pluginspage属性指出了插件下载的地址。
提示：IE浏览器支持一个附加的属性，wmode="transparent"，用来使HTML背景透明。
3.2 使用<object>标签<object>标签是HTML 4的标准标签，被所有新的浏览器支持。
缺点是他不支持脚本。
注意：如果你安装的最近版本的Adobe SVG Viewer，运用<object>标签SVG文件将不工作（至少不能在IE中工作）。
语法：<object data="rect.svg" width="300" height="100"type="image/svg+xml"codebase="/svg/viewer/install/" />注释：codebase属性指出插件下载的地址。
3.3 使用<iframe>标签<iframe>标签可以在大部分的浏览器里工作。
语法：<iframe src="/rect.svg" width="300" height="100"></iframe>3.4 我最期望的方式如果我们可以运用SVG命名空间，直接将SVG元素添加到HTML里，那真是太棒了！就像下面这个样子：<htmlxmlns:svg="/2000/svg"><body><p>This is an HTML paragraph</p><svg:svg width="300" height="100" version="1.1" ><svg:circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" /></svg:svg></body></html>四、SVG<rect>Svg有一些预定义的可以直接使用操作的图形元素Rectangle <rect>Circle <circle>Ellipse <ellipse>Line <line>Polyline <polyline>Polygon <polygon>Path <path>下面将详细介绍每一个元素，从rect开始。
The <rect> Tag<rect>用来生成矩形或矩形的变种。
为了理解<rect>怎么工作，复制下面的代码到记事本，然后保存为rect1.svg到你的网页目录。
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="/2000/svg"><rect width="300" height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>代码解释：Width和height属性指出举行的宽和高。