The basic concept

Scalable Vector Graphics (SVG) is an IMAGE format based on XML syntax. While other image formats are based on pixel processing, SVG is a shape description of an image, so it is essentially a text file with small size and no distortion regardless of how large it is. SVG is graphics-oriented, HTML is text-oriented.

Embedded into HTML

SVG can be written in a separate file and then used,,, and other tags inserted into the page

  <img src="circle.svg">
  <object id="object" data="circle.svg" type="image/svg+xml"></object>
  <embed id="embed" src="icon.svg" type="image/svg+xml">
  <iframe id="iframe" src="icon.svg"></iframe>
Copy the code

SVG files can be converted to Base64 encoding and then written to web pages as Data URIs

  <img src="data:image/svg+xml; base64,[data]" />
Copy the code

Notes for SVG writing

  • SVG elements and attributes must be written in a standard format because XML is case-sensitive
  • Attribute values in SVG must be enclosed in quotes, even for numeric values
  • The default size of an SVG image is 300 pixels wide x 150 pixels high
  • Subsequent elements are rendered on top of previous elements

All elements of SVG

All elements of SVG

All attributes of SVG

All attributes of SVG

Common shape elements

Actually above is just a preliminary understanding of some commonly used SVG tag, because SVG tag provided not only that, but such as path label is in the shape of SVG in the most general label, because it can set the path to draw other shapes, such as rectangle, circle, ellipse, polygon, the line segment, even complicated bezier curve, and so on

The first time YOU see SVG’s <path… > < span style = “max-width: 100%; clear: both; min-height: 1em; Excuse me, excuse me

Well, 26 brothers are almost there to summon the dragon. Of course, the path dragon is the “dad” in THE SVG world, and you can make anything,

Want to paint beautiful graphics through path, need to understand this property, d path in the tag d attribute can define a series of commands and parameters, each instruction through a letter to specify, such as the above said M, it said the move to, also is the meaning of “move to”, such as let’s move to (10, 10) the coordinates of the point, You can write:

  <rect d="M10 10" />'
Copy the code

Of course, each type of letter is case sensitive. For example, M is based on an absolute coordinate on the canvas, while M is based on the coordinate of the previous point, which is the relative coordinate. For example, there are two kinds of instructions

  <path d="M20,20 L40 40 M60 60 L80 80" fill="none" stroke="blue" stroke-width="5"/>

  <path d="M20,20 L40 40 m60 60 L80 80" fill="none" stroke="blue" stroke-width="5"/>
Copy the code

The only difference between the two paths is the third instruction, M60 60 and M60 60

Line commands

  • The L: L command takes two parameters, x and y, and draws a line segment from the current position to the specified parameter position
  • H: H is actually short for horizontal, which means to draw a line segment in a horizontal direction. Since the direction is determined, the line segment can be drawn with only one parameter
  • V: The same as H, but represents vertical line segment drawing

Let’s draw a rectangle with H and V, let’s do it step by step

  • step1
  <path d="M10 10 H 90" fill="none" stroke="blue"/>
Copy the code

  • step2
  <path d="M10 10 H 90 V 90" fill="none" stroke="blue"/>
Copy the code

  • step3
  <path d="M10 10 H 90 V 90 H 10" fill="none" stroke="blue"/>
Copy the code

  • step4
  <path d="M10 10 H 90 V 90 H 10 V 10" fill="none" stroke="blue"/>
Copy the code

The above notation can also be abbreviated by an instruction, which uses the Z instruction

Z: The function of this instruction is to draw a line segment from the current position to the starting point. It is usually placed at the end of a series of nodes and is case insensitive. Think of it as a “closed loop” instruction

So the above example can be written like this to achieve the same effect

  <path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="blue"/>
Copy the code

Similarly, the above example can also be rewritten in the form of relative positioning, and the effect is consistent

  <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="blue"/>
Copy the code

Curve commands

When it comes to curves, the Bessel curve is impossible to open, which is very repellent to me who has failed in high numbers, but fortunately it hurts to be idle, so I learn it.

There are two types of Bessel curves in the PATH label. One is called the cubic Curve and the other is called the quadratic Bessel Curve, which doesn’t sound remotely relevant.

Let’s start with cubic Bezier curves

C: This directive is used to create a cubic Bezier curve, specifying three sets of parameters

Such as:

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
Copy the code

First, (20 20) and (40 20) represent the control nodes, one is to describe the slope of the starting point of the curve, the other is to describe the slope of the ending point of the curve, and the last group (50 10) represents the end point of the curve. To summarize this example, there is a line segment from (10 10) to (50 10). By setting the slope of the two control points, each point of the line segment is bent into the correct curve (following the slope trend).

