The < SVG > tag is used to declare an SVG document fragment, and it has a number of built-in tags to help developers draw graphics

0. Basic introduction

SVG is an image format based on XML syntax and stands for Scalable Vector Graphics

It is essentially text that describes the image, so no matter how many times we enlarge the image, it will not be distorted

There are many ways to use SVG, but here are some of the most common:

  • Insert SVG code directly into HTML
  • Save the SVG code as a file, imported in HTML with tags
  • Save the SVG code as a file and import it as a resource in CSS

1. Create a container

The < SVG > tag can declare an SVG document fragment. If width and height are not specified, the default width and height are 300 x 150

<! DOCTYPEhtml>
<html>
<head>
    <title>SVG Demo</title>
</head>
<body>
    <svg id="graph" width="300px" height="300px"></svg>
</body>
</html>
Copy the code

2. Graphic labels

In the container, there are predefined graphics labels that developers can use to draw graphics

(0) General attributes

These graphics tags have some general properties that control the style of the graphics

  • fill: Sets the color inside the graphic
  • fill-opacity: Sets the opacity of the internal colors
  • stroke: Sets the color of the graphic border
  • stroke-width: Sets the width of the graphic border
  • stroke-opacity: Sets the opacity of the border color

(1) Rectangle

Rectangles can be drawn using the

tag, which has the following common attributes:

  • x: Coordinates of the upper left X-axis of the rectangle
  • y: Y coordinates of the upper left corner of the rectangle
  • width: Width of rectangle
  • height: Height of rectangle
  • rx: Rounded radius of the X-axis azimuth
  • ry: Fillet radius of the Y-axis azimuth
<svg id="graph" width="300px" height="300px">
    <rect x="100" y="100" width="100" height="100" />
</svg>
Copy the code

(2) circle

Circles can be drawn using the

tag, which has the following common attributes:

  • cx: Coordinates of the center X axis
  • cy: coordinates of the center of a circle
  • rRadius of:
<svg id="graph" width="300px" height="300px">
    <circle cx="150" cy="150" r="100" />
</svg>
Copy the code

(3) ellipse

Ellipse can be drawn using the

tag, which has the following common properties:

  • cx: Coordinates of the X-axis of the center of the ellipse
  • cy: coordinates of the Y-axis of the center of the ellipse
  • rx: horizontal radius
  • ry: Vertical radius
<svg id="graph" width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="100" ry="50" />
</svg>
Copy the code

(4) Line segment

Line segments can be drawn using the tag, which has the following common attributes:

  • x1: X-axis coordinates of the starting point of a line segment
  • y1: Y coordinates of the starting point of a line segment
  • x2: X-axis coordinates of the end point of a line segment
  • y2: Coordinates of the Y-axis of the end of the line segment
<svg id="graph" width="300px" height="300px">
    <line x1="50" y1="50" x2="250" y2="250" stroke="black" />
</svg>
Copy the code

(5) broken line

Polylines are actually made up of line segments connected together. Polylines can be drawn using the tag. Common attributes are as follows:

  • points: Defines a set of nodes, each containing two numbers representing the X and Y coordinates of the point
<svg id="graph" width="300px" height="300px">
    <polyline points="150, 100100, 200200, 200" fill="none" stroke="black" />
</svg>
Copy the code

(6) Polygon

Similar to polylines, except that polygons are closed automatically at the end. Polygons can be drawn using the tag.

  • points: Defines a set of nodes, each containing two numbers representing the X and Y coordinates of the point
<svg id="graph" width="300px" height="300px">
    <polygon points="150, 100100, 200200, 200" fill="none" stroke="black" />
</svg>
Copy the code

(7) Path

Paths can be used to draw any graph, and paths can be drawn using the tag, which defines the order in which they are drawn through property D

In fact, its value represents a set of draw commands, denoting actions by shorthand letters followed by necessary arguments. Common commands are as follows:

Just move, not draw

  • M x y: Moves the current point to(x, y)

Draw a straight line

  • L x y: From the current point to(x, y)Draw a line
  • H x: Moves horizontally from the current pointxPixel draw a straight line, ifxIf it is positive, it moves in the positive X direction, and if it is negative
  • V y: Moves vertically from the current pointyPixel draw a straight line, ifyIf it is positive, it moves in the positive Y direction, and if it is negative
  • Z: Draws a straight line from the current point to the starting point. It acts as a closed path

