Getting started with SVG

SVG profile

SVG, or Scalable Vector Graphics, is an XML application that can represent graphical information in a compact, portable form. Currently, there is growing interest in SVG. Most modern browsers can display SVG graphics, and most vector drawing software can export SVG graphics. SVG can be summarized as follows:

• SVG stands for scalable vector graphics
• SVG is used to define vector-based graphics for networks
• SVG uses XML format to define graphics
• SVG images do not lose graphical quality when they are enlarged or resized
• SVG is the World Wide Web Consortium standard
• SVG is integrated with W3C standards such as DOM and XSL

The application of SVG

1. Chart View (ECHART), Map View (Web-GIS)
2. Image (AI) wide web application
3. UI product design
4. SVG animation

Compatibility with SVG browsers

SVG is different from Canvas

Graphics system

The two systems used to describe graphic information in computers are grid graphics and vector graphics.

Raster graphics

In a raster graphics system, an image is represented as a rectangular array of picture elements or pixels as shown in the following image. Each pixel is represented by its RGB color value or an index in the color table. This series, also known as bitmaps, is stored in some compressed format. Since most modern display devices are also raster devices, displaying an image requires only a reader to unzip the bitmap and transfer it to the screen.

Vector graphics

A vector graph is A mathematically based description of doraemon in the picture below, how his head looks like A Bezier curve, what its parameters are and what colors are used to fill the Bezier curve.

Think of the process of drawing on a drawing paper. The work of a grid is like describing which square should be filled with what color, while the work of a vector is like describing a line or curve to draw from one point to another.

Creating an SVG image

Basic structure of AN SVG document

Here is an SVG document structure:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! Draw an image here --> </ SVG >Copy the code

The root element < SVG > defines the width and height of the entire image in pixels, as well as the SVG namespace through the XMLNS attribute. The content of the

element allows us to define a complete description of the image.

Basic shapes and properties

Basic graphics

,

, , ,

Basic attributes

Fill, stroke, stroke-width, transform

Basic shape — round

We can draw the cat’s face with the

element. The x and y coordinates of the center point of the element attribute are the radii. The point (0,0) is the upper left corner of the image. When we move horizontally to the right, the x-coordinate goes up, and when we move vertically down, the y-coordinate goes up. To avoid any misunderstanding, the API semantics are clear, the point (cx, cy) represents the center of the circle, and r represents the radius of the circle.

The color of the drawing is part of the presentation, and the presentation information is contained in the Style property, where the outline color is black and the fill color is None to make the cat’s face transparent.

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> </svg>Copy the code

Specify the attributes of the style

Then add two circles to represent two eyes. Stroke and fill are written inside the style, but SVG also allows us to use individual attributes instead of writing them all inside the style, as shown below:

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle> <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle> </svg>Copy the code

Graphical object grouping

Next, use two elements to add a beard on the right side of the cat’s face.

That’s easy to understand, so I won’t go into it. Here we need to wrap the beard as a component inside the grouping element

(more on that later) and give it an ID like this:

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle> <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle> <g id='whiskers'> <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line> <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line> </g> </svg>Copy the code

Graphical object grouping

Then use

to reuse the beard grouping and transfrom it to the left beard, as shown in the figure below. First, multiply the x coordinate by -1 in scale transformation and flip the coordinate system. This means that the point (75, 95) in the original coordinate system is now at (-75, 95). Translate then pans to the left to adjust the corresponding position.

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle> <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle> <g id='whiskers'> <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line> <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line> </g> <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use> </svg>Copy the code

Other Basic graphics

As shown in the figure below, we construct the mouth and ear using the element, which accepts a pair of x and y coordinates as the values of the points attribute. You can separate these values with Spaces or commas.

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle> <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle> <g id='whiskers'> <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line> <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line> </g> <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use> <! <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' /> <! <polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/> </svg>Copy the code

The path

All base shapes are shortcuts to the generic element. Then use the element to add a nose to the cat. The code shown below translates to “Move to coordinates (75, 90). Draw a line to the coordinate 65,90. Then draw an ellipse with x radius 5 and y radius 10, and return to the coordinates (75, 90).”

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle> <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle> <g id='whiskers'> <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line> <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line> </g> <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use> <! <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' /> <! <polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/> <! <path d='M 75 90 L 65 90 A 5 10 0 0 75 90' style='stroke:black; fill:#ffcccc' /> </svg>Copy the code

The path

Since this is a simple graphic, the user may not be able to tell that it is a cat, so we can use the element to add some text comments. Within the element, the x and y attributes are used to specify the position of the text, as shown below:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg' xmlns:xlink='http://wwww.w3.org/1999/xlink'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle> <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle> <g id='whiskers'> <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line> <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line> </g> <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use> <! <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' /> <! <polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/> <! <path d='M 75 90 L 65 90 A 5 10 0 0 75 90' style='stroke:black; fill:#ffcccc' /> <text x="60" y="165" style='font-family:sans-serif; font-size: 14pt; stroke:none; fill: black; '>Cat</text>Copy the code

If you can’t read the code, don’t worry; the following chapters will dive into the basics and properties.

Use SVG in web pages

SVG is an image format, so it can be included in HTML pages in the same way as other image types. There are two ways to do this: include the image inside the element (recommended when the image is an essential part of the page); Or insert the image as a CSS style property of another element (recommended when the image is primarily used for decoration).

inThe element contains SVG

Including an SVG image within a element is as simple as setting SRC to point to the SVG file location. As follows:

<img src='cat.svg' alt=''/>
Copy the code

Include SVG in CSS

SVG can be displayed using the background-image attribute. If there is no inherent size, SVG is scaled to 100% of the element’s height and width, as shown below:

div.background-cat {
  background-image: url('cat.svg');
  background-size: 100% 100%;
}
Copy the code

Using the Object tag to introduce SVG (not recommended)

The type attribute of the

<object data='cat.svg' type='image/svg+xml' 
  width='100' height='100'/>
Copy the code

Use SVG tags directly in web pages

Simply reference SVG, as shown below:

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'> <title>Cat</title> <desc>Stick Figure of Cat</desc> <! <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle> </svg>Copy the code

SVG Windows, View and Global (World)

Windows

SVG attributes width, height to control the window size, also known as the SVG container

The world

The code in SVG is the definition of the SVG world

Field of vision

The world is infinite, and the field of vision is a rectangular area to observe the world. As shown in the figure below

The world is immutable, but vision is changeable. In SVG, viewBox and preserveAspectRatio properties are provided to control the view.

Line segment

SVG can draw a line using elements, using only the starting (x1, y1) and ending (x2, y2) points of the line segment.

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <line x1='0' y1='0' x2='100' y2='100' style='stroke:black'/>
</svg>
Copy the code

Stroke characteristics

Line segments can be seen as strokes drawn on a picture. Stroke size, color, and style all affect the performance of the line segment. These features can be specified in the style property.

stroke-width

Stroke-width sets the thickness of the line segment, as shown below:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'> <line x1='0' y1='0' x2='100' y2='100' style='stroke-width:10; stroke:black'/> </svg>Copy the code

Stroke color and transparency

Stroke colors can be specified in the following ways:

• Basic color keywords: Aqua, black, Blue, Fuchsia, Gray, green, etc
• A 6-digit hexadecimal color of the form#rrggbb, includingrrRed,ggGreen,bbIt’s blue. They’re all in the range00--ff
• A 3-digit hexadecimal color of the form#rgb, includingrRed,gGreen,bIt’s blue. They’re all in the range0-f 。
• throughrgb()formally-specifiedrgbColor values, each of which has an integer range0-255.Or percentage0-100%
• The currentColor keyword represents the value of the CSS color property applied to the current element. Color is used to color HTML text and inherits elements, but has no direct effect on SVG.

Any line segment is a solid line. We can also use stoke-opacity to control the opacity of the line, which ranges from 0.0 to 1.0, the same as CSS. Here are a few examples:

Here are a few examples:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'> <! - red - > < line x1 = '10' y1 = '10' x2 = '50' y2 = '10' style = 'stroke - width: 5; stroke:red'/> <! Talk - green - > < line x1 = '10' y1 = '20' x2 = '50' y2 = '20' style = 'stroke - width: 5; stroke:#9f9f; Stroke - opacity: 0.2 "/ > <! - orange - > < line x1 = '10' y1 = '40' x2 = '50' y2 = '40' style = 'stroke - width: 5; Stroke: RGB (255128 (); Stroke - opacity: 0.5 "/ > <! - purple - > < line x1 = '10' y1 = '50' x2 = '50' y2 = '50' style = 'stroke - width: 5; stroke:rgb(60%,20%,60%); Stroke - opacity: 0.8 "/ > < / SVG >Copy the code

If you don’t specify the stroke color, you won’t see any lines because the default value of the stroke attribute is None

Stroke – dasharray properties

Sometimes we need dotted and dashed lines. We just need the stroke-dasharray property, whose value is a list of numbers representing the length of the line and the length of the gap, separated by commas or Spaces. The number of numbers should be even, but if it is odd, SVG repeats several times to make the total even.

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'> <! <line x1='10' y1='10' x2='100' y2='10' style='stroke-dasharray:9, 5; stroke: black; stroke-width:2' /> <! <line x1='10' y1='30' x2='100' y2='30' style='stroke-dasharray:9, 5, 9, 2; stroke: black; stroke-width:2' /> <! <line x1='10' y1='50' x2='100' y2='50' style='stroke-dasharray:9, 3, 5; stroke: black; stroke-width:2' /> </svg>Copy the code

rectangular

Rectangle is the simplest basic shape. You only need its top left x and y coordinates and its width and height. If you want to specify a rounded Angle, you can specify rx(the radius of the rounded corner in the x direction). The maximum value is half the height of the rectangle. If only one of rx and RY is specified, they are considered equal. Inside the rectangle can also be filled with color using the fill attribute, which defaults to black, and borders drawn with stroke, which defaults to transparent. Let’s do a couple of examples.

<svg width='300' height='500' xmlns='http://wwww.w3.org/2000/svg'> <! - filled with black and not draw frame - > < the rect x = '10' y = '10' width = '30' height = '50 "/ > <! < span style='fill: #0000ff; color: RGB (0, 0, 0); stroke: red; stroke-width: 7; stroke-opacity: .5'/> <! Rect x='10' y='70' rx='2' ry='2' width='20' height='40' style='stroke:black; fill:none'/>ry5' <! < span style='stroke:black; font-family: 'Times New Roman'; fill:none' /> <! < span style='stroke:black; color: RGB (50, 50, 50); font-family: 'Times New Roman'; fill:none' /> <rect x='50' y='130' rx='10' ry='5' width='10' height='40' style='stroke:black; fill:none' /> </svg>Copy the code

Circular and elliptical

To draw a circle, use the

element and specify the x and y coordinates of the center (cx/cy) and the radius (r). As with rectangles, circles are filled with black and have no outline when they are not specified with fill and stroke.

<svg width='300' height='500' xmlns='http://wwww.w3.org/2000/svg'> <circle cx='30' cy='30' r='20' style='stroke:black; fill:none'/> <circle cx='80' cy='30' r='20' style='stroke-width:5; stroke:black; fill:none' /> <ellipse cx='30' cy='80' rx='10' ry='20' style='stroke:black; fill:none' /> <ellipse cx='80' cy='80' rx='20' ry='10' style='stroke:black; fill:none' /> </svg>Copy the code

For an ellipse, in addition to specifying the center and coordinates, you also need to specify the radius in the x direction and the radius in the y direction. The attributes are rx and RY. For circles and ellipses, if cx or cy is omitted, the default is 0, the graph is not displayed if the radius is 0, and an error is reported if the radius is negative. Here are a few examples:

polygon

We can use the element to draw polygons, specify a series of x/ Y coordinate pairs using the points attribute, and separate them with commas or Spaces that must be even. Specifying coordinates does not require specifying the starting coordinate at the end; the element automatically returns to the starting coordinate. Here are a few examples:

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'> <! > <polygon points='15,10, 55,10, 45,20,20' style='fill:red; stroke: black; '/ > <! - star - > < polygon points = '35,37.5 37.9, 46.1, 46.9, 46.1, 39.7, 51.5, 42.3, 60.1 35 zhongguo kuangye daxue 27.7, 60.1, 30.3, 51.5, 23.1, 46.1, 32.1, 46.1'  style='fill: #ccffcc; stroke: green; '/ > <! > <polygon points='60 60, 65,72 80 60, 90,90 72,85 50,95' style="fill: yellow; fill-opacity:.5; stroke:black" /> </svg>Copy the code

It is easy to see from the above that polygons are easy to fill, because the sides of the polygon are not crossed, and it is easy to distinguish the inner and outer regions of the polygon. However, when polygons cross each other, it is not easy to tell which areas are inside the figure. As shown in the fusion below, is the region in the middle inside or outside?

< SVG width = '200' height = '200' XMLNS = "http://wwww.w3.org/2000/svg" > < polygon points = '48 96 0 13' 80 with just 13 dec 16 with just style='fill:none; stroke: black; ' /> </svg>Copy the code

SVG has two rules for determining whether a point is in a polygon. Corresponding to noneZero (default) and evenodd for the fill-true attribute, respectively. The renderings are as follows:

<body style='padding: 100 px 0 0 px "> 200 < SVG width = '200' height = '200' XMLNS =" http://wwww.w3.org/2000/svg "> < polygon points = '48, 96 dec 16 with just 13 0 'style =' the fill - 80 with just 13 rule: nonzero; fill:yellow; stroke: black; '/> <polygon points='148,16 116,96 196,48 100,48 180,96' style='fill-rule: evenodd; fill:red; stroke: black; ' /> </svg>Copy the code

Broken line

The element and the element have the same attributes, except that the graph is not closed.

< SVG width = '200' height = '200' XMLNS = "http://wwww.w3.org/2000/svg" > < polyline points = "5, 25, 10, 20, 30 and 45, 55, 30 Style ="stroke:black; stroke-width:3; fill:none" /> </svg>Copy the code

conclusion

The shape elements

Rectangle: < the rect x = “” y =” “width =” “height =” “style =” “/ >

< span style=” max-width: 100%; clear: both; min-height: 1em;

< span style=” max-width: 100%; clear: both; min-height: 1em;

Oval: < the ellipse cx = “cy” = “” rx =” “ry =” “style =” “/ >

// Note that fill is set to none

SVG has two rules for determining whether a point is in a polygon. Corresponding to noneZero (default) and evenodd for the fill-true attribute, respectively. The renderings are as follows:

Stroke characteristics:

attribute	value
stoke	Stroke color, default is None
stroke-opacity	Stroke opacity, default 1.0 (completely opaque), value range: 0.0 to 1.0
stroke-dasharray	Specify the length of dashed lines and gaps with a series of numbers, such as: stroke-dasharray:5,10,5,20
stroke-linecap	Shape of thread head and end: butt (default), round, square
stroke-linejoin	The shape of an angular shape or series of lines: miter (pointed, default), round (round), bevel (flat)
stroke-miterlimit	The maximum ratio of the width to the line width displayed at the intersection. The default is 4

Fill color

attribute	value
fill	Specifies the fill color. The default is black
fill-opacity	Numbers ranging from 0.0 to 1.0, where 0.0 means completely transparent and 1.0(the default) means completely opaque
fill-rule	The property value is nonzero (default) or evenodd.

Use styles in SVG

CSS is very similar in the use of SVG, there are four main styles, as follows:

• Inline style
• Internal style sheet
• External style sheets
• Performance attributes

Inline style

Use the same as CSS, as follows:

<line style="fill:yellow; stroke:blue; stroke-width=4" x1="10" y1="10" x2="100" y2="100"/>*Copy the code

Internal style sheet

The usage is the same as the CSS class name, as follows:

.linestyle{ stroke:red; stroke-width:2; <line class="linestyle" x1="10" y1="10" x2="100" y2="100"/>Copy the code

External style sheets

As with CSS usage, write the styles in a separate file and import them.

Performance attributes

We can use the style property to modify the style. Of course, the value of the style property can be written separately, which is also called the presentation property:

<circle cx='10' cy='10' r='5'
  fill='red' stroke='black' stroke-width='2'/>    
Copy the code

Group and reference objects

Although all drawings can be thought of as a series of almost identical shapes and lines, most non-abstract works of art are generally thought of as a series of named objects made up of a combination of shapes and lines. SVG provides elements that allow us to group elements in such a way as to make documents more structured and understandable.

<g>The element

1) The

element takes all child elements as a combination, usually with a unique ID as a name; 2) Each combination can also have its own


for recognition by text-based XML applications or for better accessibility for visually impaired users; 3) The reader reads the contents of the


elements. Hover over or touch the graphics within the group to display a prompt box for the content of the


elements can combine elements and provide comments, and combinations can be nested;

All styles specified in the start tag will be applied to all child elements within the group, as shown in the following example. Instead of copying style=’fill: None; stroke:black; ‘

< SVG width = '240' height = '240' XMLNS = "http://wwww.w3.org/2000/svg" > < title > happy family < / title > < desc > together is simple happiness < / desc > < g id='house' style='fill:none; Stroke :black'> <desc> house </desc> <rect x='6' y='50' width='60' height='60'/> <polyline points='6 50, 36 9, <polyline points='36 110, 36 80, 50 80, 50 110' /> <g > <g id='man' style='fill:none; Stroke: green '> < desc > man < / desc > < cx =' 85 'circle cy =' 56 'r =' 10 '/ > < line x1 =' 85 'y1 =' 66 'x2 =' 85 'y2 =' 80 '/ > < polylines points='76 104, 85 80, 94 104'/> <polyline points='76 70, 85 76, 94 70'/> </g> <g id='woman' style='fill:none; Stroke :red'> <desc> woman </desc> <circle cx='110' cy='56' r='10'/> <polyline points='110 66, 110 80, 100 90, 120 90, 110 80'/> <line x1='104' y1='104' x2='108' y2='90'/> <line x1='112' y1='90' x2='116' y2='104'/> <polyline points='101 70, 110 76, 119 80'/> </g> </svg>Copy the code

<use>The element

1) Repeating elements are common in complex graphics. SVG uses

elements to provide complex pasting capabilities for combinations defined within

elements or for arbitrary independent graphic elements; 2) After defining a set of < G > graphic objects, display them again using the

tag. To specify the combination you want to reuse, give the URI to the xlink:href attribute, along with the x and y positions to indicate where the combination should be moved. 3) The

element does not restrict the use of objects within the same file and can specify any valid file or URI.

So to create another upper house and a set of small people, just put the following code inside the < SVG > element.

<use xlink:href='#house' x='70' y='100'/>
<use xlink:href='#woman' x='-80' y='100'/>
<use xlink:href='#man' x='-30' y='100'/>  
Copy the code

<defs>The element

The above example has several disadvantages:

• When reusing the combination of man and woman, you need to know the positions of these shapes in the original image and use them as a basis for exploitation, rather than using simple numbers such as 0

• The fill and stroke colors of the house are established by the original graphics and cannot be overlaid by elements, which means that we cannot construct a row of colored houses.

• The document draws all three elements woman,man, and house, rather than ‘storing’ them individually, and then draws only a row of houses or a group of people.

The

element solves these problems

1) The SVG specification recommends that we place all objects that we want to reuse inside elements, so that SVG readers can more easily process data in a streaming environment. 2) Because they are grouped within the

element, they are not immediately drawn to the screen, but serve as “templates” for use elsewhere.

< SVG width = '240' height = '240' viewBox = '0 0 240 240 XMLNS = "http://wwww.w3.org/2000/svg" > < title > happy family < / title > </desc> <g id='house' style=' black'> </desc> Rect x='0' y='41' width='60' Height ='0 '/> <polyline points='0', 30 0, 60 0' /> <polyline points='30 110, 30 71, 44 71,  44 101' /> </g> <g id='man' style='fill:none; Stroke: green '> < desc > man < / desc > < cx =' 10 'circle cy =' 10 'r =' 10 '/ > < line x1 =' 10 'y1 =' 20 'x2 =' 10 'y2 =' 44 '/ > < polylines points='1 58, 10 44, 19 58' /> <polyline points='1 24, 10 30, 19 24' /> </g> <g id='woman' style='fill:none; Stroke :red'> <desc> woman </desc> <circle cx='10' cy='10' r='10' /> <polyline points='10 20, 10 34, 0 44, 20 44, 10 34' /> <line x1='4' y1='58' x2='8' y2='44' /> <line x1='12' y1='44' x2='16' y2='58' /> <polyline points='1 24, 10 to 30, 19 and 24 '/ > < / g > < g id =' picking '> < desc > couples < / desc > < use xlink: href =' # man 'x =' 0 'y =' 0 '/ > < use xlink: href =' # woman 'x =' 25 ' y='0'/> </g> </defs> <use xlink:href='#house' x='0' y='0' style='fill:#cfc'/> <use xlink:href='#couple' x='70' y='40'/> <use xlink:href='#house' x='120' y='0' style='fill:#99f' /> <use xlink:href='#couple' x='190' y='40' /> </svg>Copy the code

<symbol>The element

is a template. Like

, none of the internal elements are displayed on the canvas, so we don’t need to put it in the specification. However, we prefer to put it in

because symbol is also an element we define for subsequent use.

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
  <defs>
    <symbol id="circle" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
      <circle cx="50" cy="50" r="50"></circle>
    </symbol>
    <symbol id="triangle" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax slice">
      <polygon points="0 0, 100 0, 50 100"></polygon>
    </symbol>
  </defs>
  <g stroke="grey" fill="none">
    <rect x="0" y="0" width="50" height="100"></rect>
    <rect x="100" y="0" width="50" height="100"></rect>
  </g>
  <use xlink:href="#circle" width="50" height="100" fill="red"></use>
  <use xlink:href="#triangle" width="50" height="100" fill="red" x="100"></use>
</svg>
Copy the code

Image elements

<svg width='310' height='310' viewBox='0 0 310 310' xmlns='http://wwww.w3.org/2000/svg'>
  <ellipse cx='154' cy='154' rx='150' ry='120' style='fill: #999'/>
  <ellipse cx='152' cy='152' rx='150' ry='120' style='fill: #999' />

  <image xlink:href='3.jpg' x='72' y='92'
    width='160' height='120'
  />
</svg>
Copy the code

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Reference:

Tencent Class “Into SVG” moOCs website “Into SVG” < Essence of SVG >

Communication (welcome to join the group, the group will give red envelopes on weekdays, interactive discussion of technology)

Dry goods series of articles summarized as follows, feel good point Star, welcome to add groups to learn from each other.

Github.com/qq449245884…

Due to space constraints, today’s share only here. If you want to know more, you can scan the TWO-DIMENSIONAL code at the bottom of each article, and then follow our wechat public number to learn more information and valuable content.