SVG语法教程指南中文版

合集下载

svg-path详解

svg-path详解⼀、svg的 <path>命令M = moveto // m 50 20 =》以（50,20）位置为起始点L = lineto //m 50 20 l 20 50 =》从（50,20）到（20,50）作直线H = horizontal lineto // m 50 20 h 50 =》从（50,20）到（50,50）绘制⼀条平⾏线V = vertical lineto // m 50 20 v 50 =》从（50,20）到（100,20）绘制⼀条垂直线C = curvetoS = smooth curvetoQ = quadratic Bézier curveT = smooth quadratic Bézier curvetoA = elliptical ArcZ = closepath // 结束路径，回到原点注意：以上所有命令均允许⼩写字母。

⼤写表⽰绝对定位，⼩写表⽰相对定位。

⼆、svg的 <path>语法1. 语法 <path d="M10 10 H 90 V 90 M100 100 H 180 V 180 H 100" stroke="blue" stroke-width="2" /> ; 其中 d 引出路径2. d 以M绝对定位开头，则后⾯的m相对于前⼀个M/m⽰例：<svg xmlns="/2000/svg" version="1.1" width="200" height="200"><path d="M20 20 m 0 0 h 320 m -320 0 m 0 20 h 320 m -320 0 m 0 20 h 320" stroke="blue" stroke-width="2"/></svg>解析：M 20 20是第⼀个起始点m 0 0相对于M 20 20m -320 0 相对于 m 0 0以此类推...三、js动态添加svg的<path>let nameSpace = '/2000/svg'; //定义命名空间var barChart = document.createElementNS(nameSpace,'svg'); //在html⾥定义⼀个svgbarChart.setAttribute('width', barChartWidth); //添加长宽barChart.setAttribute('height', barChartHeight);let svgWrap = document.querySelector("#svg-wrapper"); //在id名为svg-wrapper的div⾥添加此svgsvgWrap.appendChild(barChart);//⽔平分区线let hSectionLine = document.createElementNS(nameSpace, "path"); //在svg⾥添加⼀个pathlet hSectionLinePath = "";for (let i = 0; i < vScaleNum; i++) {hSectionLinePath = hSectionLinePath + " m 0" + (-vScaleSpacing * radtio) + " h " + hLength + " m " + (-hLength) + " 0";} // 得到的是⼀个累加的多重定向pathlet hSectionLinesPath = zeroPoint + hSectionLinePath;console.log(hSectionLinesPath); // 类似M20 20 m 0 0 h 320 m -320 0 m 0 20 h 320 m -320 0 m 0 20 h 320hSectionLine.setAttribute("d", hSectionLinesPath); //给path新增⼀个属性，即路径dhSectionLine.setAttribute("stroke", hSectionLineColor); //给path⼀个颜⾊barChart.appendChild(hSectionLine); //添加⾄svg节点⾥———— 待续 ————。

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总结

第一部分基础1. <g></g>元素给它赋予一个ID,它所包含的内容可以看成一个整体，在别的地方可以统一引用。

有点像html中的<p>标签。

2．<defs></defs>元素最好将所需要被应用的元素都定义在<defs>元素中，它和<g>元素的区别是它中的内容，如果没有其他位置调用是不显示的。

3．<use></use>元素它有4个可选属性：x y height width ,它用来确定被引用元素的图形在给定坐标系的矩形渲染区域的位置。

语法格式：<use xlink:href=”本地的url”>,<use>元素不能引用外部文件。

4、 <symbol></symbol>元素它定义图形模板对象，必须有<use>元素调用。

它拥有viewBox和preserveAspectRatio两个属性，<g>元素则没有。

5、<desc></desc>和<title></title>元素描述SVG文档内容的，个人感觉没有什么作用6、 <image><./image>只能引用外部文件，不能引用SVG文档内的元素。

格式<image x=”<coordinate>”y=”<coordinate>”width=”<length>”height=”<length>” xlink:href=”<URL>”>小节：SVG文档被渲染的部分从根元素<svg>开始，引用的元素都最好放在<defs>元素中，组合的图形可以囊括在<g>元素或<symbol>元素下，引用外部点阵图形可以使用<image>元素。

svg轻松入门

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。

Svg.js使用手册

Svg.js使用手册简介：SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。

SVG（Scalable Vector Graphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。

SVG由W3C制定，是一个开放标准。

