svg 学习 - 基础知识

参考
w3school => svg-v1.1
svg-mdn
菜鸟教程
参考手册
百度文库-svg基础

其他网站
与其他文件类型进行转换:链接
显示 svg 工具:链接 | 链接

what

SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),即放大或者缩小不失真,使用 XML 格式定义图形。
包含形状、样式、标记、滤镜、渐变等。
预定义了七种形状元素:矩形(rect)、圆形(circle)、椭圆(ellipse)、线段(line)、折线(polyline)、多边形(polygon)、路径(path)

why

与其他图像格式相比,使用 SVG 的优势有以下几点:

  • SVG 可被非常多的工具读取和修改(比如记事本)
  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML
  • 相比 css 来讲,兼容性更好,早于 css3 实现一些特殊效果,功能强大

适用于 大型渲染区域,如百度地图,不适合游戏。用途:

  • 静态图形绘制
  • 动态动画效果
  • 专门事件绑定

how

入门实例


    

要点说明:

  1. 以 svg 标签包含,version 为 svg 的版本,xmlns 定义 svg 命名空间
  2. circle 标签创建一个圆,cx 和 cy 属性定义圆的中心坐标,默认是(0,0),r 为半径, fill 为填充颜色, stroke-width 为边框宽带

坐标定位

对于所有元素,SVG 使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多)。这种坐标系统是:以页面的左上角为 (0,0) 坐标点,坐标以像素为单位,x 轴正方向是向右,y 轴正方向是向下。注意,这和你小时候所教的绘图方式是相反的。但是在 HTML 文档中,元素都是用这种方式定位的。


内置图形的 html 属性 或 css 样式

fill(填充颜色)
fill-opacity(填充透明度)

stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
stroke-linecap(路径的终结样式)

