SVG学习

dovedeng

    目前的Internet技术在图形图像方面，应该说还处在年轻阶段，从浏览器的核心技术来看，其对于图形图像的支持还仅仅局限于对图像的简单显示，随着应用的逐渐深入，图像技术自身的一些缺点，如文件较大、在不同设备上显示效果不同等问题日益突出，从某种程度上讲也限制了Web浏览技术的进一步发展。
    SVG是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，其全称是可扩展矢量图形规范（Scalable Vector Graphics）。其中，"可扩展"（scalable）在图形图像技术上指的是它不局限于一个固定的分辨率和大小，譬如可以在不同分辨率的屏幕上以相同的大小显示，也可以在同一个网页中以不同的大小或观全局或观细节；而在网络技术上指的是这一规范能够与其它规范相融合，从而满足更广泛的用户需求，适合于更广泛的应用方式。"矢量"（vector）是指规范中描述了直线、曲线、形状等几何图形，而无须象PNG、JPEG等图像格式那样逐象素进行描述，这使得集成了SVG的XML文档更小，下载速度也大大提高。"图形"（graphics）是指它提供了对矢量和矢量/栅格混合图形的描述，填补了大多数基于 XML的置标语言规范对复杂图形描述的空白。
    SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。
    在新近出台的SVG的第八个草案中，为SVG提供了两种不同的形式，即样式化SVG和交换型SVG，它们各自有不同的DTD及MIME类型。样式化SVG 允许对图形对象进行样式添加，它可以通过引用外部样式文件、在文件头中预先进行样式声明和通过属性为元素定义样式三种方式使用样式单，是SVG用于网络环境的推荐存储格式。而交换型SVG取消了对样式单的支持，完全使用元素属性描述各个图形对象的显示效果。在未来的网络传输中，交换型SVG将会充当现在印刷业广泛使用的图形格式--EPS格式的网络版。并且，由于所有显示信息都封装到XML的属性中，交换型SVG还可以作为XSLT转换后所得到的结果文件格式，广泛应用于XML文档显示效果的描述中。
   
* 基本 SVG 文档
从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性：
*所以的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如。
* 标记必须正确嵌套。 如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，Hello there! 是正确的，但 Hello there! 不正确。
*文档必须只有一个根。正如一个  元素包含了一个 HTML 页面的所有内容一样，一个  元素也包含一个 SVG 文档的所有内容。
*文档应该以 XML 声明  开始。
*文档应该包含一个 DOCTYPE 声明， 该声明指向一个允许元素的列表。SVG 1.0 文档的 DOCTYPE 声明是：
All SVG documents should have a description
* 在HTML页面上包含SVG
    SVG 文档本身就非常有用，但在目前（目前它仍处于开发阶段）将它们添加到 Web 页面会发挥它们最大的作用。将它们添加到 Web 页面也使得在浏览器中显示它们变得更容易；根据用户系统的文件名关联的设置情况，有些浏览器会拒绝打开一个 *.svg 文件，但显示作为 Web 页面一部分的 SVG 图像将不会有问题。
将 SVG 图像添加到 HTML 页面很简单：只要添加一个具有适当属性的  元素即可：
SVG Demonstration
SVG Demonstration
A page may have other code besides the SVG image.
Using objects allows the browser to decide what to display.
    请特别注意  标记上的 height 和 width 属性。如果没有指定它们，有些浏览器将不会正确显示图像。此外，浏览器在执行某些计算（最特别的是用 viewBox 缩放）会考虑这些值，因此，如果没有正确地指定它们（如简单地用大的数值显示可能出现的任何东西），它们可能会干扰图像的正确显示。
   
* 基本 SVG 形状
SVG 定义了六种基本形状，这些基本形状和路径（在路径是什么？中讨论）一道，可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：
    圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
    椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
    矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。
    线（line）：显示两个坐标之间的连线。
    折线（polyline）：显示顶点在指定点的一组线。
    多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。
    下面的示例演示了这些形状：
Basic shapes

xml学习资料：
http://bbs.xml.org.cn/dispbbs.asp?boardID=35&ID=6192
SVG参考手册：
http://www.w3school.com.cn/svg/svg_reference.asp
SVG基础教程：
http://www.chinasvg.com/index.php?option=com_content&task=view&id=9&Itemid=5


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u1/42966/showart_375592.html