SVG profile

SVG stands for Scalable Vector Graphics and is characterized by scaling without distortion.

SVG, which is described in XML, is becoming more and more popular on the front end, with better browser support.

Here try to record drawing various shapes in SVG.

SVG tag

To use SVG, you need to first introduce the SVG tag:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
</svg>
Copy the code

Among them:

Width indicates the width of the picture. Height indicates the height of the picture.Copy the code

Draw a long square

Draw squares using the RECT tag, which has the following properties:

X, y represent the upper-left vertex coordinates relative to the upper-left corner of SVG. Width and height indicate the width and height. Fill Sets the fill color. Stroke represents contour color. Stroke-width indicates the contour width.Copy the code

Code examples:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<rect 
		x="0" 
		y="0" 
		width="200" 
		height="200" 
		fill="steelblue"
		stroke="pink" 
		stroke-width="10" 
	></rect>
</svg>
Copy the code

Operation effect:

Draw round

Draw circles using the circle tag, where the related attributes are:

Cx, cy represent circular coordinates relative to the upper-left corner of SVG. R is the radius.Copy the code

Code examples:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<circle 
		cx="100" 
		cy="100" 
		r="90" 
		fill="steelblue" 
		stroke="pink" 
		stroke-width="10"
		></circle>
</svg>
Copy the code

Operation effect:

Draw the ellipse

Draw circles using the Ellipse tag, where related properties:

Cx, cy represent center coordinates relative to the upper-left corner of SVG. Rx is short radius. Ry is the long radius.Copy the code

Code examples:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<ellipse 
		cx="100" 
		cy="100" 
		rx="90" 
		ry="50"
		fill="steelblue"
	></ellipse>
</svg>
Copy the code

Operation effect:

Draw a straight line

Draw circles using the line tag, where the related attributes are:

X1, y1 represent point 1 coordinates relative to the upper-left corner of SVG. X2, y2 represent point 2 coordinates relative to the upper-left corner of SVG. R is the radius.Copy the code

The main thing is to confirm two points, two points to determine a line.

Code examples:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<line 
		x1="0" 
		y1="0" 
		x2="200" 
		y2="200" 
		stroke="steelblue" 
		stroke-width="2"
	/>
</svg>
Copy the code

Operation effect:

Draw a polygon

Draw circles using the Polygon tag, with the following attributes:

Points represent the coordinates of multiple points, each separated by a space.Copy the code

Code example, draw a triangle:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <polygon 
		points="0, 0, 0150, 150150" 
		fill="steelblue"
	/>
</svg>
Copy the code

Operation effect:

Draw more lines

Draw circles using the Polyline tag, where the related properties are:

Points represent the coordinates of multiple points, each separated by a space.Copy the code

Code examples:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <polyline 
		points="0, 0, 0100, 60150, 80100" 
		fill="none"
		stroke="steelblue"
		stroke-width="3"
	/>
</svg>
Copy the code

Operation effect:

Since we are drawing a line segment, fill is set to None to indicate that we do not fill the color, and the line segment color is set with stroke.

Related references:

  1. Rookie tutorial: www.runoob.com/svg/svg-tut…
  2. SVG browser compatibility: caniuse.com/?search=svg