The basic content

SVG is what? Scalable Vector Graphics – Short for Scalable Vector Graphics – is a language for describing two-dimensional Graphics using XML technology, simply – Vector Graphics (without distortion)

SVG in relation to HTML5

Long before HTML5, there was SVG. SVG files with an extension of “.svg”. Before HTML5, you had to introduce SVG files into your HTML pages

The advantage of SVG

SVG can be created and modified using a text editor. SVG can be searched, indexed, etc., and SVG draws images without loss of authenticity

The difference between SVG and Canvas

SVG does not depend on resolution, but uses DOM or binding events to implement large rendering areas. Canvas depends on resolution and cannot use DOM or binding events

Set the style

1. Use the element’s attribute mode fill- set fill style fill- set opacity stroke- set stroke style stroke-width – set the border width

Rotate (), scale(), and translate() can be used to set the transform effect. Note that CSS styles cannot be used to set the transform effect.

Drawing graphics

Rectangle element – Element

<rect x="" y="" width="" height="" rx="" ry="" />
Copy the code

X and y – draw the upper-left coordinate value of the rectangle

Width and height – Sets the width and height of the drawn rectangle

Rx and xy – Set rounded rectangles

Circular element – Element

<circle cx="" cy="" r="" />
Copy the code

Cx and cy – Draw the center coordinate of the circle

If you don’t set cx and cy, the default is (0,0)

R – Draws the radius of the circle

Elliptic element – Element

<ellipse cx="" cy="" rx="" ry="" />
Copy the code

Cx and cy – Draw the center coordinates of the ellipse

Rx – Draws the horizontal radius of the ellipse

Ry – Draws the vertical radius of the ellipse

Note: Circles are drawn when rx and RY are the same

Line elements – Elements

<line x1="" y1="" x2="" y2="" />
Copy the code

X1 and y1 – The starting coordinates of the drawing line

X2 and y2 – Draw the end coordinates of the line

Note: When drawing a line, the default stroke color is white *

Polyline element – Element

<polyline points="" />
Copy the code

Points – All point coordinates of a broken line are set in this property

Note: The stroke color defaults to white and the fill color defaults to black

Polygon elements – Elements

<polygon points="" />
Copy the code

Points – All point coordinates of a broken line are set in this property

Note: SVG draws graphics using element single tags – add ending “/” to the start tag

The special effects elements

Linear gradient – baseline

<defs> <linearGradient ID ="grad" x1=" baseline starting point value x" y1=" baseline starting point value y" x2=" baseline ending point value x" y2=" baseline ending point value y"> <stop offset="0%~100%" Stop-color =" color "/> </linearGradient> </defs> <rect fill=" URL (# gradient element ID)">Copy the code

Ray gradient – Reference circle

<defs> <radialGradient id="grad" fx=" set the center of the starting benchmark circle x" fy=" set the center of the starting benchmark circle y" cx=" set the center of the ending benchmark circle x" cy=" set the center of the ending benchmark circle y" r=" set the radius of the ending benchmark circle "> < > </radialGradient> </defs> <rect fill=" URL (# gradient element ID)">Copy the code

Note: for linear gradient or ray gradient, the coordinate value of the base line (circle) must be 100 points, allowing negative values. For values greater than 100%, the gradient color position must be 100 points only from 0% to 100%

Filter element – Gaussian blur

Filter element – Filter element

Gaussian blur – feGaussianBlur element