阅读更多
w3schools SVG教程
在W3 SCHOOLS上看到此教程,花了一天时间翻译,主要是借此机会学习,初次翻译,见笑!
一、Introduction to SVG-Svg初步
SVG is a language for describing 2D graphics and graphical applications in XML.
Svg 是一种基于xml语言的定义二维图形的应用程序。
What you should already know-你应该预先知道什么？
Before you continue, you should have some basic understanding of the following:
在继续学习之前，你应该确保你有以下知识基础：
HTML
Basic XML
If you want to study these subjects first, find the tutorials on our Home page.
如果你想先学习一下这些知识。请访问我们的主页。
What is SVG?
什么是svg?
SVG stands for Scalable Vector Graphics
Svg指的是Scalable Vector Graphics （可伸缩向量图形）
SVG is used to define vector-based graphics for the Web
Svg用来定义面向web的向量图形。
SVG defines the graphics in XML format
Svg基于xml语言定义图形。
SVG graphics do NOT lose any quality if they are zoomed or resized
当你伸缩或重新设置图形大小时，svg图形不损失质量。
Every element and every attribute in SVG files can be animated
Svg里的每一个元素和属性都可以自定义。
SVG is a World Wide Web Consortium (W3C) recommendation
Svg是一个W3C推荐标准。
SVG integrates with other W3C standards such as the DOM and XSL
Svg可以和W3C的其他推荐标准结合使用。
SVG History & Advantages-SVG的历史和优点
SVG 1.1 became a W3C Recommendation in January 2003.
SVG 1.1在2003年1月成为了w3c的推荐标准
Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the well-known organizations that have been involved in defining SVG.
Sun Microsystems, Adobe, Apple, IBM, and Kodak是一些参与定义SVG的著名公司。
Advantages of using SVG over other image formats (like JPEG and GIF):
与其他图形格式（jgeg&gif）使用SVG的优点如下：
Ø SVG files can be read and modified by a large range of tools (e.g. notepad)
Ø SVG 文件可以被很多的工具（比如记事本）阅读和编辑。
Ø SVG files are smaller and more compressible than JPEG and GIF images
Ø SVG 文件比 JPEG和GIF更小压缩比更大。
Ø SVG images are scalable
Ø SVG图像是可压缩的。
Ø SVG images can be printed with high quality at any resolution
Ø SVG图像可以以任何分辨率高清晰打印。
Ø SVG images are zoomable. Any part of the image can be zoomed without degradation
Ø SVG图像是可缩放的。图像的任何部分都可以无损失缩放。
Ø Text in SVG is selectable and searchable (excellent for making maps)
Ø SVG里的文字是可供选择和搜索（制作地图的良好功能）
Ø SVG works with Java technology
Ø SVG可以和java技术共同工作
Ø SVG is an open standard
Ø SVG是一个开放标准
Ø SVG files are pure XML
Ø SVG文件是纯xml的。
The main competitor to SVG is Flash. The two have a lot of similar features. The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source.
svg的主要竞争对手是flash。两者又很多的相似特征。和flash相比的最大优点是与其他标准（比如XSL&DOM）的一致性。Flash基于的专利技术不是开放的。
The major drawback of SVG at the moment is that no browser fully supports SVG. However, the future of SVG seems bright: Mozilla and Microsoft plan to fully support SVG. Adobe GoLive 5 already supports SVG and the number of SVG editors are growing.
当前，svg的最大缺点是没有完全支持svg的浏览器。但是，svg的未来是非常光明的： Mozilla 和Microsoft计划完全支持svg。Adobe GoLive 5已经完全支持svg，svg编辑软件的数量也在扩大。
Look at the official W3C list of implementations of SVG
To view SVG files today, you will have to install a plug-in such as the Adobe SVG Viewer.
现在你必须安装类似the Adobe SVG Viewer的插件才能浏览svg文件。
[此贴子已经被admin于2006-4-9 22:26:11编辑过]
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:
[email protected] password:svg.net.cn
2006-4-8 19:42:00 鲜花(0) 鸡蛋(0)
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第2楼
因为不支持html代码，有部分没有发布出来，完整版本请参阅我的blog
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:
[email protected] password:svg.net.cn
2006-4-8 19:46:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第3楼
二、SVG Example－svg实例
SVG is written in XML.－svg是用xml书写的
The following example is an example of a simple SVG file. SVG files must be saved with an .svg extension:
下面的例子是一个svg的简单实例，svg文件必须存为扩展名为.svg。
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Code explanation:－代码解释
The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.
第一行包含了xml声明。注意standalone属性，这个属性规定本svg文件是独立的还是包含一个对外部文件的引用。
standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.
standalone="no"意味着本svg文档包含一个对外部文件的引用，比如说DTD文件。
The second and the third line refer to the external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all allowable SVG elements.
第二、三行指定外部的DTD。该DTD"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"，在W3C网站上，并包含所有可用的svg元素。
The SVG code begins with the
element, which consists of the opening tag and the closing tag. This is the root element. The width and height attributes set the width and height of the SVG document. The version attribute defines the SVG version to be used and the xmlns attribute defines the SVG namespace.
开始，包含开始标签和结束标签 .width和height属性用来设置svg文档的宽和高。Version属性定义了svg的版本，xmlns属性定义了svg的名称空间。
element is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0). The r attribute defines the radius of the circle.
元素用来划一个圆。cx 和 cy属性定义了圆中心点的x，y坐标。如果cx，cy省略，圆以（0，0）点为中心。r属性定义了圆的半径。
tag closes the root SVG element and the document.
标签结束了svg根元素和本文档。
Note: All opening tags must have closing tags!
注意：所有开始标签必须有对应的结束标签。
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:
[email protected] password:svg.net.cn
2006-4-8 20:02:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第4楼
三、SVG In HTML Pages
SVG files can be embedded into HTML documents with the
tag, the tag, or the
This is an HTML paragraph
[email protected] password:svg.net.cn
Tag
tag is used to create a rectangle and variations of a rectangle shape.
用来生成矩形或矩形的变种。
怎么工作，复制下面的代码到记事本，然后保存为rect1.svg到你的网页目录。
[email protected] password:svg.net.cn
tag is used to create a circle.
属性用来创建一个圆
tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
标签用来创建一个椭圆。椭圆类似于圆.不同仅仅在于椭圆有下x，y两个值不同半径，而圆的x，y半径值相同。
[email protected] password:svg.net.cn
tag is used to create a line.
标签用来创建一条直线。
tag is used to create a graphic that contains at least three sides.
标签用来创建一个多于三个边的图形。
tag is used to create any shape that consists of only straight lines.
用来创建由任意直线组成的图形
tag is used to define a path.
标签用来创建一条路径
[email protected] password:svg.net.cn
tag.
标签里定义。
tag is used to define an SVG filter. The tag has a required id attribute which identifies which filter will be applied to the graphic.
标签用来定义一个svg滤镜。标签有一个必须的id属性来唯一标识该滤镜应用到图像中。
tag must be nested within a tag. The tag is short for definitions and it allows definition of special elements such as filter.
标签必须嵌套到标签里，标签是definitions的简写，允许特殊标签的定义。如filter
tag defines a unique name for the filter (the same filter can be used by many elements in the document)
的id属性定义filter的唯一标识名(滤镜可以文档中的多个元素使用)
tag. The fe prefix is used for all filters
标签里定义的。fe前缀对所有滤镜有用
tag defines the amount of the blur
stdDeviation属性用来定义blur的值
style="fill:#ff0000;stroke:#000000;
tag.
标签里定义
tag is used to define an SVG linear gradient.
标签用来定义一个svg线性渐变
tag must be nested within a tag. The tag is short for definitions and it allows definition of special elements such as gradients.
标签必须嵌套在标签里。标签是definitions的简写，允许特殊标签的定义，比如gradients。
tag defines a unique name for the gradient
标签的id属性定义渐变的唯一标识名。
tag define the starting and ending position of the gradient
标签的x1,x2,y1,y2属性用来定义渐变的首尾位置
tag. The offset attribute is used to define where the gradient color begin and end
标签描述。Offset属性用来定义渐变首尾的颜色。
tag is used to define an SVG radial gradient.
标签用来定义一个svg径向渐变。
tag must be nested within a tag. The tag is short for definitions and it allows definition of special elements such as gradients.
标签必须嵌套在标签里。标签是definitions的简写，允许特殊标签的定义，比如gradients。
tag defines a unique name for the gradient
的id属性定义了渐变的唯一标志名
tag. The offset attribute is used to define where the gradient color begin and end
标签描述。Offset属性用来定义渐变首尾的颜色。
[email protected] password:svg.net.cn
