Introduction to the

What is the SVG

Simply put, SVG is an image format based on XML syntax, which stands for Scalable Vector Graphics.

The advantage of SVG

While other image formats are pixel-based (pixel images can be problematic), SVG is a shape description of an image, so it is essentially a text file, small in size and undistorted no matter how many times it is magnified. We can get some of the biggest advantages of SVG:

  • Scalable vector graphics — no distortion;
  • SVG is made up of math, it’s just pieces of code, so the file size is very small — lightweight;
  • Each node is a separate DOM, free to bind events and action content — easy to manipulate and local update;

Deficiency in

  • Not suitable for very complex content or scenarios with a large number of nodes

The basic shape

SVG has a variety of shapes built in to work with

The rect rectangle

X, y: position coordinates of the distance from (0,0) — (0,0) is the point at the top left corner width, height, rx, ry: rounded corner properties fill color stroke, stroke-width, side width, side width: opacity

<svg xmlns="http://www.w3.org/2000/svg" version="2.0">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red; stroke:black; stroke-width:5; Opacity: 0.5" />
</svg>
Copy the code

Circle the round

Cx, cy: coordinates of the center of the circle; Radius r:

<svg>
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
Copy the code

The ellipse ellipse

The standard equation for the ellipse above tells us that the elements needed to specify an ellipse are: the radius of the major axis, the radius of the minor axis, the coordinates of the points; So we need the following elements to draw an ellipse: Cx, cy: center coordinates rx, Ry: horizontal radius, vertical radius

<svg>
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
Copy the code

The line straight

X1, y1: coordinates of the beginning of a line x2, y2: coordinates of the end of a line

<svg>
  <line x1="0" y1="0" x2="200" y2="200"
  style="Stroke: RGB (0, 255); stroke-width:2"/>
</svg>
Copy the code

Polygon polygon

A closed graph with no less than three edges can be understood as a closed graph surrounded by a collection of points

<svg  height="210" width="500">
  <polygon points="200, 250190, 160210"
  style="fill:lime; stroke:purple; stroke-width:1"/>
</svg>
Copy the code

Polyline line more

A multi-segment shape with only a straight line, which is also a collection of points, but does not close end to end

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none; stroke:black; stroke-width:3" />
</svg>
Copy the code

The path path

Path is the most powerful of the basic shapes and can be used to draw lines, curves, and arcs. Path is used to draw paths. The d attribute of path indicates the drawing order. It is a long string, with each letter representing an action followed by a coordinate. So, the value of attribute D is a sequence of commands + arguments, each of which is represented by a key letter, for example, the letter “M” for a “Move to” command. When the parser reads the command, it knows that you intend to Move to a certain point. Following the command letter are the x and y coordinates of the point to which you need to move. For example, the command to move to the point (10,10) should be written as “M 10,10”. When this character is finished, the parser reads the next command. Each command can be represented in two ways, one in capital letters, indicating absolute positioning. The other is to use lowercase letters to indicate relative positioning (how far to move relative to the last point).

An overview of the PATH instruction set

instruction parameter instruction
M x y Move to x and y
L x y Draws the specified line segment from the current position to x, y.
H x Draw horizontal line to from current position
V y Draw a vertical line from the current position to position X.
C x1 y1 x2 y2 x y Draw three Bezier curves from the current position to the specified x and Y positions: x1, y1 and X2, y2 are the control points (curve).
S x2 y2 x y From the coordinates of the current point, draw a reflected Bezier curve to the specified x and Y positions: x2, y2 are smooth curves for reflection.
Q x1 y1 x y Draw a quadratic Bezier curve from the current position to the specified X, Y position: x1, y1 are the control points (quadratic Bezier curve)
T x y Draw a reflected quadratic Bezier curve from the coordinates of the current point to the specified X, Y position: the previous coordinate is a smooth quadratic Bezier curve.
A rx ry x-axis-rotation large-arc-flag sweep-flag x y Draw a specified arc from the current point to position X, y: The x-axis-rotation is the rotation Angle between the arc and the X axis. The large-arc-flag is set to 1 (the maximum Angle arc) or 0 (the minimum Angle arc). The direction of sweep-flag configuration is 1 (clockwise) or 0 (counterclockwise).
Z Close current path (Closepath)

The rule of the Path command is as follows:

  1. Case sensitive: Each command can be represented in two ways. One is in uppercase letters to indicate absolute position. The other is to use lowercase letters to indicate relative position
  2. The final parameter indicates the final position to be reached
  3. Where the previous command ends is where the next command begins
  4. The command can be repeated The parameter indicates that the same command is repeatedly executed
  5. Because attribute D uses the user coordinate system, there is no need to specify units

