Latest web development tutorials

HTML5 inline SVG

HTML5 support inline SVG.

SVG Sorry, your browser does not support inline SVG.

What is SVG?

  • SVG Scalable vector graphics means (Scalable Vector Graphics)
  • SVG for graphics used to define the vector-based network
  • SVG uses XML format definition graphics
  • SVG image to enlarge or change in the size of its image quality will not be lost
  • SVG is a standard World Wide Web Consortium

SVG advantage

Compared with other image formats (such as JPEG and GIF), using SVG advantages:

  • SVG images can be created and modified using a text editor
  • SVG images can be searched, indexed, scripted or compressed
  • SVG is scalable
  • SVG images can be printed in any high quality resolution
  • SVG may be exaggerated in the image quality does not decline

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.

The SVG embedded directly in HTML page

In HTML5, you will be able to SVG elements directly into the HTML page:


<!DOCTYPE html>

<svg xmlns="" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"


try it"


Sorry, your browser does not support inline SVG.

Learn more about SVG tutorial, please visit SVG tutorial .

SVG and Canvas difference between the two

SVG is a 2D graphics using XML description language.

Canvas to draw 2D graphics using JavaScript.

SVG based on XML, which means that each element in the SVG DOM is available. You can attach JavaScript event handlers for an element.

In SVG, each deemed to be drawn graphic objects. If the property SVG object changes, the browser can automatically reproduce the graphics.

Canvas is rendered pixel by pixel. In the canvas, once the graphic is drawn is complete, it will not continue to be the browser's attention. If the position is changed, then the whole scene also needs to be redrawn, including any objects that may have been covered with graphics.

Comparison of SVG and Canvas

The following table lists some of the differences between the canvas and SVG.

Canvas SVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用