HTML5 SVG
SVG is defined as scalable vector graphics.
HTML5 supports inline SVG.
HTML <svg> elements are containers for SVG graphics.
SVG has a variety of ways to draw paths, boxes, circles, text, and graphic images.
SVG Sorry, your browser does not support inline SVG.
What is SVG?
SVG refers to scalable vector graphics
SVG is used to define vector-based graphics for the network
SVG uses XML format to define drawings
The graphic quality of SVG image will not be lost when enlarged or changed in size.
SVG is the standard of the World wide Web Consortium
SVG advantage
Compared to 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 magnified without deterioration in image quality.
Browser support
The number in the table represents the first browser version number that supports the element.
element |
|||||
|---|---|---|---|---|---|
< svg > |
4.0 |
9.0 |
3.0 |
3.2 |
10.1 |
Embed SVG directly into the HTML page
In HTML5, you can embed the SVG element directly into the HTML page.
SVG Circle
Example
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red"/></svg>
SVG pentagram
Example
<!DOCTYPEhtml><html><body><svgxmlns="http://www.w3.org/2000/svg"version="1.1"height="190"><polygonpoints="100,10
40,180 190,60 10,60
160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg></body></html>
Results:
To learn more about SVG tutorials, visit SVG tutorials.
The difference between SVG and Canvas
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 that every element in SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawing is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphics.
Canvas is rendered pixel by pixel. In canvas, once the graph is drawn, it will no longer get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the drawing.
Comparison between Canvas and SVG
The following table lists canvas some of the differences with SVG.
Canvas
SVG
Dependent resolution
Event handlers are not supported
Weak text rendering ability
Be able to
.pngor.jpgsave the resulting image in a formatMost suitable for image-intensive games, in which many objects are frequently redrawn
Independent of resolution
Support for event handlers
Best suited for applications with large rendering areas (such as Google Maps)
High complexity slows down rendering (any application that uses DOM too muchis not happy)
Not suitable for game applications