introduce

SVG is an open standard Vector Graphics language representing the Scalable Vector Graphics format developed and maintained by the World Wide Web Consortium (W3C). It is used to define vector-based graphics of the network.

Advantages of SVG:

  1. Text-based Format: SVG elements include Text, which makes web sites more accessible. The biggest advantage is that it can be captured by search engines, and users can directly find an SVG file through search engines.

  2. Scalability: SVG image quality does not depend on resolution. Unlike images in other formats or font ICONS, SVG is a vector image that can be zoomed in and out infinitely, and is very sharp on any device and size. No longer need to output various @2x magnification to fit different resolutions of the screen.

    Scalability also means that if you use the same image on your Web site, but at different sizes, you can use just one SVG. You don’t have to create multiple copies like PNG. Instead, you can embed the same image and define its size directly in YOUR SVG code.

  3. High Performance: If performance is your priority, use SVG. With SVG, there is no NEED for AN HTTP request to load into an image file. Pages load faster because there are no files to download. Faster load times translate into better web page performance and higher search engine rankings. In turn, it can improve the user experience.

  4. Small file Size: The size of a simple SVG file is determined by the colors, layers, gradients, effects, and masks it contains. The size of a PNG or any other raster graphics file is determined by the number of pixels it is composed of. The larger the PNG image, the larger its size. Not so with SVG. Furthermore, optimizing SVG can reduce its size.

  5. Extensive editing and animation possibilities: Unlike raster images, vector images can be edited in a dedicated vector drawing program or text editor. You can also edit the color or size of SVG directly from CSS. Animating SVG can be done with SMIL, the Web Animations API, WebGL, or CSS Animation.

    Common design tools support editing and exporting SVG graphics formats such as AI or Sketch or Inkscape

  6. Integration with HTML, XHTML, and CSS: SVG is an XML format for graphics. Designed to integrate and extend with other open Web platform technologies such as X/HTML, CSS and Javascript.

    You can interact with JavaScript using CSS. Mainstream devices also support SVG.

  7. W3C Document Object Model Support: SVG is maintained and supported by the W3C.

The downside is that SVG with a lot of detail can be bulky.

SVG images typically consist of a large number of small parts, and the large number of widgets makes the SVG format inconvenient to use. The more parts an image has, the larger its volume.

In practical use, SVG is probably better if the image is linear and contains very few colors for the sake of size. However, if details are important and there is a lot of detail, PNG or JPEG may be more appropriate.

Note that SVG cannot be used as a picture. If you are using images on your website, SVG is not the best choice and raster Image format should definitely be used.

Graphics system

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

  • raster image format: Raster image format

Raster pattern (raster graphics)

Raster images are represented as rectangular arrays of picture elements or pixels. As shown in the following image, each pixel is represented by its RGB color value or index in the color table.

A raster map, also known as a bitmap, is a collection of pixels, consisting of an infinite number of pixels, 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.

Bitmap images

Vector graphics (vector graphics)

Vector graphics is a mathematical representation of the image graphics, is composed of coordinates and coordinates based on the line, surface, volume, is based on drawing graphics, including the graphics parameters (color, coordinates, size, mathematical formula, etc.).

A better description:

SVG as a vector image consists of mathematical equations that define the positions and colors of the lines and curves that form graphics and text in XML format. SVG can be used for ICONS, logos, graphic design, and fonts.

As vector images, SVGs are composed of mathematical equations that define the positioning and color of lines and curves which make up graphic shapes and text in XML format. SVGs are used for icons, logos, graphic designs, and fonts.

Usually, however, vector images are made from bitmaps (for rendering on screen)

Basic knowledge of

Basic structure of SVG elements

SVG 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 < SVG > element defines the width and height of the entire image in pixels, and defines the SVG namespace through the XMLNS attribute. X and y represent the starting point of the SVG coordinate system.

The contents of the

element can be displayed by the reader on the title bar or as a hint when the mouse pointer points to the image.

The

element defines a complete description for the image.

The basic shape

Take a look at the SVG content and graphics first:

<svg x="0px" y="0px" width="600px" height="100px" viewBox="0 0 600 100">
    <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"></rect>
    <circle cx="170" cy="50" r="45" fill="white" stroke="black"></circle>
    <ellipse cx="320" cy="50" rx="100" ry="50" fill="white" stroke="black" />
    <line fill="none" stroke="black" x1="430" y1="6" x2="460" y2="95"></line>
    
    <polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/>
    <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

The X and y of SVG elements represent the starting point of the SVG coordinate system, and width and height represent the width and height. SVG’s coordinate system starts at the top left corner (0,0), increasing x to the right and y to the bottom.

  • Basic properties of SVG graphics

    Simple and commonly used attributes:

    • Fill denotes the color of the fill shape. The default is fill:black.

    • Stroke represents the color of the border. Default stroke: None, with no stroke.

    • Stroke-width Specifies the width of the border.

    • TransformCSS3 graph transformation properties

These attributes can be written directly on the element as separate attributes, or they can be written in the style attribute (that is, CSS). All appearance properties can be used with CSS

  • Basic graphics

1. rectDefine a rectangle or square:

The - 'x' and 'y' attributes are positions relative to the SVG ** element, i.e. the starting point of the rectangle; - 'width' Rectangle width - 'height' Rectangle heightCopy the code

2. <circle>Define the circle:

  • cxandcyDefine the center coordinates,
  • rIs the radius of the circle

3. <ellipse>Draw an ellipse:

  • rxIs the length of the short axis,ryFor the transverse long

4. <line>Represents a straight line

  • x1andy1Is the starting point of the line,
  • x2andy2Is the end point of the line.

5. <polyline>Said line

  • pointsRepresents a sequence of coordinate points, separated by commas or Spaces, and their X and Y coordinates. soThe total number of coordinates must be even (sum of x and y coordinates).polylineConnect these points to form a polyline. Such asPoints ="108 62,90 10, 70 45, 50, 10, 32, 62".

6. <polygon>Represents a closed polygon shape

  • points, also drawn using points.

SVG Containers, ViewBoxes, and globals [Important]

Graphic window

SVG attributes width and height control the window size of an SVG graph, also known as an SVG container

Global (world)

Elements, or code, in SVG are defined within the SVG world, which is a range of coordinate systems based on coordinates (0,0). The space of the SVG world can be regarded as an arbitrarily extended space, which is also convenient for different screen sizes.

Field of vision

The viewBox of SVG is used to precisely control and define the visual space of SVG, equivalent to the view of the SVG world, which is rendered on a window (SVG container). The relationship between viewBox attributes and SVG elements is analogous to the relationship between a viewport and a browser window. The viewBox defines the visible range, and the graphics of that range are displayed in SVG.

As shown in the figure below, the blue range corresponds to the viewBox, which is displayed on SVG as the visible area, which is what you see.

  • The viewbox default scope is the size of the container element, that is, the scope of the entire SVG element (SVG is a container element).
  • The size and size of SVG elementsviewBoxThe size does not matter, but the viewBox will fit within the scope of SVG. The viewBox’s fit rule is to fill one side by default (fill the entire height, or width, and automatically expand to the entire container in the other direction).You can see this in the following example

ViewBox parameters x, y, width, height.

The purpose of the viewBox is to render images to SVG in full, or with a set view, making it easy to resize the SVG without affecting the graphics you see. They can be used from the test experience

  • A practical example, understanding viewBox

The viewBox looks like this without setting it:

<svg width="400" height="300" style="border:1px solid blue;">
    <circle cx="10" cy="10" r="10" fill="blue"></circle>
    <circle cx="30" cy="10" r="10" fill="blue"></circle>
</svg>
Copy the code

The width of the viewBox is not the same as that of the viewBox. The width of the viewBox is not the same as that of the viewBox.

<svg width="400" height="300" viewBox="0 0 20 20" style="border:1px solid blue;">
    <title>viewBox</title>
    <desc>The view height is paved full, the width scaled, and then stretched across the width</desc>
    <circle cx="10" cy="10" r="10" fill="blue"></circle>
    <circle cx="30" cy="10" r="10" fill="blue"></circle>
