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

1、背景

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

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

2、图形系统

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

2.1 栅格图形

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

2.2 矢量图形

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

2.3 为什么要使用矢量图形

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

3、创建一个SVG图形

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

 1 <?xml version="1.0"?>

 2 <!DOCTYPE svg PUBLIC "//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

 3 <svg width="140" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

 4      <title>cat</title>

 5      <desc>Stick Figure of a Cat</desc>

 6      <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>

 7      <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933"/>

 8      <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933"/>

 9      <g id="whiskers">

10          <link x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>

11          <link x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>

12      </g>

13      <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" />

14      <!-- ears -->

15      <polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" />

16      <!-- mouth -->

17      <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" />

18      <!-- nose -->

19      <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" />

20      <text x="60" y="165" style="font-family:sans-serif; font-size:14pt;">

21          Cat

22      </text>

23  </svg>

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

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

 1 <!DOCTYPE HTML>

 2 <html lang="en-US">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title></title>

 6 </head>

 7 <body>

 8

 9 </body>

10 </html>

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

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

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

4、应用SVG图形

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

  • 包含在<svg>标签内部

　　这是一种最直接的方法，但是需要浏览器支持HTML5中的<svg>标签，如：

 1 <!DOCTYPE HTML>

 2 <html lang="en-US">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>SVG DEMO</title>

 6 </head>

 7 <body>

 8     <svg width="140" height="170">

 9         <title>cat</title>

10         <desc>Stick Figure of a Cat</desc>

11         <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>

12         <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933"/>

13         <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933"/>

14         <g id="whiskers">

15             <link x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>

16             <link x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>

17         </g>

18         <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" />

19         <!-- ears -->

20         <polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" />

21         <!-- mouth -->

22         <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" />

23         <!-- nose -->

24         <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" />

25         <text x="60" y="165" style="font-family:sans-serif; font-size:14pt;">Cat</text>

26     </svg>

27 </body>

28 </html>
  • 通过<embed>或者<object>标签嵌入

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

 1 <!DOCTYPE HTML>

 2 <html lang="en-US">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>SVG DEMO</title>

 6 </head>

 7 <body>

 8     <embed src="DEMO1.svg" type="image/svg+xml" width="140" height="170">

 9     <object data="DEMO1.svg" type="image/svg+xml" width="140" height="170"></object>

10 </body>

11 </html>
  • 通过<img>标签的src属性
 1 <!DOCTYPE HTML>

 2 <html lang="en-US">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>SVG DEMO</title>

 6 </head>

 7 <body>

 8     <img src="DEMO1.svg" width="140" height="170" alt="">

 9 </body>

10 </html>
  • 通过CSS：background: url(...)
 1 <!DOCTYPE HTML>

 2 <html lang="en-US">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>SVG DEMO</title>

 6     <style type="text/css">

 7         #cat{

 8             width: 140px;

 9             height: 170px;

10             background: url(DEMO1.svg) no-repeat;

11         }

12     </style>

13 </head>

14 <body>

15     <div id="cat"></div>

16 </body>

17 </html>

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

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

HTML5之SVG详解（一）：基本概括的更多相关文章

  1. 最全html5 meta设置详解 (转)

    meta 详解,html5 meta 标签日常设置   <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...

  2. HTML5之Viewport详解

    做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...

  3. HTML5本地存储详解

    HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取.这个概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且 ...

  4. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  5. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  6. HTML5 离线缓存详解（转）

    离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  7. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  8. Html5 Device API详解

    三.四月曾学习过html5相关知识,并就html5 device api做过一次讲解 课程时长一个小时,预期达到level 200目标,即知道html5 device api是什么,且知道怎么实现 面 ...

  9. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

随机推荐

  1. python基础之进程间通信、进程池、协程

    进程间通信 进程彼此之间互相隔离,要实现进程间通信(IPC),multiprocessing模块支持两种形式:队列和管道,这两种方式都是使用消息传递的. 进程队列queue 不同于线程queue,进程 ...

  2. HBase 通过myeclipce脚本来获取固定columns(获取列簇中的列及对应的value值)

    第一步:关联Jar包 1. 配置hadoop-env.sh文件添加Hbase关联jar包 /opt/modules/hadoop-2.5.0-cdh5.3.6/etc/hadoop下编辑hadoop- ...

  3. 在Android studio中用gradle打 jar 包（Mac下）

    这两天公司要重构项目,以前的项目在eclipse上,准备迁移到Android studio上,需要对项目打包,于是我学习了Android studio中gradle打包的内容.我在公司用的Mac,在家 ...

  4. Java：详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  5. Android TV 开发（3）

    本文来自网易云社区 作者:孙有军   <LinearLayout         android:id="@+id/input_num_line_3"         and ...

  6. Android TextView 单行文本的坑

    这是android系统的一个bug,描述如下:https://code.google.com/p/android/issues/detail?id=33868 具体来说就是当一个TextView设置了 ...

  7. 【APUE】Chapter13 Daemon Processes

    这章节内容比较紧凑,主要有5部分: 1. 守护进程的特点 2. 守护进程的构造步骤及原理. 3. 守护进程示例:系统日志守护进程服务syslogd的相关函数. 4. Singe-Instance 守护 ...

  8. React获取数据，假如为数组，使用map出现的问题

    在平时做项目的时候,使用到了redux, 如果获取服务器端的数据,例如返回一个  data = [1,2,3,4]data.map(item => item*2) , 这样使用的话如果数据正常获 ...

  9. Python 3基础教程24-读取csv文件

    本文来介绍用Python读取csv文件.什么是csv(Comma-Separated Values),也叫逗号分割值,如果你安装了excel,默认会用excel打开csv文件. 1. 我们先制作一个c ...

  10. [PocketFlow]解决在coco上mAP非常低的bug

    1.问题 继上次训练挂起的bug后,又遇到了现在评估时AP非常低的bug.具体有多低呢?Pelee论文中提到,用128的batchsize大小在coco数据集上训练70K次迭代后,AP@0.5:0.9 ...