SVG: the basics

SVG: the basics

One, viewBox and preserveAspectRatio

1. viewBox

• The viewBox of svg is a very powerful attribute, which allows the svg canvas to extend infinitely and precisely control its visible area. There are a total of 4 parameters, x,y,width,heightset in the order;
• The parameter of viewBox does not use a unit , because the visual space of svg is not defined by pixels, but a space that can be extended at will, so that it can adapt to different sizes;
• We can understand that the svg canvas will be divided into a grid, even if the width and height of the svg change, the number of squares inside will not change, so the proportion of graphics to the canvas will not change.

2. preserveAspectRatio

• preserveAspectRatio is an attribute of svg, the initial value is xMidYMid meet, which is used for viewBox to adapt to the svg container with a uniform ratio ;
• The first parameter xMidYMid determines whether the canvas in the SVG is scaled in a uniform proportion and the position of the scale, which is initially recognized as starting from the middle;
• You can also set the first parameter to none. In this case, the aspect ratio of the SVG will be ignored, and the entire viewBox canvas will be squashed or stretched to fill the available space of the SVG.
• The second parameter can be slice or meet. Meet will fill all the content of the viewbox into the svg canvas according to the aspect ratio of the svg, that is, the content of the picture will always remain in the svg;
• Slice allows the picture to exceed the canvas, to achieve "slicing", the content of the picture will exceed the svg canvas;

Two, draw basic graphics

1. Rectangle

<rect x="10" y="10" fill="red" stroke="pink" width="90" height="90"/>

Parameter analysis:

x: the x coordinate of the starting point of the pen;

y: the y coordinate of the starting point of the pen;

fill: fill color;

stroke: border color;

width: the width of the rectangle;

height: the height of the rectangle;

2. Round shape

<circle cx="10" cy="10" r="10" fill="red" stroke="pink"/>

The ellipse has two more parameters than the circle: rx, ry, which represent the length of the major axis and minor axis of the ellipse:

<eclipse cx="10" cy="10" rx="30" ry="20" fill="red" stroke="pink"/>

3. Polygon

The parameter points of the polygon represents the coordinates of each point, and svg connects these points in turn to obtain the polygon:

<polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62309,94 279,79 248,94 254,62 230,39 263,35"/>

4. Line

<line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/>

x1, y1 represent the starting point of the line, x2, y2 represent the end of the line;

3. Responsive, group and path drawing of svg

1. Responsive

• The width and height of svg can be set not only on the svg tag, but also on:

  1. Refer to the img tag of svg;

     <img src="hat.svg" width="200px" height="200px">
     

  2. On the css of svg;

     svg {
             
             
         width : 200px;
         height : 200px;
     }
     

  3. Introduce the object tag of svg;

     <object type="image/svg+xml" width="200px" height="200px" data="hat.svg"></object>
     

• If the svg does not set the width and height, it will inherit the width and height of the parent, which makes the svg have strong scalability, especially in responsive development;

• For this reason, when you need to set the width and height, you can add the row and column properties to the SVG as a guarantee, because the CSS properties will override the value of the row and column properties . If the CSS properties are not loaded correctly, the rank properties will be used.

• svg can be adapted according to percentage or window unit, but svg must declare viewBox !

2. Groups and paths

• <g><g/>Tag, namely "group", this tag is used to nest and aggregate multiple elements in SVG DOM. The attributes on the g tag will affect its child elements;

• <path/>Labels are used to draw paths. A path starting at d properties , d will typically property M或m（即moveto）as the first value, the first determining a new starting point; with z as a command path terminator. Here is some syntax about the path: