SVG basic graphics and parameters

　　

　　

What is SVG

• SVG refers to a scalable vector graphic (Scalable vector graphics)
• SVG is used to define a vector graph used on the web
• SVG defines graphics using XML format
• SVG images do not lose their graphics quality when zooming
• SVG is recommended by the Consortium
• SVG is a whole with a broad standard such as Dom and XSL

Advantages of SVG

• SVG can be read and modified by a lot of tools (such as Notepad)
• SVG is smaller in size and more compressible than JPEG and GIF images.
• SVG is scalable
• SVG images can be printed with high quality at any resolution
• The text in the SVG image is optional and searchable (well suited for map creation)
• SVG is an open standard
• The SVG file is purely XML

The above excerpt from Baidu Encyclopedia.

All right, get to the chase.

The following 7 types of predefined shapes are available in SVG:

• Rectangle <rect>
• Round <circle>
• Oval <ellipse>
• Line <line>
• Line <polyline>
• Polygon <polygon>
• Path <path>

There are common attributes, and there are properties that are unique, first of all the attributes.

1. Rectangle <rect>

　　　　

X y defines the coordinates, relative to the left and top of the SVG canvas (no units default to PX, other properties are like this)

Width Height definition width height

Rx RY defines the fillet radius

2, round <circle/>

　　

CX CY R defines the radius of the center coordinate

3, oval <ellipse/>

CX Cy Rx ry two radii (transverse radius and longitudinal radius) compared to round

4, Straight line <line/>

　　　　

X1 y1 X2 y2 Defining the coordinates of the starting and ending points

5, line <polyline/>

　　　　

　　pointsproperty defines the coordinates of each point, where the coordinates are x y separated by commas, and the coordinates are divided by spaces

6, polygon <polygon/>

　　　　

Just like a polyline, this one is closed. It also uses the Points property to define the coordinates of each point and then automatically closes.

7. Path <path/>

　　　　

The path is a bit complicated, a series of instructions, so it's good to export SVG files with software like AI.

The following commands are available for path data:

• M = MoveTo
• L = LineTo
• H = Horizontal LineTo
• V = Vertical LineTo
• C = Curveto
• S = Smooth Curveto
• Q = Quadratic Belzier curve
• T = smooth quadratic belzier curveto
• A = Elliptical ARC
• Z = Closepath

Note: All commands above allow lowercase letters. Uppercase indicates absolute positioning, and lowercase indicates relative positioning.

　

Some properties are common:

　　 　　 Fill fills color

　　Stroke defines the edge color of a graphic or text

　　stroke-width defines the width of a graphic or text edge

　　Stroke-linecap Define the appearance of line endpoints

Butt nothing, old style (flat bottom)

Round round.

Square side, but this is the original flat on the basis of an extra section of the rectangle

　　stroke-dasharray Create dashed lines, two numbers, solid lines and blank lengths, respectively

This can also be extended, but the number of numbers to be even, the table Mingshi line blank phase

　　　　

　　Stroke-linejoin The way the stroke corners are displayed

miter Right Angle

Round rounded corners

Bevel boxer

　　Stroke-dashoffset Indicates the starting offset of the dashed line

SVG basic graphics and parameters