SVG.js中的一些亮点：∙易读的简洁的语法∙非常轻量，gzip压缩版只有5k∙针对大小、位置、颜色等的动画元素∙模块化结构，轻松扩展∙各种实用插件∙各种形状类型间拥有统一的API.∙元素可以绑定事件，包括触摸事件∙完全支持不透明蒙版∙元素组∙动态渐变∙填充模式∙完整的文档记录使用说明：Create a SVG documentThe first argument can either be an id of the element or the selected element itself. This will generate the following output:By default the svg canvas follows the dimensions of its parent, in thisChecking for SVG supportBy default this library assumes the client's browser supports SVG. You can test support as follows:ViewBoxAlternatively you can also supply an object as the first argument:viewbox:If the size of the viewbox equals the size of the svg canvas, the zoom value will be 1.Nested svgWith this feature you can nest svg documents within each other. Nested svg documents have exactly the same features as the main, top-level svg document:This functionality requires the nested.js module which is included in the default distribution.SVG documentSvg.js also works outside of the HTML DOM, inside an SVG document for example:ElementsRectEllipseCircleThe only argument necessary for a circle is the diameter:has been made to keep the size of the library down.LinePolylineThe polyline element defines a set of connected straight line segments. Typically, polyline elements define open shapes:As an alternative an array of points will work as well:PolygonThe polygon element, unlike the polyline element, defines a closed shape consisting of a set of connected straight line segments:Polygon strings are exactly the same as polyline strings. There is no need to close the shape as the first and last point will be connected automatically.PathThe path string is similar to the polygon string but much more complex in order to support curves:For more details on path data strings, please refer to the SVG documentation:/TR/SVG/paths.html#PathDataNote that paths will always be positioned at x=0, y=0 on creation. This is to makeafterwards. If you need to constantly update your path you probably don't want toso:This logic is also applicable to polylines and polygons.ImageTextUnlike html, text in svg is much harder to tame. There is no way to create flowing text, so newlines should be entered manually. In svg.js there are two ways to create text elements.The first and easiest method is to provide a string of text, split by newlines:This will automatically create a block of text and insert newlines where necessary.The second method will give you much more control but requires a bit more code:To get the raw text content:The sugar.js module provides some syntax sugar specifically for this element type:TextPathA nice feature in svg is the ability to run text along a path:into an intermediate between a text and a path element. From that point on theinstance itself:And they can be animated as well of course:Referencing the linked path element directly:UseThe use element simply emulates another existing element. Any changes on thevery straightforward:In the case of the example above two rects will appear on the svg canvas, theelement. the best way to do this is to create the original element in the defs node:In this way the rect element acts as a library element. You can edit it but it won't be rendered.Referencing elementsBy idIf you want to get an element created by svg.js by its id, you can useBy class nameThere is no DOM querying system built into svg.js but jQuery or Zepto will hep you achieve this. Here is an example:Circluar referenceManipulating elementsAttributesGet a single attribute:Set a single attribute:Set multiple attributes at once:Set an attribute with a namespace:Explicitly remove an attribute:Transformskewed:You can also provide two arguments as property and value:All available transformations are:overwrite any manually applied transformations. You should only go down this route if you know exactly what you are doing and you want to achieve an effectStyleMultiple styles can be set at once using an object:Or a css string:Or even a full getter:Explicitly deleting individual style definitions works the same as withMoveThis will have the same effect as:Note that you can also use the following code to move elements around:differ between element types. For example, rect uses the upper left corner withassign.The third argument can be used to move the text element by its anchor point rather than the calculated left top position. This can also be used on the individual axes:CenterThis is an extra method to move an element by its center:This will have the same effect as:The third argument can be used to center the text element by its anchor point rather than the calculated center position. This can also be used on the individual axes:Sizemuch more convenient.Hide and showWe all love to have a little hide:and show:To check if the element is visible:Removing elementsPretty straightforward:To remove all elements in the svg document:Bounding boxbasically being the bounding box of the two original bounding boxes:Rectagular boxelement, taking all transformations into account.Iterating over all childrenDeep traversing is also possible by passing true as the second argument:ColorsSvg.js has a dedicated color module handling different types of colors. Accepted values are:∙hex string; three based (e.g. #f06) or six based (e.g. #ff0066)∙rgb string; e.g. rgb(255, 0, 102)∙rgb object; e.g. { r: 255, g: 0, b: 102 }Note that when working with objects is important to provide all three values every time.Animating elementsInvoking an animationAnimating elements is very much the same as manipulating elements, the onlyAlternatively you can pass an object as the first argument:EasingAll available ease types are:∙∙∙∙∙ a functionFor more easing equations, have a look at the svg.easing.js plugin. Animatable methodsinstance of SVG.FX which will take the following methods:If you include the sugar.jsbe available as well:Stopping animationsAnimations can be stopped in two ways.Or by invoking another animation:Synchronising animationsIf you want to perform your own actions during the animations you can useanimation.To make things easier a morphing function is passed as the second argument.they can be a number, unit or hex color:Controlling animations externallySay you want to control the position of an animation with an external event, thenAfter animation callbackThis functionality requires the fx.js module which is included in the default distribution.Syntax sugarFill and stroke are used quite often. Therefore two convenience methods are provided:FillA single hex string will work as well:StrokeLike fill, a single hex string will work as well:OpacityTo set the overall opacity of an element:Rotatethe element:Although you can also define a specific rotation point:SkewScaleTranslateThis functionality requires the sugar.js module which is included in the default distribution.Masking elementsThe easiest way to mask is to use a single element:But you can also use multiple elements:If you want the masked object to be rendered at 100% you need to set the fill color of the masking object to white. But you might also want to use a gradient:For your convenience, the masking element is also referenced in the masked element. This can be useful in case you want to change the mask:theThis functionality requires the mask.js module which is included in the default distribution.Clipping elementsClipping elements is exactly the same as masking elements:Similar to masking, the clipping element can be referenced in the clipped element:This functionality requires the clip.js module which is included in the default distribution.Arranging elementsYou can arrange elements within their parent SVG document using the following methods.Move element to the front:Move element to the back:Move element one step forward:Move element one step backward:The arrange.js module brings some additional methods. To get all siblings of rect, including rect itself:Get the position (a number) of rect between its siblings:Get the next sibling:Get the previous sibling:Insert an element before another:Insert an element after another:This functionality requires the arrange.js module which is included in the default distribution.Grouping elementsGrouping elements is useful if you want to transform a set of elements as if it were one. All element within a group maintain their position relative to the group they belong to. A group has all the same element methods as the root svg document:Existing elements from the svg document can also be added to a group:This functionality requires the group.js module which is included in the default distribution.SetsSets are very useful if you want to modify or animate multiple elements at once. A set will accept all the same methods accessible on individual elements, even the ones that you add with your own plugins! Creating a set is exactly as you would expect:Quite a useful caracteristic of sets is the ability to accept multiple elements at once:Sets work with animations as well:A single element can be a member of many sets. Sets also don't have a structural representation, in fact they are just fancy array's.Iterating over all members in a set is the same as with svg containers:To remove an element from a set:Or to remove all elements from a set:GradientsThere are linear and radial gradients. The linear gradient can be created like this:The from and to values are also expressed in percent. Finally, to use the gradient on an element:the inner color should develop:A gradient can also be updated afterwards:And even a single stop can be updated:W3Schools has a great example page on how linear gradients and radial gradients work.This functionality requires the gradient.js module which is included in the default distribution.EventsEvents can be bound to elements as follows:Removing it is quite as easy:You can also bind event listeners to elements:Note that the context of event listeners is not the same as events, which areusing event listeners.Unbinding events is just as easy:But there is more to event listeners. You can bind events to html elements as well:Obviously unbinding is practically the same:DataSVG elements:Removing the data altogether:Your values will always be stored as JSON and in some cases this might not be desirable. If you want to store the value as-is, just pass true as the third argument:MemoryRememberStoring data in-memory is very much like setting attributes:Multiple values can also be remembered at once:To retrieve a memoryForgetErasing a single memory:Or erasing multiple memories at once:And finally, just erasing the whole memory:Extending functionalitySvg.js has a modular structure. It is very easy to add you own methods at different levels. Let's say we want to add a method to all shape types then we would add our method to SVG.Shape:Now all shapes will have the paintRed method available. Say we want to have the paintRed method on an ellipse apply a slightly different color:SVG.Ellipse < SVG.Shape < SVG.ElementThe SVG document can be extended by using:You can also extend multiple elements at once:PluginsHere are a few nice plugins that are available for svg.js:∙svg.draggable.js to make elements draggable.∙svg.easing.js for more easing methods on animations.∙svg.export.js export raw SVG.∙svg.filter.js adding svg filters to elements.∙svg.foreignobject.js foreignObject implementation (by john-memloom). ∙svg.import.js import raw SVG data.∙svg.math.js a math extension (by Nils Lagerkvist).∙svg.path.js for manually drawing paths (by Nils Lagerkvist).∙svg.pattern.js add fill patterns.∙svg.shapes.js for more polygon based shapes.BuildingStarting out with the default distribution of svg.js is good. Although you might want to remove some modules to keep the size at minimum.You will need ruby, RubyGems, and rake installed on your system.The resulting files are:1.2.example, 'clip' is removed, but 'group' and 'arrange' are added:To build the base library only including shapes:CompatibilityDesktop∙Firefox 3+∙Chrome 4+∙Safari 3.2+∙Opera 9+∙IE9 +Mobile∙iOS Safari 3.2+∙Android Browser 3+∙Opera Mobile 10+∙Chrome for Android 18+∙Firefox for Android 15+Visit the svg.js test page if you want to check compatibility with different browsers.Important: this library is still in beta, therefore the API might be subject to change in the course of development。

