HTML5之SVG详解(一):基本概括

转载自:http://www.cnblogs.com/hupeng/archive/2012/12/21/2828456.html


1、背景

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟成立了一个工作组,研发一种通过XML来表现矢量图形的技术——SVG!由于SVG也是一种XML文件,所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG,大家可以从这里得到更多的兼容信息,其中包括:

  • 使用或者元素来显示基本的SVG图形;
  • 使用来显示SVG图形;
  • 将SVG图形应用为CSS背景图;
  • 直接在HTML文档中使用标签(需要HTML5支持);
  • 对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效;
  • 对SVG对象使用类似photoshop的效果,包括模糊和色彩处理;
  • 对SVG图像使用动画;
  • 使用SVG格式的字体;
  • 2、图形系统

    目前在计算机上主要有两种形式来表现图形,一种是栅格图形,另一种是矢量图形。

    2.1 栅格图形

    在栅格图形中,图像用像元或者像素的矩形阵列来表示,每个像素代表一个RGB颜色值或者是一个指向颜色列表的索引。通常以一种压缩格式来存储(如JPEG, GIF, PNG等),由于现在大部分的显示设备都是栅格设备,所以显示这些图形只需要做解压处理就可以了。

    2.2 矢量图形

    在矢量图形系统中,图形被描述为一些列的形状,它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标,然后显示在屏幕上。矢量图形是对象,而不是一系列的像素。它们可以改变颜色、形状还有大小,图形中的文字都是可以被检索的,这些与栅格图形都有很大的不同。

    2.3 为什么要使用矢量图形

    绝大部分情况下,我们都在使用栅格图形,而且创建栅格图形的工具更容易获得和使用。但是矢量图形有一个栅格图形无法替代的优势:无论如何的缩放,矢量图形都不会失真。这使得当我们需要具有精确测量以及看清图形细节的放大能力时,矢量图形显得尤其重要。

    3、创建一个SVG图形

    下面首先创建一个SVG图形,这里我并不会详细的讲解各个标签,只是先给一个感性的认识,随后的章节会对SVG的语法做详细的介绍。看代码:

    复制代码
     1 
     2 
     3 
     4      cat
     5      Stick Figure of a Cat
     6      
     7      
     8      
     9      
    10          
    11          
    12      
    13      
    14      
    15      
    16      
    17      
    18      
    19      
    20      
    21          Cat
    22      
    23   
    复制代码

     

    可能大家已经看出来了,这实际上是一个标准的XML文件,在浏览器中浏览,会看到一只猫的图案,如下图:

    HTML5之SVG详解(一):基本概括_第1张图片

    另外,由于很多人习惯了HTML5式的文档模式,即

    复制代码
     1 
     2 
     3 
     4     
     5     
     6 
     7 
     8     
     9 
    10 
    复制代码

     

     

    将命令空间省略,这里强烈的建议写SVG的时候保留命名空间,即

    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"

    后面你会看到因为忽略命令空间而引发的异常。

    4、应用SVG图形

    如何才能够在HTML文档中引入SVG呢?一般有一下几种方法

    • 包含在标签内部

      这是一种最直接的方法,但是需要浏览器支持HTML5中的标签,如:

    复制代码
     1 
     2 
     3 
     4     
     5     SVG DEMO
     6 
     7 
     8     
     9         cat
    10         Stick Figure of a Cat
    11         
    12         
    13         
    14         
    15             
    16             
    17         
    18         
    19         
    20         
    21         
    22         
    23         
    24         
    25         Cat
    26     
    27 
    28 
    复制代码

     

     

    • 通过或者标签嵌入

        其中DEMO1.svg是先前创建的SVG文件。

      复制代码
       1 
       2 
       3 
       4     
       5     SVG DEMO
       6 
       7 
       8     
       9     
      10 
      11 
      复制代码

       

       

      • 通过标签的src属性
      复制代码
       1 
       2 
       3 
       4     
       5     SVG DEMO
       6 
       7 
       8     
       9 
      10 
      复制代码

       

      • 通过CSS:background: url(...)
      复制代码
       1 
       2 
       3 
       4     
       5     SVG DEMO
       6     
      13 
      14 
      15     
      16 17
      复制代码

       

      所有的方法都产生同样的结果,如上图所示。

       重要声明:本文所用的图片以及示例来自于http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Getting_Started


      你可能感兴趣的:(HTML5)