SVG学习日志-入门

SVG学习日志-入门

在此,先引用W3C教程中的一段话,

与其他图像格式相比,使用 SVG 的优势在于:
  • SVG 可被非常多的工具读取和修改(比如记事本)
  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

    SVG的主要竞争者是Flash。
    与Flash相比,SVG最大的优势是与其他标准(比如XSL和DOM)相兼容。
    而 Flash则是未开源的私有技术。
    

    不知道前面这段话是什么时候写的,个人认为现在SVG的主要竞争者已经从Flash转变成了Canvas,Flash已经逐渐的退出了这场竞争。


SVG

SVG是可缩放的矢量图形(Scalable Vector Graphics)是基于可扩展标记语言XML的,用于描述二维矢量图形的一种图像格式。

浏览器支持情况:

目前除IE(Internet Explorer)浏览器以外,其他的浏览器都可支持SVG,IE9.0版本(在IE9-10环境中SVG貌似存在一些坑,各位可以自行体验)开始支持SVG,对SVG支持最好的是Opera浏览器

SVG的使用


    /** 矩形
     * rect 元素的 width 和 height 属性可定义矩形的高度和宽度
     * style 属性用来定义 CSS 属性
     * CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
     * CSS 的 stroke-width 属性定义矩形边框的宽度
     * CSS 的 stroke 属性定义矩形边框的颜色
     */
    
    /** 圆形
     * cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)
     * r 属性定义圆的半径。
     */
    
    /** 椭圆
     * cx 属性定义圆点的 x 坐标
     * cy 属性定义圆点的 y 坐标
     * rx 属性定义水平半径
     * ry 属性定义垂直半径
     */
    
    /**
     * 画线
     * x1 属性在 x 轴定义线条的开始
     * y1 属性在 y 轴定义线条的开始
     * x2 属性在 x 轴定义线条的结束
     * y2 属性在 y 轴定义线条的结束
     */
    
    /**
     * points 属性定义多边形每个角的 x 和 y 坐标
     */
    
    /**
     * points 属性定义折线每个转折点的 x 和 y 坐标
     * fill: 折线是否填充颜色(起点、终点自动连线补充)
     */
    
    /**
     * M = moveto 起点
     * L = 直线
     * H = 竖线(仅需一个参数,两个参数时自动转换为两个参数的和,在此不做举例)
     * V = 横线(仅需一个参数,两个参数时自动转换为两个参数的和,在此不做举例)
     * Z = 闭合(绘制闭合图形,如不添加则只绘制线段)
     * */
    
    /**
     * C = 曲线(每两个数字一组,前两组数字为曲线控制点,第三组为曲线终点)
     */
    

path还有S、Q、T、A等命令,由于没有涉及顾不做解释。(-。-)其实就是自己没看明白!!

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。


啦啦啦!!!就写到这里吧!什么滤镜!什么高斯滤镜什么的!!!!下次再说吧!!!!
(目前用不着O.O,下次需要用再说吧!)

你可能感兴趣的:(SVG学习日志-入门)