HTML5 _ H5 SVG

H5 SVG

什么是SVG？

SVG是可缩放矢量图形（Scalable Vector Graphics）的简称。
SVG是基于可扩展标记语言（XML），可用于描述二维矢量图形。
SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
SVG指的是矢量图，与图像分辨率无关。

HTML <svg>元素

<svg>元素是进行svg绘图的容器。
在这个容器内可以绘制路径、方框、圆圈、文字以及其他图形。

浏览器兼容性

放心，svg元素的浏览器兼容性也挺好的；下表是每种浏览器支持canvas元素的最低版本：

元素
<svg>	4.0	9.0	3.0	3.2	10.1

SVG圆圈

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#46acb6" stroke-width="4" fill="#d4d854" />
</svg>

运行一下

SVG方形

<svg width="200" height="70">
  <rect width="200" height="70" style="fill:Tomato;stroke-width:10;stroke:rgb(51,51,51);" />
</svg>

运行一下

SVG圆角方形

<svg width="160" height="160">
  <rect x="5" y="5" rx="20" ry="20" width="150" height="150"
  style="fill:Tomato;stroke:Black;stroke-width:5;opacity:0.5" />
</svg>

运行一下

SVG画星

<svg width="300" height="205">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:Tomato;stroke:#333;stroke-width:5;fill-rule:evenodd;" />
</svg>

运行一下

SVG LOGO

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:#46acb6;stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:#d77e60;stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="95" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" x="50" y="86">魔教</text>
</svg>

运行一下

SVG vs Canvas

SVG:
SVG是一种用XML语言来描述2D矢量图形的语言。
因为是基于XML语言的，所以SVG元素内的一个个图形元素，就是一个个对象，当这些元素对象发生改变，页面上的显示也会随之改变。

矢量的；
绘制的图形内容支持浏览器事件绑定；
非常适合具有具有大面积区域渲染需求的应用（如网页地图）；
矢量元素太过复杂，会导致渲染速度变慢，毕竟是基于DOM的；
完全不适合开发游戏。

Canvas:
Canvas是通过JavaScript脚本在画布元素上进行绘制。
Canvas元素就像是一张动态的画布，它是逐像素进行渲染的。它就是一张由有限数量的像素构成的影布；JavaScript来从时间、空间两个角度对这张影布的每一个像素进行色彩赋值。一切关于Canvas的绘制函数从本质上都可以看成从空间角度对指定canvas元素进行像素赋值。再极端一些，Canvas元素就是彩色马赛克的瓷砖墙，但是JavaScript可以控制每一块瓷砖的颜色变化。夜店的washroom就是这样的。

基于像素的；
绘制的图形内容不支持浏览器事件绑定；
文本渲染能力不强；
可以保存图像结果为.png或者.jpg格式；
非常适合开发游戏。

H5 SVG

推广