Draw the curve

  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y: Draw arcs

    Rx represents the X-axis radius of the ellipse, ry represents the Y-axis radius of the ellipse, and the x-axis-rotation represents the rotation Angle relative to the coordinate axis

    For large-Arc-flag, if the value is 0, the small arc part is drawn, and if the value is 1, the large arc part is drawn

    For sweep-flag, if the value is 0, it means counterclockwise drawing; if the value is 1, it means clockwise drawing

    X represents the X-axis coordinates of the end of the arc, and y represents the Y-axis coordinates of the end of the arc

  • Q cx cy x Y: Draw a quadratic Bezier curve

    (cx, cy) represents the coordinates of the control point, and (x, y) represents the coordinates of the end point

  • T x y: Short for drawing a quadratic Bezier curve

    If the command is preceded by Q or T, its control point is the symmetry of the previous control point with respect to the previous endpoint

    If the command is used alone, its control point and end point are the same

  • C CX1 cy1 CX2 cy2 x Y: Draw Bessel curves three times

    (CX1, cy1) represents the coordinates of the first control point, (cx2, cy2) represents the coordinates of the second control point, and (x, y) represents the coordinates of the end point

  • S cx2 cy2 x y: short for drawing a cubic Bezier curve

    If the command is preceded by a C or S command, its first control point is the point of symmetry of the previous control point with respect to the previous endpoint

    If the command is used alone, its first control point and second control point are the same point

<svg id="graph" width="300px" height="300px">
    <path d="M 150 150 L 250 150 A 100 100 0 0 0 50 150"
          fill="none"
          stroke="black" />
</svg>
Copy the code

(8) Text

Text can be drawn using the

tag, which has the following common attributes:

  • x: indicates the X-axis coordinates of the baseline starting point of the text area
  • y: indicates the Y-axis coordinates of the baseline starting point of the text area
<svg id="graph" width="300px" height="300px">
    <text x="50" y="50">Hello World</text>
</svg>
Copy the code

3. Function labels

In addition to graphical labels, you can also use functional labels in containers to implement specific functions

(1) Display

The

tag is used to copy and display a graph. Common attributes are as follows:

  • href: Specifies the node to be replicated
  • x: X-axis coordinates of the upper left corner
  • y: Y coordinates of the upper left corner
<svg id="graph" width="300px" height="300px">
    <circle id="myCircle" cx="50" cy="50" r="50" />
    <use href="#myCircle" x="200" y="200" />
</svg>
Copy the code

(2) Combination

Multiple shapes can be grouped together using the

tag

<svg id="graph" width="300px" height="300px">
    <g id="cross">
        <line x1="20" y1="20" x2="80" y2="80" stroke="black" />
        <line x1="80" y1="20" x2="20" y2="80" stroke="black" />
    </g>

    <use href="#cross" x="200" y="200" />
</svg>
Copy the code

(3) Definition

Use the

tag to customize a graph that is not displayed, but can be referenced

<svg id="graph" width="300px" height="300px">
    <defs>
        <g id="hook">
            <line x1="10" y1="50" x2="40" y2="90" stroke="black" />
            <line x1="40" y1="90" x2="90" y2="10" stroke="black" />
        </g>
    </defs>

    <use href="#hook" x="200" y="200" />
</svg>
Copy the code

(4) Mode

The tag is used to define a pattern that is not displayed, but can be referenced to fill an area. The common attributes are as follows:

  • X: the x-coordinate of the upper left corner of the bounding box. The default value is 0

  • Y: specifies the y-coordinate of the upper left corner of the bounding box. The default value is 0

  • Width: indicates the width of the bounding box. The default value is 0

  • Height: the height of the bounding box. Default is 0

  • PatternUnits: Units that define the pattern effect area, with the following optional values:

    • userSpaceOnUse: indicates the value in the current user coordinate system
    • objectBoundingBox: represents the value of the fraction or percentage referencing the bounding box
<svg id="graph" width="300px" height="300px">
    <pattern id="dot" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="5" />
    </pattern>

    <rect x="100" y="100" width="100" height="100" fill="url(#dot)" />
</svg>
Copy the code

(5) Pictures

An image can be inserted using the tag, and the source of the image can be specified using the xlink:href attribute

<svg id="graph" width="300px" height="300px">
    <image xlink:href="image.jpg" width="50%" height="50%" />
</svg>
Copy the code

(6) Animation

You can generate an animation using the

tag, with the following properties commonly used:

  • attributeName: The name of the property that generated the animation
  • from: The initial value of the property
  • to: The end value of the property
  • dur: Duration of the animation
  • repeatCount: Loop mode for animation
<svg id="graph" width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="100" ry="50">
        <animate attributeName="rx" from="100" to="300" dur="2s" repeatCount="indefinite" />
        <animate attributeName="ry" from="50" to="300" dur="2s" repeatCount="indefinite" />
    </ellipse>
</svg>
Copy the code