Straight line command

The first is the “Move to” command, M, which, as mentioned earlier, takes two arguments, the X-axis and Y-axis coordinates of the point to Move to. Suppose that your brush is currently at a point, and after using the M command to move the brush, only the brush will be moved, but no line will be drawn between the two points. Because the M command just moves the brush, but doesn’t draw a line. So the M command often appears at the beginning of a path to indicate where to start drawing.

M x y

<path d="M0 0" stroke="skyblue"/>
Copy the code

There are three commands that can actually draw a Line (the M command moves the brush position, but does not draw a Line). The most common is the “Line to” command, L, which takes two arguments, the x and y coordinates of a point. The L command will draw a Line segment between the current position and the new position (the point before L where the brush is).

L x y

<path d="M0 0 L50 50" stroke="skyblue"/>
Copy the code

There are also two shorthand commands for drawing horizontal and vertical lines. H, draw a horizontal line. V, draw a vertical line. Both commands take a single parameter indicating the position to which they are moving in either the x or y axes, because they move in only one direction of the coordinate axes.

V y

<path d="M0 0 V50" stroke="skyblue"/>
Copy the code

H x

<path d="M0 0 H50" stroke="skyblue"/>
Copy the code

The Z command draws a line from the current point to the start of the path, that is, closing the path.

<path d="M0 0 Q50 50, 100 0 T200 0 Z" stroke="black" fill="none"/>
Copy the code

Curve command

The last coordinate (x,y) represents the end of the curve, the other two coordinates are the control points, (x1,y1) is the control point of the beginning, (x2,y2) is the control point of the end

C x1 y1, x2 y2, x y

<path d="M0 0 C40 40,60 40,100,0" stroke="skyblue" fill="none"/>
Copy the code

In addition, several Bessel curves can be joined together to create a long, smooth curve. Normally, the control points on one side of a point are the symmetry of the control points on the other side (to keep the slope constant). This can be done using a shorthand Bezier curve command S, as follows:

S x2 y2, x y

<path d="M0 0 C40 40,60 40,100,0 s150-40, 200 0" stroke="black" fill="none"/>
Copy the code

The S command can be used to create the same Bezier curve as before, but if the S command follows a C or S command, its first control point is assumed to be the central symmetry point of the second control point of the previous command curve. If the S command is used alone, with no C or S command preceding it, the current point is used as the first control point.

Another type of Bezier curve available is the quadratic Bezier curve Q, which is simpler than the cubic Bezier curve and requires only one control point, which is used to determine the slope of the curve at the beginning and end

Q x1 y1, x y

<path d="M0 0 Q50 50, 100 0" stroke="black" fill="none"/>
Copy the code

Similar to the cubic Bezier curve, the quadratic Bezier curve has a similar T command that extends the quadratic Bezier curve with shorter parameters

T x y

<path d="M0 0 Q50 50, 100 0 T200 0" stroke="black" fill="none"/>
Copy the code

The command T will infer a new control point from the previous control point.

arc

Arc command A

A rx ry x-axis-rotation large-arc-flag sweep-flag x y rx: The X-axis radius of the ellipse (converted to scale according to different end points) ry: The Y-axis radius of the ellipse (converted to scale according to different end points) : The included Angle between the arc and the X-axis large-arc-flag: 1 represents a large-angle arc, 0 represents a small-angle arc. 1 is clockwise, 0 is counterclockwise x: x-coordinate of the end point y: y-coordinate of the end point

<path d="M0 0 A50 100,60 00 100 0" stroke="#f90" fill="none"/>
Copy the code

For details about path, please refer to MDN: developer.mozilla.org/zh-CN/docs/…

Marker annotations

Marker can be understood as a gadget or marker icon, and arrows can be written with marker

<svg width="" height="200" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5"> 
<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"></circle> 
</marker> 
  </defs>
  <polyline points="10, living 50 reached 90," fill="none" stroke="black"
      stroke-width="2" marker-end="url(#markerCircle)" />
</svg>
Copy the code

The text text

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
  <path id="path1" d="M75,20 a1,1 00 0 100,0"/>
  </defs>
  <a xlink:href="https://www.baidu.com" target="_blank">
  <text x="0" y="15" fill="red">I love SVG
  </text>
  </a>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">this is test</textPath>
    <tspan>span test</tspan>
  </text>
</svg>
Copy the code

