SVG详细解释

一、svg是什么？

        SVG 意为可缩放矢量图（Scalable Vector Graphics）。

        SVG 是使用XML来描述二维图型和绘图程序的语言

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

        SVG 是万维网联盟的标准。

        SVG 与诸如 DOM （文档对象模型）和 XSL（拓展样式表语言） 之类的 W3C标准是一个整体

二、svg的优势

        与其他图像格式相比（比如JPEG 和 GIF）,使用 SVG 的优势在于 ：

         SVG 图像可通过文本编辑器来创建和修改； 

         SVG 图像可被搜索、索引、脚本化或压缩；

         SVG 是可伸缩的；

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

         SVG 可在图像质量不下降地情况下被放大；

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

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

         SVG 是开放的标准

         SVG 文件时纯粹的 XML

三、浏览器的支持情况

        

四、标签的运用

SVG 形状

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

• 矩形 <rect>

         x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
         y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
         CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
         CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

• 圆形 <circle>

        cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

r       属性定义圆的半径。

• 椭圆 <ellipse>

        cx 属性定义原点的 x 坐标

        cy 属性定义原点的 y 坐标

        rx 属性定义水平半径

        rx 属性定义垂直半径

• 线 <line>

        x1 属性在 x 轴定义线条的开始

        y1 属性在 y 轴定义线条的开始

        x2 属性在 x 轴定义线条的结束

        y2 属性在 y 轴定义线条的结束

• 折线 <polyline>

        <polyline> 标签用来创建仅包含直线的形状

• 多边形 <polygon>

        points 属性定义多边形每个角的 x 和 y 坐标

• 路径 <path>

        M = moveto

        L = lineto

        H = horizontal lineto

        V = vertical lineto

        C = curveto

        S = smooth curveto

        Q = quadratic Belzier curve

        T = smooth quadratic Belzier curveto

        A = elliptical Arc

        Z = closepath

SVG基础的标签

        circle 圆
        fill 填充 值:颜色
        cx 中心x轴, cy 中心Y轴, r 圆半径
        stoke 描边 值:颜色
        stroke-width 描边宽度 值:数字
        stroke 描边 值:颜色
        rect 矩形
        height 高 值:数字
        width 宽 值:数字
        fill 填充 值:颜色
        stroke 描边 值:颜色
        stroke-width 描边 宽度 值:颜色
        x,y 矩形左上角的X轴Y轴位置 值:数字
        rx,ry 矩形X轴与Y轴的圆角 值:数字，当只有一个值时，X轴Y轴圆角一致。
        x1,y1 起点位置 值:数字
        x2,y2 终点位置 值:数字
        stroke-width 直线宽度 值:数字
        stroke-opacity 透明度 值:数字0-1
注意: line直线只有stroke，没有fill。
        text 文本
        font-size 文本大小 值:数字 单位:rem，em，px，默认px
        x，y 开始绘制文本的X轴与Y轴位置 具体由text-anchor属性决定。
        text-anchor 文本水平对齐方式 值:start 开始位置， middle 中心位置，end 末尾位置
        image 图片
        width height 宽高 值:数字
        x,y 图片左上角位置 值:数字
        xlink:href 图片路径 值:字符串
        clip-path 裁剪路径 值:半径
        stroke-opacity 描边透明度 值:数字0-1
        fill-opacity 填充透明度 值:数字0-1
        clip-path 裁剪路径 第一个值 形状半径。
        折线 polyline
        points 位置 值 数字，points=x1,y1 x2,y2 ...,如:points=0 100 200 200，0 100表示第一个点，200     200表示第二个点。
        多边形 polygon
        属性与折线差不多，只不过多边形会闭合路径。
        path 路径
        d 属性
        M开辟新路径 值:x，y L路劲连接 值:x，y
        Z闭合路径 无值
        H 水平路径 x值 ，V垂直路径 Y值
        M L Z H 与 m l z h 区分大小写 ，绝对位置与相对位置。
        A 属性 ，A属性是d属性里的一个子属性。
        - x,y 半径
        - 角度
        - 弧长
     ○ 0 小弧， 1 大弧。
        - 方向
     ○ 0 逆时针， 1 顺时针。
        - 结束点，x，y

五、SVG与canvas的区别