SVG快速入门

SVG快速⼊门SVG 全称是 Scalable Vector Graphics，即，⽮量图。

在 Web 中使⽤ SVG 可以解决位图放⼤失真的问题。

⾸先，不要把 SVG 和 CSS，Canvas，HTML 搞混。

他们之间并没有你中有我，我中有你的关系。

SVG 是通过 XML 的形式写在 HTML ⽂档中的。

如何书写开篇说过，SVG 就是⼀个 XML。

看⼀下代码吧：<svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100"><rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/><circle fill="white" stroke="black" cx="170" cy="50" r="45"/><polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62309,94 279,79 258,94 254,62 230,39 263,35"/><line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/><line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/></svg>⼤家看 svg 标签中带有⼀个 viewBox 的属性。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。

文章介绍了SVG元素的代码及其含意。

SVG元素分为图形元素、容器元素、图形引用元素、文本、SVG文档片断内容。

来源：SVG中国()1 图形元素SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。

(1) 矩形矩形用元素rect来表达代码：<rect width="200" height="100" fill="green"/>含意：绘制宽200像素，高100像素，填充色为绿色的矩形(2) 圆形圆形用元素circle来表达代码：<circler="50" fill="blue"/>含意：绘制半径为50像素，填充色为蓝色的圆形(3) 线段线段用元素line来表达代码：<line xl="50" yl="50" x2="200" y2="200" stroke="blue" stroke-width="10"/> 含意：从点(50,50)到点(200,200)绘制一条蓝色10像素宽的线段(4) 椭圆椭圆用元素ellipse来表达代码：<ellipse rx="100" ry="50" stroke="green"/>含意：绘制x轴半径为100像素，y轴半径为50像素，边线为绿色的椭圆(5) 折线折线用元素polyline来表达代码：<polyline points="100,0 93,16 72,26 43,25 13,11 -11,-13 -25,-43 -26,-72 -16,-93 0,-100 16,-93 26,-72 25,-43 11,-13 -13,11 -43,25 -72,26 -93,16 -100,0" stroke="green" stroke-width="1" fill=" none"/>含意：从点(100,0)开始，经过点(93,16), (72,26), (43,25), (13,11),(-11,-13),(-16,-93),(0,-100), (16,-93),(26,72),(25,-43),(11,43),(-13,11), (-43,25),( -72,26),( -93,16)，最后到点(-100,0)绘制一条线宽为1像素的绿色折线(6) 多边形多边形用元素polygon来表达代码：<polygon points="100,100 150,100 300,200 50,200" fill="blue"/>含意：以(100,100) (150,100) (300,200) (50,200)四个点为顶点绘制填充色为蓝色的多边形，该多边形是一个梯形(7) 路径路径用元素path来表达代码：<path d="m200,200 10,100 l200,0 10,-100 l-200,0" fill="green"/>含意：按动作定义一条填充色为绿色的路径“移动原点到(200,200)，向Y方向直线运动100，向X方向直线运动200，向Y的反方向直线运动100,向X的反方向直线运动200"，该路径表达了一个矩形2 容器元素容器元素用于将不同的元素组合起来使用。

