HTML SVG

HTML5 supports inline SVG.

What is SVG?

SVG refers to Scalable Vector Graphics
SVG is used to define based on Vector graphics
SVG uses XML format to define graphics
SVG images will not lose their graphic quality when they are enlarged or resized.
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 images can be enlarged without loss of image quality

Browser support

##Internet Inline SVG is supported in Explorer 9+, Firefox, Opera, Chrome, and Safari.

Embed SVG directly into the HTML page

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</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>

Program running results:

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

The Difference Between SVG and Canvas

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

Canvas draws 2D graphics through JavaScript.

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 properties of an SVG object 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.

Comparison of Canvas and SVG

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

Canvas	SVG
Depends on resolution	Does not depend on resolution
Does not support event handlers	Support event handlers
Weak text rendering capabilities	Best suited for applications with large rendering areas (such as Google Maps)

## can be used as. png or .jpg format

Save the result image

High complexity will slow down rendering (any application that overuses the DOM is not fast)

Best suited for graphics-intensive games,

where many objects will be frequently

redrawn

Not suitable for game applications

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</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>

submit Reset Code

Automatic operation

HTML SVG

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]