Shulou(Shulou.com)06/01 Report--

This article mainly introduces the basic knowledge of SVG in html5 what is the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading the basic knowledge of SVG in this html5. Let's take a look at it.

Encyclopedia:

SVG Scalable Vector Graphics (Scalable Vector Graphics) is a graphic format based on Extensible markup language (XML) to describe two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format developed by W3C, and it is also a network vector graphics standard in the specification. SVG strictly follows XML syntax and uses descriptive language of text format to describe image content, so it is a vector graphics format independent of image resolution.

What is SVG?

SVG refers to scalable vector graphics (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 it is enlarged or changed in size.

SVG is the standard of the World wide Web Consortium

SVG is integrated with W3C standards such as DOM and XSL

The difference between Canvas and SVG:

SVG

SVG is a language that uses XML to describe 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.

Features:

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 much is not happy)

Not suitable for game applications

Canvas

Canvas uses JavaScript to draw 2D 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.

Features:

Dependent resolution

Event handlers are not supported

Weak text rendering ability

The resulting image can be saved in .png or .jpg format

Most suitable for image-intensive games, in which many objects are frequently redrawn

Svg example:

Copy the code

The code is as follows:

This is the end of the article on "what are the basics of SVG in html5". Thank you for reading! I believe you all have a certain understanding of "what are the basic knowledge of SVG in html5". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.