<defs>元素作为一个容器元素使用，可以将稍后要使用的元素集合起来。

它通常和<use>元素结合使用。

<g>元素作为一个容器对象使用，将相关的图形对象组合起来。

在一个大型或复杂的图形中使用<g>元素非常有用。

3 图形引用元素图形引用元素(graphics referencing element)用对不同文档或元素的引用作为其图形内容的图形元素。

<image>元素用于将其它图像文件包括在一个已定义的矩形中。

<use>元素可以与<defs>这样的元素配合使用，来实例化前面定义但还没有表现的图形对象。

4 文本内容元素文本内容元素(text content element)是一个可以定义文本串的画在画布上的SVG元素，SVG文本内容元素有：<text>,<tspan>,<tref>,<textPath>和<altGlyph>等。

5 SVG文档片断SVG文档片断(SVG document fragment)是以<svg>元素开头的XML 文档子树。

SVG文档片断可以包含独立的SVG文档，或是另一个SVG文档片断。

当一个<svg>元素是另一个<svg>元素的子元素，就会有两个SVG文档片断，每个<svg>元素拥有一个片断。

以下用<svg>元素来代表SVG文档片断。

与<g>元素相比较，<svg>元素有一些特别有用的属性：(1) 可以拥有自己的位置属性即x和y属性，所有<svg>元素的子元素的位置完全相对于<svg>元素的位置。

这样只要改变<svg>元素的x或y就可以让所有子元素同时发生偏移。

(2) 可以拥有自己的高宽属性即width和height属性，所有超出<svg>元素高宽的子元素是不会显示出来的。

这样一些拉幕动画就可以实现了。

(3) 可以拥有显现属性即display属性，修改该属性可以让所有<svg>元素的子元素一起出现或隐藏。

这样整体一起的出现和消失就方便很多。

SVG语法教程指南中文版来源：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源代码，请打开此例，然后在窗口中右击。