</svg>
<svg width="400" height="300" viewBox="0 0 26 20" style="border:1px solid blue;">
    <title>viewBox</title>
    <desc>Field of vision</desc>
    <circle cx="10" cy="10" r="10" fill="blue"></circle>
    <circle cx="30" cy="10" r="10" fill="blue"></circle>
</svg>
Copy the code

That’s because the radius of the circle is 10 and the diameter is 20. A viewBox with a width of 20 and a height of 20 is equivalent to drawing a 20×20 box in the upper left corner of the SVG coordinate system. This box will then zoom in and fill the entire SVG area to show the content in this area.

Advanced use of SVG

SVG pathpath

View the following code and effects:

<svg class="svg-example" viewBox="0 0 580 400" xmlns="http://www.w3.org/2000/svg">
<g>
  <path id="svg_5" d="M148.60774, c28.24222 139.10039, 69.1061, 138.89615 0 0,88.8507 c - 138.89615, 88.8507-28.24222, 157.9568 0, 88.8507 z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="# 000" fill="none"/>
  <path id="svg_6" d=L21.11909 "m265.00089, l19.88082 146.09396, 21.09307, 22.40665 l21.11909, 22.40665 l19.88101, 21.09307 l - 21.11909, 22.40684 l21.11 909,22.40684 l - 19.88101, 21.09326-21.11909 l, 22.40684 l - 21.11909, 22.40684 l - 19.88082, 21.09326 l21.11891, 22.40684 l - 21.11891, 22.40684 z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="# 000" fill="none"/>
 </g>
</svg>
Copy the code
.svg-example {
  width:580px;
  height:400px;
}
Copy the code

  • pathIs the core element of SVG, and all basic shapes are common<path>A shortcut for the element.<path>The properties of thed, i.e.,data, save the graph data of a path. D usually starts with M or M (moveTo) as the first value, which determines a starting point.

As can be seen from the example, coordinate data in D are separated by commas or Spaces. Commands and coordinates can be separated by Spaces or written directly together. A command is represented by a key letter, uppercase for absolute positioning, and lowercase for relative positioning (for example, move 10px up and 7px left from the previous point).

Here are the various commands for the d attribute of :

Command Description type
M/m x y Moveto − Moves to a point (x,y),Lowercase represents the displacement with respect to the previous coordinate, the same as below unless otherwise specified. —
L/l x y Lineto − Draw a line from the current point to (x,y). Straight line command
H/h x Horizontal lineto − draw a horizontal lineto x. Straight line command
V/v y Vertical lineto − Draw a straight line vertically to Y. Straight line command
Z/z Closepath − Draw a line from the current point to the starting point of the path and close the path. The Z command is case insensitive Straight line command
A/a rx ry x-axis-rotation large-arc sweep x y Octagonal Octagonal Slabs slabs − (7 parameters) In octagonal slabs, octagonal slabs can be considered as part of a circle or ellipse and painted into (x,y) octagonal slabs with x and Y axes radii rx, RY, The x-axis-rotation degree of the ellipse relative to the X-axis. Large-arc =0 means that the arc is less than 180 read, large-arc=1 means that the arc is more than 180 degrees. Sweep =0 means that the arc rotates counterclockwise, and sweep=1 means that the arc rotates in time. Curve command
C/c cx1 cy1 cx2 cy2 x y Curveto − A cubic Bezier curve drawn from the current point to (x,y) with the starting and ending control points (CX1,cy1) and (CX2,cy2) respectively. Bezier curve — Bezier curve As shown in the figure, is the cubic Bezier curve: The control pointsIt describes the slope at the beginning of the curve, the slope at each point on the curve, as you go from the slope at the beginning to the slope at the end.
S/s cx2 cy2 x y Smooth curveto − this command should be used after or alone with C or S, assuming that C generates a curve S, the purpose of S is to draw another cubic bezier curveto (x,y), the control point of which is cx2,cy2, The beginning control point of the curve is the end point of S and the central symmetric point about the end point of S; When used alone, the current point is the first control point.
Q/q cx cy x y Quadratic Bezier curve − Drawing a quadratic Bezier curve from the current point to (x,y) with the control point of the curve being (cx,cy). A quadratic Bezier curve describes a parabola
T/t x y The smooth quadratic Bezier curveto − T command must be preceded by either a Q command, or another T command, extending the quadratic Bezier curve. If T is used alone, then the control point will be thought of as the same point as the end point, so a straight line will be drawn.

For information about Bezier curves, see the introduction to Bezier curves

Drawing with a computer is mostly about manipulating the mouse to learn the path of the line. There is a big difference with hand-painted feeling and effect. Even if a smart artist can easily draw all kinds of graphics, it is not easy to get the mouse to draw as you like.

The use of Bezier tools to draw largely compensated for this deficiency.

Bezier curve is one of the most used basic lines in computer graphics and image modeling.

Curves, in particular, with the help of third-order Bezier curves, you can draw very smooth lines.

SVG combinationgAnd reference objects

Group g

You can see above that two shapes are in the

element:

The

tag is the group group used to assemble multiple SVG elements. All styles set by g can be applied directly to child elements that have no related attributes set.

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

and

for recognition by text-based XML applications or for better accessibility for visually impaired users;

3) The reader reads the contents of the

and

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

4)

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

Here is an example of a graph that uses g-grouping, treating the same graph elements as a group

 <svg width='240' height='240' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Happy Family</title>
  <desc>A family together is simple and happy</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, 66 50' />
    <polyline points='36 110, 36 80, 50 80， 50 110' />
  </g>

  <g id='man' style='fill:none; stroke:green'>
    <desc>A man</desc>
    <circle cx='85' cy='56' r='10'/>
    <line x1='85' y1='66' x2='85' y2='80'/>
    <polyline 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>A 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 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, specify the URI for 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.

Therefore, you can recreate the above figures and houses directly using the following code:

<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 element

There are several disadvantages to using

:

  • When reusing the combination of man and woman, you need to know the position of the original graph and adjust the new position based on that position, rather than directly using the absolute position of the number

  • The fill and stroke colors of the house are established by the original graphics and cannot be overridden by the

    element.

  • 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.

These problems can be solved with

elements:

1) The SVG specification recommends that all objects that you want to reuse be placed within

elements, so that SVG readers can more easily process data in a streaming environment.

2) Composed within

elements, not immediately drawn to the screen, but used as a “template” for use elsewhere.

<svg width='500' height='240' viewBox='0 0, 500, 240' xmlns='http://wwww.w3.org/2000/svg'>
    <title>Happy Family</title>
    <desc>A family together is simple and happy</desc>

    <defs>
        <desc>It is not displayed and stored as a template</desc>
        <g id='house' style='stroke:black'>
            <desc>house</desc>
            <rect x='0' y='and' width='60' height='60' />
            <polyline points='0 41, 30 0, 60 41' />
            <polyline points='30 110, 30 71, 44 71， 44 101' />
        </g>

        <g id='man' style='fill:none; stroke:green'>
            <desc>A man</desc>
            <circle cx='10' cy='10' r='10' />
            <line x1='10' y1='20' x2='10' y2='44' />
            <polyline 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>A 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 30, 19 24' />
        </g>

        <g id='couple'>
            <desc>Husband and wife</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' />

    <use xlink:href='#house' x='240' y='0' style='fill:#e39' />
    <use xlink:href='#house' x='320' y='0' style='fill:#e39' />
    <use xlink:href='#house' x='400' y='0' style='fill:#e39' />
</svg>
Copy the code

Symbol element

As a template,

, like

, does not display any internal elements on the canvas. It is customary to place it in

because symbol is also defined as an element for subsequent use.


Viewboxes can be defined separately on symbol.

<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="purple" x="100"></use>
</svg>
Copy the code

Border (stroke) and fill

stroke

  • Color and width are covered above, along with a few more features to know:
attribute value
stroke Stroke color, default is None. There is no stroke
stroke-opacity Stroke opacity, default 1.0 (completely opaque), value range: 0.0 to 1.0
stroke-dasharray Specify the length of the solid line and the gap in the dotted line with a series of numbers, as in: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 Used to determine whether a point is outside or inside a polygon. The property value is nonzero (default) or evenodd. useevenoddBasically can achieve visual graphics interior empty.

fill-ruleIs a appearance property that defines the algorithm used to determine the interior region of a polygon (that is, the region that can be filled).

Nonzero: Determine whether a point is “inside” or “outside” of the shape: Draw a ray from that point to infinity in any direction, then detect where the shape intersects the ray. Counting from 0, each segment of the path that crosses the ray from left to right (clockwise) increases the result by 1, and each segment that crosses the ray from right to left (counterclockwise) decreases the result by 1. When the statistics are finished, if the result is 0, the point is outside; If the result is not zero, the point is inside.

Here’s nonzero’s example:

<svg viewBox="- 10-10, 320, 120" xmlns="http://www.w3.org/2000/svg">
  <! -- Nonzero fill rule is used for effect on shapes where path segments will intersect -->
  <polygon fill-rule="nonzero" stroke="red"
           points="50,0 21,90 98,35,35 79,90"/>
 
  <! -- Nonzero fill rule is applied to the effect of one shape inside another shape. The path segments of the two squares are in the same direction (both are clockwise) -->
  <path fill-rule="nonzero" stroke="red"
        d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z"/>

  <! -- This example is almost the same as the second example, except that the paths of the two shapes are in opposite directions: the outer square is clockwise, and the inner square is counterclockwise -->
  <path fill-rule="nonzero" stroke="red"
        d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z"/>
</svg>
Copy the code

Evenodd determines whether a point is “inside” or “outside” of the shape by drawing rays from that point to infinity in any direction and counting the number of path segments that intersect the rays among all the path segments of the shape. If an odd number of path segments intersect the ray, the point is inside; If there are even numbers, the dots are on the outside.

Here’s an example of evenodd:

<svg viewBox="- 10-10, 320, 120" xmlns="http://www.w3.org/2000/svg">
  <! -- Evenodd fill rule is used on shapes where path segments will intersect -->
  <polygon fill-rule="evenodd" stroke="red"
           points="50,0 21,90 98,35,35 79,90"/>

  <! -- Evenodd fill rule is applied to the effect of one shape inside another shape the path segments of both squares are in the same direction (both are clockwise) -->
  <path fill-rule="evenodd" stroke="red"
        d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z"/>

  <! -- This example is almost the same as the second example, except that the paths of the two shapes are in opposite directions: the outer square is clockwise, and the inner square is counterclockwise -->
  <path fill-rule="evenodd" stroke="red"
        d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z"/>
</svg>
Copy the code

This section is referenced from MDN fill-rule

Image elements

The image element is used to refer to an image, which can be a vector or a raster. For example, using the image element in SVG:

<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 use of SVG

Tag references an SVG image

For example, the IMG tag references SVG

<img src="emoj.svg" alt="emoj">
Copy the code

Using the Object tag to introduce SVG (not recommended)

The type attribute of the element indicates the type of file to be embedded. This property should be a valid network media type (often referred to as a MIME type). For SVG, use type=’image/ SVG + XML ‘.

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

CSS reference

SVG can be displayed using the background-image attribute

 .emoji {
   display: block;
   text-indent: -9999px;
   width: 100px;
   height: 82px;
   background: url(emoji.svg);
   background-size: 100px 82px;
 }
Copy the code

Inline SVG application – Use SVG tags directly in web pages

Inline means that you insert the SVG code directly into an HTML file.

Use an editor to open an SVG file and insert the code for the SVG image into the HTML file. As follows:

<body>
    <svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M63.89, C1.58 9.64, 9.64, 0.1, 79.5, 0.1, 93.33 c0, 13.83, 28.56, 25.03, 63.79, 25.03 ,63.79 c35.24, 0-11.21, 63.79-25.03 C127.68, 79.5, 126.21, 9.64, 63.89, 9.64 z" style="fill:#FCC21B;"/>
    <g>
        <defs>
        <path id="SVGID_1_" d="M63.89, c23.15 98.06, 0.05, 40.56-12.97, 41.19-29.05 - c - 27.24, 4.91, 55.14, 4.91-82.38, 0 C23.33, 85.09, 40.74, 98.11, 63.89, 98.06 z"/>
        </defs>
        <use style="overflow:visible; fill:#FFFFFF;" xlink:href="#SVGID_1_"/>
        <clipPath id="SVGID_2_">
        <use style="overflow:visible;" xlink:href="#SVGID_1_"/>
        </clipPath>
        <g style="clip-path:url(#SVGID_2_);">
        <path d="M78.05, 108 c 1.1, 0-2-0.9-2-2 v61. 07 c0-1.1, 0.9 2, 2-2 s2, 0.9, 2, 2 V106C80. 05107 2 PCT, 79.16, 108,78.05, 108 z" style="fill:#2F2F2F;"/>
        </g>
        <g style="clip-path:url(#SVGID_2_);">
        <path d="M92.21, 108 c 1.1, 0-2-0.9-2-2 v61. 07 c0-1.1, 0.9 2, 2-2 s2, 0.9, 2, 2 V106C94. 21107 2 PCT, 93.32, 108,92.21, 108 z" style="fill:#2F2F2F;"/>
        </g>
        <g style="clip-path:url(#SVGID_2_);">
        <path d="M63.89, 108 c 1.1, 0-2-0.9-2-2 v61. 07 c0-1.1, 0.9 2, 2-2 s2, 0.9, 2, 2 V106 C65.89, 107.1, 64.99, 108,63.89, 108 z" style="fill:#2F2F2F;"/>
        <path d="M49.72, 108 c 1.1, 0-2-0.9-2-2 v61. 07 c0-1.1, 0.9 2, 2-2 s2, 0.9, 2, 2 V106 C51.72, 107.1, 50.83, 108,49.72, 108 z" style="fill:#2F2F2F;"/>
        <path d="M35.56, 108 c 1.1, 0-2-0.9-2-2 v61. 07 c0-1.1, 0.9 2, 2-2 s2, 0.9, 2, 2 V106 C37.56, 107.1, 36.67, 108,35.56, 108 z" style="fill:#2F2F2F;"/>
        </g>
    </g>
    <path d="M64.01, 100.56 h - 0.25 - c - 24.13, 0-42.86-13.52-43.56-31.46 - c - 0.03-0.76, 0.29-1.49, 0.86 to 1.98 C0.57-0.5, 1.33-0.71, 2.08-0.57 c26.82, 4.84, 54.67, 4.84, 81.5, 0 c0. 75-0.14, 1.51, 0.08, 2.08, 0.57 c0.57, 0.5, 0.89, 1.23, 0.86, 1.98 C106.87, 87.04, 88.14, 100.56, 64.01, 100.56 z M63.88, 95.56 h0.13 c19.55, 0,35.56-10.1, 38.2-23.52 - c - 25.29, 4.18, 51.36, 4.18-76.65, 0 C2.64, 13.42, 18.65, 23.52, 38.2, 23.52 H63.88 z" style="fill:#2F2F2F;"/>
    <path d="M31.96, 54.45-0.78 c, 1.28-2.44, 1.7, 3.73, 0.93 c - 1.29-0.77-1.71-2.42-0.96-3.71 C0.18-0.31, 4.6-7.62, 14.37-7.62 c9.78,14.2 0, 7.31, 14.39, 7.62 c0.76, 1.29, 0.32, 2.97-0.97, 3.73-0.44 c, 0.26-0.91, 0.38-1.39, 0.38 C - 0.92, 0-1.83-0.47-2.34-1.32 - c - 0.13-0.22-3.12-4.96-9.69-4.96 C35.07, 49.49, 32.1, 54.24, 31.96, 54.45 z" style="fill:#2F2F2F;"/>
    <path d="M100 approximately 55.39 c to 0.43, 0.26-0.91, 0.38, 1.37, 0.38-0.94 c, 0-1.85-0.49-2.36-1.34 C - 0.11-0.2-3.08-4.94-9.66-4.94 - c - 6.69, 0-9.66, 4.89, 9.69, 4.94-0.77 c, 1.29-2.43, 1.73, 3.73, 0.96, 0.76-1.73 - c - 1.29-2.44-0.96-3.73 C0.18-0.31, 4.6-7.62, 14.38-7.62 c9.77,14.18 0, 7.31, 14.36, 7.62 C101.73, 52.96, 101.29, 54.63, 100,55.39 z" style="fill:#2F2F2F;"/>
    </svg>
</body>
Copy the code

reference

  • Getting started with SVG
  • Why You Should Use SVG Images

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event