浅谈SVG

一、什么是SVG？

  • SVG指可伸缩矢量图形（Scalable Vector Graphics）；
  • SVG用来定义用于网络的基于矢量的图形；
  • SVG使用xml格式定义图形；
  • SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失；
  • SVG是万维网联盟的标准；
  • SVG与诸如DOM和XSL之类的W3C标准是一个整体（于2003年1月14日成为W3C推荐标准）。

二、SVG优势

参与定义SVG的组织有：太阳微系统、Adobe、苹果公司、IBM以及柯达。
与其他图像格式相比，使用SVG的优势在于：

  • SVG可被非常多的工具读取和修改（比如记事本）；
  • SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强；
  • SVG是可伸缩的；
  • SVG图像可在任何的分辨率下被高质量的打印；
  • SVG可在图像质量不下降的情况下被放大；
  • SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）；
  • SVG可以与java技术一起运行；
  • SVG是开放的标准；
  • SVG文件是纯粹的XML。
    SVG的主要竞争者是flash。
    与flash相比，SVG最大的优势是与其他标准（比如XSL和DOM）相兼容，而flash则是未开源的私有技术。

三、SVG实例

<?xml version="1.0" standalone="no"?>

//第一行包含了XML声明。standalone 该属性规定此SVG文件是否是“独立“，或含有对外部文件的引用。
//standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

//第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 //“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。
//该 DTD 位于 W3C，含有所有允许的 SVG 元素。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

//SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 这是根元素。width 和 height 属
//性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

//SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，
//那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
//stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
//fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
//关闭标签的作用是关闭 SVG 元素和文档本身。

</svg>
//注释：所有的开启标签必须有关闭标签！

四、SVG形状

SVG有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形<rect>
  • 圆形<circle>
  • 椭圆<ellipse>
  • 线<line>
  • 折线<polyline>
  • 多边形<polygon>
  • 路径<path>
矩形
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

代码解释：

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>

</svg>

代码解释：

  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>

</svg>

代码解释：

  • CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>

代码解释：

  • rx 和 ry 属性可使矩形产生圆角。
圆形

<circle> 标签可用来创建一个圆。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

代码解释：

  • cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)。
  • r 属性定义圆的半径。
椭圆

<ellipse> 标签
<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

代码解释：

  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径

通过ellipse创建三个累叠而上的椭圆：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>

</svg>

组合两个椭圆：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>

</svg>
线条

<line> 标签用来创建线条。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

代码解释：

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

<polygon> 标签用来创建含有不少于三个边的图形。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

代码解释：

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

SVG <polyline> 标签用来创建仅包含直线的形状。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>
路径

<path> 标签
<path> 标签用来定义路径。
下面的命令可用于路径数据：

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
    以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

代码解释：
上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

创建一个螺旋：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

滤镜

SVG 滤镜用来向形状和文本添加特殊的效果。
在 SVG 中，可用的滤镜有：

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight
    注释：您可以在每个 SVG 元素上使用多个滤镜！
高斯模糊

必须在<defs>标签中定义SVG滤镜。
高斯模糊（Gaussian Blur）
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>

</svg>

代码解释：

  • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
  • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
  • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
  • in="SourceGraphic" 这个部分定义了由整个图像创建效果

渐变

SVG 渐变

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

  • 线性渐变
  • 放射性渐变
线性渐变

<linearGradient> 可用来定义 SVG 的线性渐变。
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：

  • 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
  • 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
  • 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>

代码解释：

  • <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
  • fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
  • <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
放射性渐变

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

</svg>

代码解释：
<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

Canvas VS SVG

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

什么是SVG？
  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
Canvas 和 SVG 的区别：
  • SVG
    SVG 是一种使用 XML 描述 2D 图形的语言。
    SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
    在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
    特点：
    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
    • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
    • 不适合游戏应用
  • Canvas
    Canvas 通过 JavaScript 来绘制 2D 图形。
    Canvas 是逐像素进行渲染的。
    在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
    特点：
    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,230评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,261评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,089评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,542评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,542评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,544评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,922评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,578评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,816评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,576评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,658评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,359评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,937评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,920评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,859评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,381评论 2赞 342

推荐阅读更多精彩内容

  • HTML5学习--SVG全攻略（基础篇）
    一.什么是SVG？ SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义...
    nightZing阅读 17,023评论 11赞 62
  • SVG 学习笔记
    SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...
    Penn_Xu阅读 954评论 0赞 1
  • HTML5+CSS3整体回顾
    转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提...
    程序员poetry阅读 9,056评论 22赞 225
  • 妈妈的爱
    王红娟 山高，没有妈妈的爱高 没有妈妈的爱，就像一根草 海深，没有妈妈的爱深 天阔，没有妈妈的爱宽阔 地大，...
    朝花夕拾杯中酒123阅读 553评论 0赞 9
  • 越是困难，越是要迎难而上
    文/新鲜 如果一遇到困难就逃避，那只是短暂的舒服，之后的路会越来越难走。 十月底统计学开课，第一堂课我有认真的听。...
    新鲜wendy阅读 1,248评论 0赞 0