使用SVG

发表于 | 分类于

什么是SVG?

SVG(Scalable Vector Graphics 可缩放矢量图标)是一种XML应用，简约而不简单呐，可以以一种简洁、可移植的形式表示图形信息，具有强大的矢量图形绘制及动态交互功能，并提供丰富的视觉效果。目前，在网页设计中出现越来越多的SVG图形，大多数现代浏览器都能显示SVG图形，并且大多数矢量绘图软件都能导出SVG图形。

SVG基础

​ SVG是一种专门为网络而设计的基于文本的图像格式，与XML高度兼容，且开放标准，所以可拓展性很强，能够描述任何复杂的图像

SVG发展历史

1998年 W3C收到两个关于新的图形格式的提案：PGML和VML 。虽然PGML 和 VML 都是基于CSS的XML标记语言，但是二者却是竞争对手。

​ 为了更好的促进XML矢量图形的发展，W3C决定在融合两者优点的基础上，开发一种新的语言SVG。 W3C期望SVG这种基于开放标准的可扩展语言能够满足Web开发者对动态、可缩放和平台无关的Web内容表现和交互手段日益增长的需求。

SVG特点

  1. 超强的交互性

    ​ SVG能够轻易地制作强大的动态交互。利用设计完善的DOM接口进行编程，动态的生成包含SVG图形的Web页面，能对用户操作做出不同的响应。例如：高亮、声效、特效等体现了网络交互的本质。

  2. 文本独立性

    ​ SVG图像中的文字独立于图像，文字标注也可被动态的移动和缩放，方便用户对SVG图像内的文字进行基于图形的查询，图像中的文字被搜索引擎作为关键字搜索已经不再是梦想。

  3. 高品质矢量图

    ​ SVG图像的清晰度适合任何屏幕分辨率或打印分辨率。用户可以自由的缩放图像而不会破坏图像的清晰度，这对于查看某些图像细节的应用非常有用。

  4. 超强颜色控制

    ​ SVG具有一个1600万色彩的调色板，支持ICC标准、RGB、线性填充和遮罩。

  5. 基于XML

    ​ 通过XML来表达信息、传递数据、不仅跨越平台、还跨越空间，更跨越设备。

##在XTML中应用SVG

​ SVG 文件可以通过一下元素嵌入XTML文档 <embed> <object> <iframe>。SVG代码也可以直接嵌入到XTML页面中，或者直接连接到SVG文件。

  1. 使用<embed>元素
    • 优点：所有主要浏览器都支持，并允许使用脚本。
    • 缺点：不推荐在HTML4和XHTML中使用，但在HTML5中允许
1
2
3
4
具体用法：

