Home > Article > Web Front-end > HTML5 Inline SVG Tutorial and Differences from Canvas

HTML5 Inline SVG Tutorial and Differences from Canvas

零下一度Original: 2017-05-15 10:41:391502browse

What is SVG?

SVG stands for Scalable Vector Graphics#SVG is used to define vector-based graphics for the web

SVG usage

XML

Format definition graphics

SVG images will not lose their graphic quality when enlarged or changed in size

SVG is a standard of the World Wide Web Consortium

SVG Advantages

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

SVG images can be created and modified through a text editor

SVG images can be searched, indexed, scripted or compressed

SVG is scalable

SVG images can be printed with high quality at any resolution

SVG can be enlarged without losing image quality

Browser support

Internet Explorer 9+, Firefox, Opera,

Chr

ome, and Safari support inline SVG.

Embed SVG directly into HTML pages

HTML5

, you can embed SVG elements directly into HTML pages:

Example

<!DOCTYPE html>
<html>
<body>
<svg xmlns="www.php.cn/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

Result:

Sorry, your browser does not support inline SVG.

To learn more about SVG tutorials, please visit SVG Tutorials.

SVG vs. ##Canvas

The difference between the two

SVG is a language that uses XML to describe 2D graphics. Canvas uses

JavaScript

to draw 2D graphics.

SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawn graphic is considered an object. If the SVG object's

properties

change, the browser can automatically reproduce the graphic. Canvas is rendered pixel by pixel. In canvas, once a graphic is drawn, it no longer gets the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics. 【Related Recommendations】

Special Recommendation

:"php Programmer Toolbox" V0.1 version Download 2. Free h5 online video tutorial

##3. php.cn original html5 video tutorial

The above is the detailed content of HTML5 Inline SVG Tutorial and Differences from Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to localstorage in html5 (picture)Next article：Detailed introduction to localstorage in html5 (picture)

See more

HTML5 Inline SVG Tutorial and Differences from Canvas

Related articles