HTML5 inline SVG

HTML5 Inline SVG

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define vector-based graphics for the web

SVG uses XML Format definition graphics

SVG The graphic quality of the image will not be lost when it is enlarged or changed in size

SVG is a standard of the World Wide Web Consortium

With the help of SVG, we can achieve Many drawing operations are the same as the Canvas API type, but when drawing text on a Canvas element, the characters will be fixed to it in pixels. The text becomes part of the image, and the text content cannot be changed unless the Canvas drawing area is redrawn. Because of this, text on Canvas cannot be retrieved by search engines, but text on SVG is searchable. For example, Google indexes text from SVG content on the web.

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 with a text editor

SVG images can be searched, indexed, scripted, or compressed

SVGs are scalable

SVG images can Print with high quality at any resolution

SVG can be enlarged without losing image quality

Add SVG to the page

Inline mode: Used like other elements in HTML. On this basis, interactive applications of HTML, JavaScript and SVG can be written.

External link method: Import external SVG files in HTML through the element. The disadvantage is that you cannot write scripts that interact with SVG elements.

Simple shapes

SVG contains basic shape elements , such as rectangle, circle and ellipse. The size and position of shape elements are defined as properties. The properties of a rectangle are width and height. Circles have an r attribute that represents the radius. They all use CSS syntax to express distance, so the units include px, point, em, etc.

Rectangle: x="50" y="20" means the starting point of the rectangle is (50,20)

SVG draws switch objects in the order they appear in the object document. If we draw the circle after drawing the rectangle, the circle will appear on top of the rectangle.

Add a circle:

Transform SVG element

Multiple elements can be combined in SVG to form a group and become a whole.

The element represents a "group" and can be used to combine multiple related elements. Group members can be referenced by ID. In addition, the group can also be transformed as a whole. If you add a transform attribute to a group, all content in the group will be transformed. Transform properties include rotation, deformation, scaling, and beveling.

Reuse content

The element in SVG is used to define content for future use. You can use the element to link the content defined by to the place where it needs to be displayed. With these two elements, you can reuse the same content multiple times and eliminate redundancy.

Patterns and gradients

Path