肉渣教程

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元素也不支持 —_—

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

运行一下

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元素也不支持 —_—

<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元素也不支持 —_—

<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元素也不支持 —_—

<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

上一节 下一节