Text combined with textPath, tsapn and so on can play a lot of tricks, although it is a simple text, but can be expanded in many directions

A hyperlink

The tag name is the same as the HTML A tag, but it is not an element

<svg width="140" height="30">
  <a xlink:href="https://www.baidu.com"
     target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle"
          y="21" x="60">SVG A TAG</text>
  </a>
</svg>
Copy the code

The use of reuse

Use is used to copy a shape

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4"/>

  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
Copy the code

G group

G tags divide multiple shapes into a group for easy reuse

<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">circular</text>
    <circle cx="50" cy="50" r="20"/>
  </g>

  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
Copy the code

Defs label

Defs is used for custom shapes, but unlike using G directly, the internal code is not displayed and is only referenced by ID

<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">circle</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>

  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
Copy the code

The pattern label

Pattern can be a custom shape, which can be referenced to pave an area

<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>
Copy the code

foreignobject

It can contain elements from different XML namespaces, which in the context of a browser might be XHTML/HTML

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    polygon { fill: black }

    div {
      color: white;
      font-size:18px;
      height: 100%;
      overflow: auto;
    }
  </style>

  <polygon points="5, 5, 10, 185185, 10195 195" />

  <! -- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <! -- In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document -->
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
      porta vel dui convallis, rutrum imperdiet eros. Aliquam
      erat volutpat.
    </div>
  </foreignObject>
</svg>
Copy the code

Stroke attribute

Stroke-width: the width of the outline stroke-linecap: the shape attribute of the end stroke-dasharray: the attribute that defines the dashed line

The animate animated

Animate is defined inside an element. You can specify how an element’s attributes change

<svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
   	<animate attributeName="height" to="200" dur="3s" repeatCount="indefinite" />
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>
Copy the code

Animation and filters, gradients, blurs, shadows, etc., can create many effects. Instead of expanding them, they can be written separately

viewport

Represents the size of the SVG visible area, or you can think of it as stage size, canvas size.

<svg width="500" height="300"></svg>
Copy the code

The above SVG code defines a viewport that is 500 units wide and 300 units high. The size of the SVG is 500px by 300px.

ViewBox properties

Let’s start with an example of SVG:

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">     
  <rect x="10" y="5" width="20" height="15" fill="#cd0000"/> 
</svg>
Copy the code

If you ignore the viewBox for a second, here the SVG is 400 by 300 pixels and 1/20 of that size, but the display is clearly larger than that; The viewBox value has four numbers:

ViewBox ="x, y, width, height" // x: top left abscess, y: top left abscess, width: width, height: heightCopy the code

SVG is like our display screen. A viewBox is the box selected by the screenshot tool, and the final rendering is to display the screenshot in full screen again on the display.

A more intuitive explanation:

  1. Without a viewBox, it would look like this:
  1. ViewBox =”0,0,40,30″ corresponds to enclosing a box on the SVG as shown in the upper left corner below:
  1. Then enlarge the box to the entire SVG size, along with the small rectangle inside it:

perserveAspectRatio

In the example above, the aspect ratio of SVG is exactly the same as the aspect ratio of viewBox, which is 4:3. Obviously, viewboxes can’t always be used in the same proportion as viewports.

The value of the preserveAspectRatio property is a combination of two space-separated values: xMidYMid and meet. The first value indicates how the viewBox is aligned with the SVG ViewPort; The second value indicates how the aspect ratio, if any, is maintained. The first value is again composed of two parts. The first part indicates the alignment in the X direction and the second part indicates the alignment in the y direction. The options are as follows:

value meaning
xMin Viewport and viewBox are aligned to the left
xMid The viewPort is aligned with the viewBox X-axis center
xMax Viewport and viewBox are aligned to the right
YMin Align the upper edge of the viewPort and viewBox. Notice that Y is capital.
YMid Align the viewPort with the center point of the viewBox’s Y-axis. Notice that Y is capital.
YMax Align the bottom edge of the viewPort and viewBox. Notice that Y is capital.

X and y can be freely combined

value meaning
meet Keep aspect ratio scaling the viewBox to fit the ViewPort
slice Keep the aspect ratio and zoom in in a small direction to fill the viewPort
none Twist aspect ratio to fit viewPort adequately

The resources

MDN:www.yuque.com/u21340737/k… Rookie tutorial: www.runoob.com/svg/svg-tut… SVG explanation (Zhang Xinxu) : www.zhangxinxu.com/wordpress/2…

Commonly used tools

SVG Path design tool: yqnn.github. IO/svG-path-ed…