SVG基础学习

       SVG可缩放矢量图形（ScalableVector Graphics）是基于svg logo可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。

        SVG包括3种类型的对象： 矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。

       与传统的图像格式不同的是，SVG采用文本来描述矢量化的图形，这使得SVG图像文件可以像HTML网页一样有着很好的可读性。当用户用图像工具输出SVG后，可以用任何文字处理工具打开SVG图像，并可看到用来描述图像的文本代码。掌握了SVG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。

svg特点：

1．任意放缩。

    用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

2．文本独立。

    SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

3．较小文件。

    总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

4．超强显示效果

    SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。

           Internet Explorer9、Firefox、Opera、Chrome以及Safari支持内联 SVG。

SVG 有一些预定义的形状元素，可被开发者使用和操作：

•矩形 <rect>

•圆形 <circle>

•椭圆 <ellipse>

•线 <line>

•折线 <polyline>

•多边形 <polygon>

•路径 <path>

rect 元素的width 和 height属性可定义矩形的高度和宽度

style 属性用来定义 CSS属性

CSS 的 fill属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

CSS 的 stroke-width属性定义矩形边框的宽度

CSS 的 stroke属性定义矩形边框的颜色

CSS 的 fill-opacity属性定义填充颜色透明度（合法的范围是：0 - 1）

CSS 的 stroke-opacity属性定义笔触颜色的透明度（合法的范围是：0 - 1）

svg命名空间:

<svg xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink”>

</svg>

svg可以相互嵌套,可嵌套任意个:

<svg>

<svg></svg>

<svg></svg>

</svg>

svg标签介绍:

        <g>元素用于组SVG形状在一起。分组后就可以改变整组的形状，就好像它是一个单一的形状。

        svg本身不能被，要想其能被移动，则必须嵌入<g>元素，通过transform = “translate(x,y)”来设置X,Y属性。

        <rect>矩形的位置是由x和y的属性来确定,这个位置是相对于任何封闭（父）元素的位置。矩形的大小是由宽度和高度属性来确定。 rx和ry可以设置圆角.若只设置了rx,则ry默认与rx相同。

 <rect x="10" y="10"height="100" width="100" rx="5" ry="5"  style="stroke:#006600; fill: #00cc00“/>

<circle cx="40"cy="40" r="24" style="stroke:#006600;fill:#00cc00"/>

<ellipse cx="40"cy="40" rx="30" ry="15" style="stroke:#006600;fill:#00cc00"/>

<linex1="0" y1="10" x2="0" y2="100"style="stroke:#006600;"/>

<textx="20" y="40">Example SVG text 1</text>

<text x="10" y="20"> Here is a<tspanstyle="font-weight: bold;">bold</tspan> word. </text>

<imagex="20" y="20" width="300" height="80" xlink:href="http://jenkov.com/images/layout/top-bar-logo.png"/>

<a xlink:href="/svg/index.html"target="_top"> <rect x="10" y="20" width="75"height="30" style="stroke: #333366; fill: #6666cc"/></a>

<svg> <defs> <g id="shape"> <rect x="50"y="50" width="50" height="50" /> <circle cx="50"cy="50" r="50" /> </g> </defs> <use xlink:href="#shape"x="50" y="50" /> <use xlink:href="#shape" x="200" y="50"/> </svg>