Disclaimer: SVG is a tag, but it’s not HTML5. HTML5 was added to the title just to fit with canvas.

Why learn SVG?

SVG stands for Scalable Vector Graphics and uses XML format to define Vector Graphics. Other image formats are pixel-based, but SVG has no concept of units, and its 20 is just 20 times 1, so SVG can draw graphics in large or small sizes without distortion.

SVG has the following advantages over other images:

  1. SVG can be read and modified by multiple tools.
  2. SVG is smaller and more compressible than images in other formats.
  3. SVG is scalable at will.
  4. SVG images can be printed at will with high quality.
  5. SVG images can add text and events, and are searchable for maps.
  6. SVG is pure XML, not HTML5.
  7. SVG is a W3C standard

SVG shape elements

2.1. SVG tags

SVG code is placed in SVG tags. Tags in SVG are closed tags, which are the same as tags in HTML. The attributes of SVG are:

  • There are width and height, which specify the size of SVG.

Eg: Draw a line. The complete code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important;" > < span style=" font-size: 10.5pt; > <svg width="300" height="300"> <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line> </svg> </body> </html>Copy the code

The SVG Settings above do not have units of width and height, which default to pixel values. If you need to add units, you can set relative units as well as absolute units.

  • ViewBox properties

< SVG viewBox=” x1,y1,width,height “>

The four parameters are the horizontal and vertical coordinates of the upper left corner and the width and height of the viewport. Indicates that only a portion of SVG is viewed, as determined by the above four parameters.

After using the viewBox, the overall size of SVG remains the same, and only the viewBox Settings can be seen, which is visually enlarged.

2.2. How does SVG embed HTML

SVG code can be embedded directly into HTML pages, or it can be embedded into HTML via HTML embed, Object, and IFrame. SVG files must use the.svg suffix. Describe how to use each method separately.

2.2.1 Embed embed:

SRC is the SVG file path, and type indicates the embed import file type.

Advantages: Supported by all browsers and allows scripting.

Cons: Not recommended for HTML4 and HTML, but HTML5 supports.

2.2.2 Object Embedding:

Data is the path of the SVG file, and type indicates the file type imported by Object.

Pros: All browsers support HTML, HTML4, and HTML5.

Disadvantages: Scripts are not allowed.

2.2.3 Iframe embedding:

SRC is the SVG file path, width, height, and frameborder set to the size and border.

Advantages: Supported by all browsers and allows scripting.

Cons: Not recommended for HTML4 and HTML, but HTML5 supports.

2.2.4 Embedding in HTML:

SVG tags are inserted directly into HTML content, consistent with other tag usage.

2.2.5. Connect to SVG file:

Use the A tag to link directly to the SVG file.

SVG shape elements

3.1. Line-line

Use grammar:  <svg width="300" height="300" > <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line> </svg>Copy the code

Use the line tag to create a line, where (x1,y1) is the starting point, (x2,y2) is the ending point, stroke draws a black line, and stroke-width is the line width.

3.2. Rect

// Use syntax: < SVG width="300" height="300" > <rect width="100" height="100" // set x="50" y="50" // SVG top left corner default (0,0) rx="20" ry="50" // optional setting stroke-width="3" stroke="red" fill="pink" // draw style control ></rect> </ SVG >Copy the code

The above parameters width and height are mandatory, and x and y are optional. If they are not specified, they default to (0,0), i.e. the top left corner of SVG begins to draw. Rx and ry are optional parameters. If this parameter is not specified, rectangles without rounded corners are selected. Fill defines the fill color.

3.3. Round-circle

< SVG width="300" height="300" > <circle cx="100" cy="50" R ="40" // circle radius stroke="black" stroke-width="2" fill="red"/> // Draw black box to fill red </ SVG >Copy the code

The above (cx,xy) defines the position of the center of the circle, which is optional. If not set, the default center is (0,0). R is required to set the radius of the circle.

3.4. Ellipse – Ellipse

An ellipse is similar to a circle except that it has different x and y radii, while a circle has the same radii.

< SVG width="300" height="300" > <ellipse rx="20" ry="100" // Set the x and y radius of the ellipse fill="purple" // Ellipse fill color cx="150" </ellipse> </ SVG >Copy the code

If rx=ry, it means that the ellipse is round. (cx,cy) is the center of the ellipse, which is optional. If not set, the default center is (0,0).

3.5. Polyline

< SVG width="300" height="300" style="border:solid 1px red; > <! <polyline points=" // polyline points 0, 0, // "Stroke ="green" ></polyline> <! - draw a terraced a polyline - > < polyline points = "0,0,50,0,50,50,100,50,100,100,150,100,150,150 stroke" = "# 4 b27ff fill" = "none" ></polyline> </svg>Copy the code

The execution result of the above code is shown in the figure:

Note that points contains the coordinates of multiple points, but not an array.

3.6. Polygon – polygon

The polygon tag is used to create a graph with at least three sides. The polygon is closed, that is, all the lines are connected.

< SVG width="300" height="300" style="border:solid 1px red; > < span style =" max-width: 100%; clear: both; min-height: 1em; </polygon> </ SVG ></polygon> </ SVG >Copy the code

Polygons are drawn somewhat like polygons, but polygons automatically close, polygons do not.

3.7. Path-path

Path is one of the most powerful SVG base shapes and can create not only other base shapes, but many more, such as Bezier curves, quadratic curves, and so on.

Point a concern, the next chapter is more exciting!