English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Inline SVG

HTML5 Support inline SVG. SVG files can be embedded in HTML documents using the following tags: <embed>, <object>, or <iframe> (embed and iframe are both inline frames), through these tags, SVG code can be directly embedded into HTML pages, or we can also link directly to SVG files.

What is SVG?

  • SVG stands for Scalable Vector Graphics (Scalable Vector Graphics)

  • SVG is used to define vector graphics for the web.

  • SVG uses XML format to define graphics.

  • The graphic quality of SVG images will not be lost when scaled or resized.

  • SVG is a standard of the World Wide Web Consortium.

SVG Advantages

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

  • 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 at any resolution with high quality.

  • SVG can be scaled without any loss in image quality.

Browser support

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

Embed SVG directly into HTML pages

In HTML5 In this section, you can directly embed SVG elements into HTML pages:

Example

<!DOCTYPE　html><html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
　
<svg xmlns="http://www.w3.org/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>
Test to see ‹/›

The result after running is as follows:

Using SVG to draw a circle

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using SVG to draw a circle　oldtoolbag.com</title>
</head>
<body>
　　　　<svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
　　　　　　<circle cx="200" cy="100" r="100" stroke="#afeedd"
　　　　　　stroke-width="5" fill="#f0ddff"　/>
　　　　</svg>
</body>
</html>
Test to see ‹/›

  • in the <svg> tagheightandwidthProperty is to set the height and width of the SVG document,versionProperty can define the SVG version used,xmlns Property can define the SVG namespace;

  • <circle> is the tag used in SVG to create circles,cx and cy Property defines the center of the circle, x and y Coordinates, if these two properties are ignored, the dot will be set to (0, 0),rProperty defines the radius of the circle;

  • stroke and stroke-width Property controls how the outline of the shape is displayed,fill Property settings for the color inside the shape;
    Let's take a look at the demonstration image:

Using SVG to draw a rectangle

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using SVG to draw a rectangle　oldtoolbag.com</title>
</head>
<body>
　　　　<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1">
　　　　　　<rect x="50" y="100" width="300" height="150"
　　　　　　style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
　　　　</svg>
</body>
</html>
Test to see ‹/›

The difference between SVG and Canvas

SVG is a description of 2The language of D graphics.

Canvas is drawn through JavaScript 2D graphic.

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

In SVG, each drawn graphic is treated as an object. If the properties of an SVG object change, the browser can automatically regenerate the graphic.

Canvas renders pixel by pixel. Once the graphics are drawn on canvas, they no longer receive attention from the browser. If their position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the graphics.

Comparison between Canvas and SVG

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

CanvasSVG

  • Dependent on resolution

  • Does not support event handlers

  • Weak text rendering capability

  • Can save the resulting image in .png or .jpg format

  • Best suited for image-intensive games where many objects are frequently redrawn

  • Independent of resolution

  • Supports event handlers

  • Best suited for applications with large rendering areas (such as Google Maps)

  • High complexity may slow down rendering speed (any application that overuses DOM is not fast)

  • Not suitable for game applications

HTML5 MathMLHTML5 Canvas