transform(变换)
filter(滤镜)(url[#滤镜id])

常见图形用法

1. 矩形(rect)


  

试一试

  • x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
  • y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
  • rx 和 ry 属性可使矩形产生圆角。

2. 圆形(circle


  

  • cx 属性定义的椭圆中心的x坐标
  • cy 属性定义的椭圆中心的y坐标

3. 椭圆(ellipse)


  

  • rx 属性定义的水平半径
  • ry 属性定义的垂直半径

4. 线段(line)


  

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

5. 折线(polyline)

元素是用于创建任何只有直线的形状。


  

6. 多边形(polygon)

标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。


  

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

7. 路径(path)


    

  • d 路径数据:
    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Bézier curve
    T = smooth quadratic Bézier curveto
    A = elliptical Arc
    Z = closepath
    

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


8. 文本(text)


  
    I love SVG
    
  


  
    
  
   
  
    I love SVG I love SVG
  

9.

所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素(如滤镜)定义。
标签用来定义SVG滤镜。



    
        
          
    


    
    
    
    

 
  • 定义可复用的部件
  • 定义统一的样式

10. 事件

常用的时间有 onclick \ onactivate \ onmousedown \ onmouseup \ onmouseover \ onmousemove \ onmouseout \ onload \ onresize \ onunload \ onrepeat

svg 嵌入 Html 中




   

svg 滤镜

新增参考连接:链接->点击 | 链接2

SVG可用的滤镜是(19个):

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting - 散射光照明
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting - 镜面照明
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

可以用滤镜实现想要的模糊、阴影等等效果(用来增加对SVG图形的特殊效果),类似 css 滤镜中blur()、contrast()、drop-shadow(), for example:


  
    
      
      
    
  
  

  • 元素id属性定义一个滤镜的唯一名称
  • in="SourceGraphic"这个部分定义了由整个图像创建效果
  • 元素的滤镜属性用来把元素链接到"f1"滤镜
  • result 用于 中间结果的输出(也称作 primitives 图元),其他滤镜可以使用 in 属性导入 result
  • in2 用于接收某个 result 输出,在此效果上面进行过滤

多个滤镜合并使用

在不同的滤镜利用 result 和 in 属性,可以实现在前一个基本变换基础上建立另一个操作。其中可能涉及的标签可能有feComposite|feMerge|feFlood等。

  • feMerge 滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。
  • 遵循 后输入 的层级更高的原则。

  
    
      
      
      
    
  
  

标签属性

基本每个滤镜标签都有的属性:

x,y - 坐标
width,height - 宽|高
result - 定义一个滤镜效果的输出名称,以便 in
in - 指定滤镜效果的输入源,可以是某个 result ,也可以是下面 6 个值:
    SourceGraphic - 图形元素本身作为 输入源
    SourceAlpha - 与 SourceGraphic,相比不同在于 只使用元素的非透明部分
    BackgroundImage 
    BackgroundAlpha
    FillPaint
    StrokePaint

混合模式

css 中,有混合模式 mix-blend-modebackground-blend-mode
svg 中有 5 个 - normal(正常) | multiply(正片叠底) | screen(滤色) | darken(变暗) | lighten(变亮)

该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值([红,绿,蓝,透明度]的矢量)都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。

// 包含两个私有属性
type:  saturate | hueRotate | luminanceToAlpha | matrix
values:  0.0 - 1.0 | 0.0 - 360 | 只有一个效果 | 4x5 的矩阵

saturate 和 hueRotate 与 css 中 filter 中的 saturate 和 hue-rotate 作用一模一样。

图形的表示:数字图形的本质是一个多维矩阵,把图像的R分量放进红色通道里,B分量放到蓝色通道里,G分量放到绿色通道里,经过处理,显示在屏幕上的是我们看到的彩色图像。

// 矩阵计算得到 rgba() 值
/*R G B A 1*/
1 0 0 0 0 = 1*R + 0*G + 0*B + A*0 + 0 //R
0 1 0 0 0 = 0*R + 1*G + 0*B + A*0 + 0 //G
0 0 1 0 0 = 0*R + 0*G + 1*B + A*0 + 0 //B
0 0 0 1 0 = 0*R + 0*G + 0*B + A*1 + 0 //A

两种光源及其他

光照滤镜

是 svg 区别于 css 的独特魅力。
feSpecularLighting(镜面照明) | feDiffuseLighting (散射光照明) 都为光照滤镜,使用它们照亮一个源图形。
feDiffuseLighting : 来自外部光源,适合模拟太阳光或者灯光照明
feSpecularLighting : 指定从反射面反射的二次光

形态滤镜

feMorphology :形态滤镜,输入源是 图形的 alpha 通道,利用 operator 设置腐蚀(变薄 erode)或者扩张(加粗 dilate), 默认 erode, radius 标识笔触的大小,该模式下的效果程度,默认 0 。

纹理滤镜

turbulence 为 湍流,不稳定气流,svg 能够实现半透明或者波状图像,利用 Perlin 噪声函数 可以实现 人造纹理。
feTurbulence : 可以创建纹理图作为置换图,不需要借助外部图形的纹理效果,即可创建复杂的效果。三个需要注意的属性:

type - fractalNoise (分形噪声更加平滑,更接近云雾)| turbulence (湍流噪声)
baseFrequency - 噪声函数的基本频率的参数,频率越小,产生的图形越大, 取值在 0.02 ~ 0.2 
numOctaves - 噪声函数的精细度,数值越高,噪声更详细,默认值为 1

示意两种噪声效果

映射置换滤镜

feDisplacementMap 为映射置换滤镜,需要掌握很多 PhotoShop 纹理创建或者是图形色彩相关的知识。使用该滤镜用于改变元素和图形的像素位置,将遍历原图的所有像素点,映射到新的位置,形成新图形。可以将纹理滤镜过后的图形进行形变、扭曲、液化等等,转化的一个公式-P(x + scale * (XC*(x,y) - 0.5, y + scale * (YC*(x,y) - 0.5) → P(x,y)

svg 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型:

  • Linear(线性渐变)
  • Radial(放射渐变)

标签必须嵌套在的内部。
线性渐变可以定义为水平,垂直或角渐变:

  • 当y1和y2相等,而x1和x2不同时,可创建水平渐变
  • 当x1和x2相等,而y1和y2不同时,可创建垂直渐变
  • 当x1和x2不同,且y1和y2不同时,可创建角形渐变

  
    
      
      
    
    
      
      
    
    
  
  
  

  • 可以利用 class 或者 idstyle 里面写 fill 或者 filterurl 是 css 滤镜属性的关键字之一,允许引入特定的 svg 过滤器,极大增强了 css 滤镜的能力。

好用的库

svg.js

  • 更加接近原生 svg 语法,可以直观的操作 svg。svg.js 更快,兼容性好,上手更方便。
  • 免费开源。轻量级,总共只有16kb。

Snap.svg

  • Snap.svg 更接近 jquery 的语法,其更全,功能丰富。
  • JavaScript库,可以跨任何类型的 svg 工作,包括从 Illustrator\InkScape 或者 HTML。

其他

Paper.js, 拉斐尔, Two.js, Velocity.js, Vivus.js

如果您都能看到这里了,对您有用的话,可以点个赞不@*@

你可能感兴趣的:(svg 学习 - 基础知识)