​```html
<embed src="test.svg" type = "image/svg+xml">;

  1. 使用<object>元素

    • 优点：所有主要浏览器都支持，并支持HTML4和XHTML和HTML5标准。
    • 不允许使用脚本

    具体使用：

    1
    <object data = "test.svg" type = "image/svg+xml"> </object>

  2. 使用<iframe>元素

    • 优点:所有主要浏览器都支持 并允许使用脚本

    • 缺点：不推荐在HTML4和XHTML中使用，但在HTML5中允许

具体语法：

1
<iframe src = "test.svg"></iframe>

  1. 直接在HTML嵌入SVG代码
    在Firefox 、IE9+、Chrome和Safari中，可以直接在HTML嵌入SVG代码。但SVG不能直接嵌入到Opera。

    【示例】下面是一个简单示例

    ​

1
2
3
4
5
6
7
<html>
  <body>
    <svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
      <circle cx = "100" cy = "50" r = "40" stroke = "black" stroke-width = "2" fill = "red" />
    </svg>
  </body>
</html>

  1. 连接到SVG文件

    ​ 可以使用<a>元素连接到一个SVG文件

    例如：

    1
    <a href = "test.svg">View SVG file </a>

    ​

使用SVG

​ SVG预定义很多元素，用来绘制各种图形。SVG元素是一组事先定义好的如何绘制图像的指令集，由解析器负责解析，并把SVG图像在指定设备上渲染出来，使用SVG可以在页面上显示出各种高质量的矢量图形，支持很多常见的图形图像功能，如几何图形变换、动画效果、渐变色、滤镜效果、嵌入字体和透明效果等。

  1. 矩形

    ​ 使用<rect>元素可以创建矩形，以及矩形的变种，包含属性说明如下

    • x：矩形的左上角的x轴。

    • y: 矩形的左上角的x轴。

    • rx: x轴的半径（round元素）。

    • ry: y轴的半径（round元素）。

    • width: 矩形的宽度。必需的。

    • height： 矩形的高度，必需的。

      显现属性包括:Color、FillStroke、Graphics

使用<rect>元素绘制一个矩形

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
  <svg xmlns ="http://www.w3.org/2000/svg" version = "1.1">
  	<rect width = "300" height = "100" 
          style = "fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)"/>
  </svg>
</body>
</html>
<-- fill 属性 定义矩形的填充颜色 取值可以是rgb 颜色名 或者十六进制
    stroke-width 属性定义矩形边框的宽度 
    stroke 属性定义矩形边框的颜色
    -->

下面包含一些新的绘图属性 ：

1
2
3
4
5
<svg xmlns ="http://www.w3.org/2000/svg" version = "1.1">
  <rect x="50" y="20"
        width = "300" height = "150" 
          style = "fill:blue; stroke-width:5; stroke:pink;fill-opacity:0.1;stroke-opacity:0.9  "/>
</svg>

SVG滤镜

SVG滤镜用来增加对SVG图形的特殊效果。SVG可用的滤镜说明如下

  • feBlend:把两个输入对象组合在一起，使他们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。该模式由属性mode定义

  • feColorMatrix：基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为红，绿、蓝，透明度的矢量)都经过矩阵乘法计算出的新颜色

  • feComponentTransfer: 对每个像素执行颜色分量的数据重映射。它允许进行图像的亮度调整，对比度调整，色彩平衡或阈（yu）值的操作

  • feComposite:执行两个输入图像的智能像素组合，在图像空间中使用over、in、atop、xor合成操作之一。另外，还可以应用一个智能组建arithmetic操作（结果被压到[0,1]范围内）

  • feConvolveMatrix：应用一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，如模糊、边缘检测、锐化、压花和斜角。

  • feDiffuseLighting：光照一个图像，使用alpha通道作为隆起映射。结果图像是一个RGBA不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。

  • feDisplacementMap：映射置换滤镜，该滤镜用来自图像中从in2到空间的像素值置换图像从in到空间的像素值

  • feDistantLight：该滤镜定义了一个距离光源，用于照明过滤，可以在灯光滤镜<feDuffuse-Lighting>元素或<feSpecularLihting>元素的内部

  • feFlood：该滤镜用flood-color元素定义的颜色和flood-opacity元素定义的不透明毒填充滤镜 子区域

  • feFuncA：该滤镜为它的父<feComponentTransfer>元素的输入图形的alpha成分定义了变换函数

  • feFuncB:该滤镜为它的父<feComponentTransfer>元素的输入图形的蓝色成分定义了变换函数

  • feFuncG:该滤镜为它的父<feComponentTransfer>元素的输入图形的绿色成分定义了变换函数

  • feFuncR:该滤镜为它的父<feComponentTransfer>元素的输入图形的红色成分定义了变换函数

  • feGaussianBlur：该滤镜对输入图像惊醒高斯模糊，属性stdDeviation中指定的数量定义了钟形

  • feImage：feImage滤镜从外部来源取得图像数据，并提供像素数据作为输出，意味着如果外部来源是一个SVG图像 这个图像将被栅格化。

  • feMerge：该滤镜允许同时应用滤镜效果，而不是按照顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点，然后再一个<feMergeNode>子元素中访问它。

  • feMergeNode:feMergeNode元素获取另一个滤镜的结果，让他的父<feMerge>元素处理

  • feMorphology: 该滤镜用来侵蚀或扩张输入的图像。他在增肥或瘦身效果方面特别有用。

  • feOffest：该输入图像作为一个整体，属性dx和属性dy的值指定了它的偏移量。

  • feSpecularLighting：该滤镜照亮一个源图行，使用alpha通道作为隆起映射，该结果图像是一个基于光色的RGBA图像

  • fePoinLight：是一种点光源元素，用于照明过滤，用于SVG文件

  • feSpotLight：是一种光源元素，用于照明过滤，用于SVG文件

  • feTile：输入图像是平铺的，结果用来填充目标。它的效果近似于一个<pattern>图像对象

  • feTurbulence:该滤镜利用Perlin噪声函数创建一个图像，它实现了人造纹理例如 云纹、大理石纹的合成

    用户可以在每个SVG元素是那个使用多个滤镜 （IE和Safari 早期版本不支持SVG滤镜）