最新的Web开发教程

HTML5 SVG


什么是SVG?

  • SVG表示可缩放矢量图形
  • SVG是用来定义网页图形
  • SVG是W3C推荐

可缩放矢量图形(SVG)是用于二维图形具有用于交互和动画支持一个基于XML的矢量图像格式。 SVG规范是自1999年以来由万维网联盟(W3C)开发的开放标准。

SVG图像及其行为以XML文本文件中定义。 这意味着它们可以被搜索,索引,脚本和压缩。 为XML文件,可以创建SVG图像,并用任何文本编辑器,以及与绘图软件编辑。

所有主要的现代Web浏览器,包括Mozilla的Firefox,IE浏览器,谷歌Chrome,歌剧,Safari和微软边沿有SVG渲染支持。


的HTML <svg>

的HTML <svg>元件(introduced in HTML5)是用于SVG图形的容器。

SVG有吸引路径,矩形,圆形,文本和图形图像的几种方法。


浏览器支持

在表中的数字指定完全支持所述第一浏览器版本<svg>元素。

元件
<svg> 4 9 3.0 3.2 10.1

SVG圆

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
试一试»

SVG矩形

RGB(0,0,0)“>


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

试一试»

SVG圆角矩形

对不起,您的浏览器不支持嵌入式SVG。


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

试一试»

SVG星

对不起,您的浏览器不支持嵌入式SVG。


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

试一试»

SVG标志

SVG对不起,您的浏览器不支持嵌入式SVG。


<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" 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="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

试一试»

SVG和差异Canvas

SVG是一种用XML描述二维图形的语言。

Canvas绘制2D图形,上飞(with a JavaScript)

SVG是基于XML的,这意味着每一个元素是SVG DOM内可用。 您可以将JavaScript事件处理程序的元素。

在SVG中,每个绘制形状记住作为一个对象。 如果SVG对象的属性被改变时,浏览器可以自动重新呈现的形状。

画布是由像素渲染像素。 在画布上,一旦图形绘制,它是由浏览器遗忘。 如果它的位置应该改变,整个场景需要重新绘制,包括可能已覆盖图形的任何对象。


Canvas和SVG的比较

下表显示了Canvas和SVG之间的重要差别:

Canvas SVG
  • 分辨率依赖
  • 事件处理程序不支持
  • 可怜的文本渲染能力
  • 您可以将生成的图像保存为.png.jpg
  • 非常适合于图形密集型游戏
  • 分辨率独立
  • 事件处理程序的支持
  • 最适合于大型渲染领域的应用(Google Maps)
  • 慢渲染复杂的,如果(anything that uses the DOM a lot will be slow)
  • 不适合游戏应用

要了解更多有关SVG,请阅读我们的SVG教程