There are examples of comparison of multiple sets of curves on MDN.

Let’s add another case here, which is to set two horizontal control nodes, and see how the line segment changes. Okay

  <path d="M10 10 C 10 10, 40 10, 50 10" stroke="black" fill="transparent"/>
Copy the code

The same smooth curve as in the above example can be generated by the S instruction, which can be divided into the following two situations

  • The S instruction follows C or another S instruction: the start control node of the S instruction is based on the symmetry of the previous control node, and the first set of nodes specified by the S instruction is the end control node
  • Separate S instruction: Both control nodes are set to the same point

For example:

  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="190"
    height="160"
  >
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="95" cy="80" r="2" fill="red"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <circle cx="150" cy="150" r="2" fill="red"/>
  </svg>
Copy the code

Let’s look at the trend of the graph by changing the first set of nodes of S

We can see that the curve will shift to the right as we add the x-coordinate of the control node to the end of S.

Now let’s look at the case where there is no other C or S instruction before the S instruction. The code is as follows

  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="300"
    height="300"
  >
    <path d="M10 80 S 95 150, 180 80" stroke="black" fill="transparent"/>

    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="95" cy="150" r="2" fill="red"/>
  </svg>
Copy the code

The other kind of curve is quadratic Bessel curve.

It is described by the instruction Q, which is simpler than a cubic Bezier curve.

Q: Only two groups of parameters need to be specified. The first group represents the coordinates of the control node and the second group represents the endpoint coordinates.

Example:

  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="300"
    height="300"> <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> <circle cx="10" cy="80" r="2" fill="red"/> <circle  cx="95" cy="20" r="2" fill="red"/> <circle cx="180" cy="80" r="2" fill="red"/> </svg>Copy the code

Similar to the triple Bezier, the secondary Bezier also provides quick gameplay, namely the T command

T: Before by finding a control node, to deduce a new control point, T only need to specify a set of instructions behind end point coordinates can, because the T instruction is based on the previous control points on the basis of the generated, so T instruction before must have Q instructions or other T, otherwise the generated control node and the previous control node can overlap, All you see on the canvas is a straight line.

Example:

  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="300"
    height="300""> < span style =" max-width: 100%; clear: both; min-height: 1em; 95 80 T 180 80" stroke="black" fill="transparent"/> <circle cx="10" cy="80" r="2" fill="red"/> <circle cx="52.5" cy="10"  r="2" fill="red"/> <circle cx="95" cy="80" r="2" fill="red"/> <circle cx="180" cy="80" r="2" fill="red"/> </svg>Copy the code

In the examples above, both curves yield the same result, although the cubic Bezier allows more degrees of freedom, the decision to use which curve to use depends on the situation and the number of symmetric curves

Radians

Radians can also be created in SVG, which is specified by the A directive, which takes 7 parameters

  1. Rx: X-axis radius
  2. Ry: y radius
  3. X-axis-rotation: The rotation Angle of the arc
  4. Large-arc-flag: determines whether an arc is greater than 180 degrees and a good thing is less than 180 degrees. 0 indicates a small Angle arc and 1 indicates a large Angle arc
  5. Sweep-flag: indicates the direction of the arc. 0 indicates that the arc is drawn counterclockwise from the beginning to the end, and 1 indicates that the arc is drawn clockwise from the beginning to the end
  6. X: the abscissa of the end of the arc
  7. Y: the vertical coordinate of the end of the arc

Example:

<? xml version="1.0" standalone="no"? > < SVG width = "325 px" height = "325 px" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < path d = "M80 80 A 45, 45, 0, 0, 0, 125 125 L 125 80 Z" fill="green"/> <path d="M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z" fill="red"/> <path d="M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z" fill="purple"/> <path d="M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z" fill="blue"/> </svg>Copy the code

The pie chart

By studying path, let’s draw a simple pie chart

  <svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
    <path d="M80 80
            A 45 45, 0, 0, 0, 125 125
            L 125 80 Z" fill="green"/>
    <path d="M170 80
            A 45 45, 0, 0, 1, 125 125
            L 125 80 Z" fill="red"/>
    <path d="M170 80
            A 45 45, 0, 0, 0, 125 35 
            L 125 80 Z" fill="blue" />
    <path d="M80 80
            A 45 45, 0, 0, 1, 125 35
            L 125 80 Z" fill="pink"/>
  </svg>
Copy the code

summary

In some recent projects, I came into contact with part of the requirements related to SVG, so this article is to record part of my summary in learning SVG, compare the basic, and facilitate my review and reference in the future.