svg学习

什么是svg

 

- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

- SVG 用来定义用于网络的基于矢量的图形

- SVG 使用 XML 格式定义图形

- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

- SVG 是万维网联盟的标准

- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

 

与其他的图像格式相比。使用svg的优势在于：

 

- SVG 可被非常多的工具读取和修改（比如记事本）

- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

- SVG 是可伸缩的

- SVG 图像可在任何的分辨率下被高质量地打印

- SVG 可在图像质量不下降的情况下被放大

- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

- SVG 可以与 Java 技术一起运行

- SVG 是开放的标准

- SVG 文件是纯粹的 XML

 

SVG的主要竞争者是FLash

 

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

 

第一个例子第一个例子

 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

 

 

SVG常用的标签

 

<circle></circle>  cx="value"  cy="value"(圆心位置)   stroke="blue"(边框颜色) 

     storke-width="value"(边框的宽度)  fill="red"(内填充颜色)

 

<rect  x="10" y="10" (矩形的左上点距离屏幕的相对距离)   width="200" height="200" (矩形的宽高)

     style="fill:blue; storke:pink; fill-opacity:0.1 storke-opacity:0.89"

></rect>