SVG series - 1, entry-level operation

Nature

Code painting.

Like Canvas, it is ultimately an image. Right-click to have the option of "Copy Image".

Find references: https://developer.mozilla.org/zh-CN/docs/Web/SVG

Getting Started

structure:

<div id="app"></div>

Performance:

#app {
    
    
	width: 600px;
	height: 600px;
	outline: solid pink 2px;
	margin: 4rem auto 0;
}

Effect: Empty and square.

In the div add:

<svg xmlns="http://www.w3.org/2000/svg"
	 width="600" height="600"
>
	<rect fill="red" height="50%" width="50%" x="0" y="0"/>
	<rect fill="pink" height="50%" width="50%" x="50%" y="0"/>
	<rect fill="blue" height="50%" width="50%" x="0" y="50%"/>
	<rect fill="yellow" height="50%" width="50%" x="50%" y="50%"/>
</svg>

To explain:
xmlns: svg code hint. stable.
width, height: total svg size. Here it is 600x600.

<rect>: draw a rectangle.
fill: The drawing method is fill, and the value is color.
height, width: The width and height of the drawing rectangle.
x, y: the starting point of the drawing, the coordinates of the upper left corner.

Effect:

Simple Analysis

svg frame:

<svg xmlns="http://www.w3.org/2000/svg"
	 width="600" height="600"
>
	<!--内容-->
</svg>

Draw a filled rectangle:

<rect 
	fill="red"  
	x="0" y="0" 
	height="50%" width="50%"
/>

Importing external files

<img>

<img src="./hello.svg" alt=""/>

IDEA can preview directly: