Basic SVG knowledge Review and basic svg knowledge Review

Basic SVG knowledge Review and basic svg knowledge Review

I started my blog for the first time. I want to review the SVG animation I learned when I made the competition last year. Next, write an animation summary for SVG production.

SVG is a language that uses XML to describe two-dimensional graphics and plotting programs..

First, let's take a look at the advantages of SVG: It can be printed with high quality at any resolution; the text in the image is optional and searchable (suitable for creating maps ); it can run together with Java technology. Compared with JPEG and GIF images, it is smaller in size and more compact. all browsers support SVG files, except for Internet Explorer that requires plug-ins, but the plug-ins are free of charge.

SVG predefined shape elements:

• Rectangle <rect>
• Circle <circle>
• Elliptic <ellipse>
• Line <line>
• Line <polyline>
• Polygon
• Path <path>

<Rect> label

X: Left position of the rectangle (for example, x = "0" defines the distance between the rectangle and the left side of the browser window is 0 px );

Y: The top position of the rectangle (for example, y = "0" defines the distance from the rectangle to the top of the browser window is 0 px );

Rx and ry: Generate rounded corners for the rectangle;

Fill-opacity: fill color transparency;

Stroke-opacity: defines the transparency of stroke color;

Opacity: the attribute defines the transparent value of the entire element.

<Circle> label
The cx and cy attributes define the x and y coordinates of dots. If cx and cy are omitted, the center of the circle is set to (0, 0 );
The r attribute defines the radius of the circle.
<Ellipse> label
The cx attribute defines the x coordinate of the dot;
The cy attribute defines the y coordinate of the dot;
The rx attribute defines the horizontal radius;
Ry property defines the vertical radius
<Line> label
The x1 attribute is defined at the beginning of the line on the x axis;
The y1 attribute defines the start of a line on the y axis;
The x2 attribute ends when the x axis defines the line;
The y2 attribute defines the end of a line on the y axis.
<Polygon> label
<Polygon>: Creates a graph with no less than three edges;
Points: defines the x and y coordinates of each corner of a polygon.
<Polyline> label
Used to create shapes that only contain straight lines
<Path> label
Used to define a path

      

 
       
M = moveto
 
       
L = lineto
 
       
H = horizontal lineto
 
       
V = vertical lineto
 
       
C = curveto
 
       
S = smooth curveto
 
       
Q = quadratic belserx curve
 
       
T = smooth quadratic belgiscurveto
 
       
A = elliptical Arc
 
       
Z = closepath

      
Note: all the preceding commands allow lowercase letters. Upper case indicates absolute positioning, and lower case indicates relative positioning.
Defines a path, which starts at location 250 150, reaches location 150 350, then starts from there to 350 350, and finally closes the path at location 250 150.
A spiral is created:
Complicated, right? Yes !!! Due to the complexity of drawing paths, you still need to use the SVG editor to create complex images.