A, definitions,

Scalable Vector Graphics (SVG) — Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional Vector Graphics. SVG is an open standard developed by the World Wide Web Consortium (W3C) since 1999. As a text-based open web standard, SVG can render graphics of different sizes elegantly and concisely, and it works seamlessly with other web standards such as CSS, DOM, JavaScript, and SMIL. In essence, SVG is to images what HTML is to text.

SVG images and their related behavior are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. In addition, this means they can be created and edited using any text editor and drawing software.

Unlike traditional dot-matrix image modes like JPEG and PNG, the SVG format provides vector images, which means that images can be magnified infinitely without distortion or loss of quality, and can be easily modified.

2. Basic shape elements

The basic shapes described here are used in most SVG drawings. The names of these shapes reveal their purpose. Give them attributes to determine their location and size.

To insert a shape, we create an element in the document. Different elements correspond to different shapes and use different attributes to define the size and position of the graph. Some shapes are a little redundant because they can be created from other shapes, but they are easy to use and make our SVG documents simple and understandable

1. React (Rectangle)

The rect element draws a rectangle on the screen, and only six basic properties control its position and shape on the screen.

  • X: the x position in the upper left corner of the rectangle
  • Y: y position in the upper left corner of the rectangle
  • Width: indicates the width of the rectangle
  • Height: The height of the rectangle
  • Rx: radius of the x direction of the rounded corner
  • Ry: The y radius of the rounded corner

Once the shape is drawn, we can color it in several ways (including specifying the properties of the object) using inline CSS styles, inline CSS styles, or using an external CSS style file. Most Web sites use inline style CSS for SVG, and there are pros and cons to these approaches. Most basic coloring can be done by setting two attributes on the element: the fill attribute and the stroke attribute. The fill property sets the color inside the object, and the stroke property sets the color of the line that draws the object. You can define their colors using CSS color naming schemes in HTML, such as color names (like red), RGB values (like RGB (255,0,0)), hexadecimal values, rgba values, and so on.

  • The style property is used to define CSS properties
  • The CSS fill property defines the fill color of the rectangle (RGB value, color name, or hexadecimal value)
  • The stroke-width property of CSS defines the width of the border
  • The stroke property of the CSS defines the color of the border
  • The fill-opacity property of CSS defines the opacity of the fill color (range: 0-1)
  • The stroke-opacity property of CSS defines the opacity of the stroke color (range: 0-1)
  • The CSS opacity property defines the value of opacity for the entire element (range: 0-1)

2. Circle

The circle element draws a circle on the screen. It has only three properties to set the circle.

  • R: radius of the circle
  • Cx: the x position of the center of the circle
  • Cy: the y position of the center of the circle

The CSS properties of a circle are set in the same way as those of a rectangle.

3. Ellipse

The ellipse element is a more general form of the circle element, and you can scale the x and y radii of the circle respectively (commonly known to mathematicians as the major and minor axis radii). The ellipse cannot specify the exact direction of the ellipse (for example, you want to draw an ellipse tilted at a 45 degree Angle), but you can rotate it using the Transform property.

  • Rx: x radius of the ellipse
  • Ry: y radius of the ellipse
  • Cx: the x position in the center of the ellipse
  • Cy: y position at the center of the ellipse

The CSS property setting method for ellipses is similar to that for circles and rectangles.

4. Line

Line Draws a straight line. It takes the positions of two points as properties, specifying the starting and ending positions of the line.

  • X1: the x position of the starting point
  • Y1: y position of the starting point
  • X2: the x position of the endpoint
  • Y2: the y position of the endpoint

  • Stroke line color
  • Stroke-width Line width
  • The transparency of the stroke – opacity
  • Opacity transparency

5. Polyline

A polyline is a set of straight lines joined together. Because it can have many points, all points of a polyline are placed in a points property.

Points: indicates the number of points. Each number is separated by a white space, comma, terminator, or newline character. Each point must contain two numbers, one for the x coordinate and one for the y coordinate. So the list of points (0,0), (1,1), and (2,2) can be written like this: “0,0,1,1,2,2”.

The style setting method is the same as line.

6. Polygon

Polygons are much like polylines in that they are made up of straight lines connecting a set of points. The difference is that polygon’s path automatically returns to the first point at the last point. Note that a rectangle is also a polygon, so if you need more flexibility you can create a rectangle out of a polygon.

Points: indicates the number of points. Each number is separated by a whitespace, comma, terminating command, or newline character. Each point must contain two numbers, one for the x coordinate and one for the y coordinate. So the list of points (0,0), (1,1), and (2,2) can be written like this: “0,0,1,1,2,2”. After the path is drawn, the graph closes, so the final line will be connected from position (2,2) to position (0,0).

The style setting method is the same as line.

7, Path

Path is probably the most common shape in SVG, and the most powerful base shape for elements in the SVG library. You can use the path element to draw rectangles (rectangular or rounded rectangles), circles, ellipses, folds, polygons, and other shapes, such as Bezier curves, cubic curves, and so on.

  • M: moveto (moveto), followed by x and y points, separated by space
  • L: draw a lineto the line, followed by the x and y coordinates, separated by Spaces. Coordinates must exist in pairs, and multiple coordinates are separated by Spaces
  • H: Draw a horizontal lineto, followed by the X-axis coordinates that need to be moved horizontally
  • V: Draw a line vertically to the Y-axis coordinate that needs to be moved horizontally
  • C: Cubic Curveto, which requires two control points to be considered. The syntax of a cubic Bezier curve is: “C c1x,c1y c2x,c2y x,y” or “C dc1x,dc1y dc2x,dc2y dx,dy”, where c1x,c1y and C2x,c2y are the absolute coordinates of the control points of the starting and ending points respectively. Dc1x, DC1Y, and DC2X, DC2Y are relative to the starting point, not to the ending point. Dx and dy are distances to the right and down, respectively
  • S: Smooth curveto. The syntax is “S cx,cy x,y” or “S DCX,dcy dx,dy”, where (d)cx specifies the second control point.
  • Q: Quadratic Belzier curve, the two ends of the control point are the same. The syntax of a quadratic Bessel curve is “Q cx, cy x, y” or “Q DCX, dcy dx, dy”. Cx and cy are the absolute coordinates of the control points, while DCX and Dcy are the distances of the control points in the x and y directions, respectively.
  • T: Quadratic Belzier curveto, which assumes that the first control point is a reflection of the previous control point with respect to the previous control point, or that it is actually the previous control point without the previous control point. The syntax of T is “T x,y” or “T dx,dy”, corresponding to absolute coordinates and relative distances respectively, to create quadratic Bezier curves.
  • A: the path of elliptic Arc curve (elliptical Arc), “A rx and ry xAxisRotate, LargeArcFlag SweepFlag x, y”. Deconstruct it, rx and ry are radii in the x and y directions respectively, and LargeArcFlag has to be 0 or 1 to determine whether to draw a small arc (0) or a large arc (1). The SweepFlag is also either 0 or 1, which determines whether the arc is clockwise (1) or counterclockwise (0). X and y are the coordinates of the destination.
  • Z: Closepath

Note: All commands above allow lowercase letters. Upper case indicates absolute location, lower case indicates relative location.