Qian Hongchang (Flash Fire)
Why do we use SVG
-
Compare that to hd PNG
Continue to contrast
The same high definition texture, vector images are not afraid of magnification, small volume. One point to note here is that because SVG holds information about points, lines, and planes, regardless of the resolution and size of the image, just the complexity of the image, image files typically take up less storage space than PNG files.
-
Optimized SEO and accessibility tools, because SVG images are made using XML(Extensible Markup Language). XML tags are symbols of information that computers can understand, through which computers can process articles containing various information, etc.), and the browser prints them by drawing each point and line, rather than filling some space with predefined pixels. This ensures that SVG images can be adapted to different screen sizes and resolutions.
-
Because they are defined in XML, SVG images are more flexible than JPG or PNG images, and we can interact with them using CSS and JavaScript. SVG image Settings can include CSS and JavaScript. With data driven views like React and Vue, SVG operations are much more comfortable. (I will share with you some small SVG animations in practice for our projects below)
-
At the application level, SVG provides some image editing effects, such as masking and clipping, applying filters, and so on. And SVG is just text, so it can be effectively compressed using GZip.
2. Understand common SVG elements and their use
Most tutorials are available online, but here are a few I think are worth mentioning
2-1. SVG tag
<! DOCTYPEsvg PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0, 0, 100, 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="49" stroke="black"
stroke-width="2" fill="red" />
</svg>
Copy the code
This is the SVG source file we took from the designer, tore it apart and said. First of all, we removed all the INTERNAL SVG code, so it looks like this
<! DOCTYPEsvg PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0, 0, 100, 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
Copy the codeThis is the form that 99% of SVG presents and some properties, including the width and height viewport properties, the viewBox property, and the XMLNS property. Let’s go line by line
Line 1: Contains the XML declaration, which is actually similar to the DTD declaration for an HTML document. Analogies to THE declarative approach of HTML5
<! DOCTYPEhtml>
Copy the codeSVG document declaration (underline: In general, if SVG is used in HTML, we don’t have to write such document declaration, but if it is a separate SVG file, we do, otherwise browsers may not recognize it)
Copy the codeThe standalone attribute we see indicates whether the XML declaration is standalone, if not standalone=”no”, then the external DTD is introduced later, as shown in the second and third lines. The Version attribute is used to indicate the version of an SVG document that complies with the specification. It is only allowed on the root element < SVG >. It is purely an illustration and has no effect on rendering or processing. Although it accepts any number, only 1.0 and 1.1 are valid choices.
Line 4: This is the beginning of the SVG content
<svg width="300" height="300" viewBox="0, 0, 100, 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
Copy the code- The XMLNS attribute is the XML declaration space for SVG. This part is similar to XMLNS =”www.w3.org/1999/xhtml” in HTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Copy the code- Width & height property, which can be interpreted as the size of the canvas. That’s the size of the canvas. Here’s an example:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=100 height="100">
<circle cx="50" cy="50" r="49" stroke="black"
stroke-width="1" fill="red" />
</svg>
Copy the code
For the current SVG canvas size of 100 * 100 canvas, let’s draw a circle with radius 49 plus 1 unit stroke. There’s nothing wrong with that. What you see is what you get. So let’s try changing width and height. found
<svg
style="background:#007fff"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="300"
height="300">
<circle cx="50" cy="50" r="49" stroke="black"
stroke-width="1" fill="red" />
</svg>
Copy the code
We can see that the blue area is our specified width and height, and the graph is still the same circle. So we understand what width and height do.
- ViewBox property, so let’s go ahead and modify this code with the viewBox property
<svg
style="background:#007fff"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
<!-- viewBoxdefine-->
viewBox="0, 0, 100, 100"
width="300"
height="300" >
<circle cx="50" cy="50" r="49" stroke="black"
stroke-width="1" fill="red" />
</svg>
Copy the code
We can see that the blue area stays the same size, but our circle gets so big that it fills the entire canvas. Yes, your idea is right. The so-called viewBox property can be understood as the screenshot operation when we chat on wechat. The first two parameters indicate the starting point of the screenshot, and the second two parameters indicate the end point of the screenshot. Both are based on the upper left corner. Finally, stretch the screenshot onto the SVG canvas and you have the SVG we saw above. Now let’s change the viewBox again to 0, 0, 50, 50 to help understand
<svg
style="background:#007fff"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0, 0, 50, 50"
width="300"
height="300" >
<circle cx="50" cy="50" r="49" stroke="black"
stroke-width="1" fill="red" />
</svg>
Copy the code
So the whole logic looks something like this
2 – (2) the path
In SVG, you can think of PATH as the most basic drawing element, and because it is so basic, it can evolve into a variety of complex drawing effects. So PATH is the most basic and complex drawing element.
The underlying attributes of path and what they represent
We know that for a path tag, the most important attribute is the D attribute, which is a set of instructions and parameters. In the value of the d attribute, we can see a bunch of very complex instruction strings.
<path d="M73.8616812,68.8664775 L74.5015359,74.5939423 L68.1746283,71.7969507 C66.2299599,72.4159872 64.1377269,72.7711218 61.9444643,72.7711218 C51.9719158,72.7711218 43.8883163,65.7823167 43.8883163,57.1611168 C43.8883163,48.5399169 51.9719158,41.5511118 61.9444643,41.5511118 C71.9164005,41.5511118 80,48.5399169 80,57.1611168 C80,61.8286883 77.6181486, 66.006419, 73.8616812, 68.8664775," id="Fill-1" fill="#FFFFFF"></path>
Copy the code
In fact, do not feel sick, here continue to break the break said
- The instructions in the d attribute
| instruction | parameter | meaning |
|---|---|---|
| M | x y | Move the brush to the point (x,y) |
| L | x y | The brush draws a line segment from the current point to the point (x,y) |
| H | x | The brush draws a horizontal line segment from the current point to the point (x,y0), where y0 represents the Y-axis coordinates of the brush before drawing, i.e. the Y-axis is unchanged |
| V | y | The brush draws a vertical segment from the current point to the point (x0,y), where x0 represents the X-axis coordinates of the brush before drawing, i.e. the X-axis is unchanged |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | The brush draws an arc from the current point to the point (x,y) |
| C | x1 y1, x2 y2, x y | The brush draws a cubic Bezier curve from the current point to the point (x,y). |
| S | x2 y2, x y | Special version of the cubic Bezier curve (omit the first control point) |
| Q | x1 y1, x y | Draw a quadratic Bezier curve to the point (x,y) |
| T | x y | Special version of quadratic Bezier curves (control points omitted) |
| Z | There is no parameter | Draws a closed graph. If the D attribute does not specify the Z command, draws a line segment instead of a closed graph |
The above is all the instructions in the path, where the bold part is the common basic instructions, relatively easy to understand. Each instruction has a corresponding lowercase instruction. For example, M 10,10 has M 10,10. Capital letters represent absolute position, which is absolute to the origin of the upper-left corner of the SVG canvas. Lower case represents relative position, which is where the brush is currently positioned.
- A(ARC) draw arc instruction
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
<svg width="100%" height="100%">
<path d="M0 0 A 45 45, 0, 0, 0, 45 45 L 45 0 Z" fill="green"/>
</svg>
Copy the code
I drew a picture to help you understand
By following the steps in the diagram, we can draw both circles, and then we see that A has three zeros which we didn’t explain, so let’s review A, and we can understand it better with this diagram
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- Bessel curve
The besser curve is very clear and easy to understand. It is recommended for students who want to know more about SVG paths
2-3. Basic graphics
The basic graph is relatively easy to understand, so let’s just summarize it in a table without going into too much detail
| graphics | The label | The template | meaning |
|---|---|---|---|
| rectangular | < rect > | <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> |
X: x, y: y, rx: radius of chamfered x, ry: radius of chamfered X, width, height: height |
| circular | < circle > | <circle cx="100" cy="100" r="50" fill="#fff"></circle> |
Cx: abscess of center of circle, cy: ordinate of center of circle, r: radius |
| The ellipse | < ellipse > | <ellipse cx="75" cy="75" rx="20" ry="5"/> |
Cx: abscess of the center of the ellipse, cy: ordinate of the center of the ellipse, rx: radius of the X-axis of the ellipse, ry: radius of the Y-axis of the ellipse |
| A straight line | < line > | <line x1="10" x2="50" y1="110" y2="150"/> |
X1, y1: starting point, x2, y2: end point |
| Broken line | < polyline > | <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> |
Every two points are paired with Spaces to form a coordinate point and separated by commas to form a set of coordinates. Make a line. |
| polygon | < polygon > | <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> |
It’s like a broken line, except that the last point automatically closes the first point, so it closes. |
2-4. Symbol label
The symbol tag is the core technology of our live team’s ICON management platform implementation. It serves as the equivalent of a symbol in our toolbox, as follows:
<svg class="svg-sprite">[Toolbox]<symbol id="icon-wave_add" viewBox="0 0 76 76"><path d="M38 0A4 4 0 014 4V30H30A4 4 0 110 8H41.999L42 72A4 4 0 11-8 0L -.001-30H4A4 4 0 110-8H30V4A4 4 0 014-4z" fill="currentColor" fill-rule="evenodd" opacity="none"></path></symbol>
<symbol id="icon-time" viewBox="0 0 10 10." "><path d="M5 0a5 50 0 110 10A5 50 0 015 0ZM0 1.5A.5.5 0 00-.5.5v3.02 L.008.088A.5.5 0 00.238.343L7.02 6.794 L.082.039A.5.5 0 00.603-.215L.039-.082a.5.5 0 00-.216-.603L5.5 4.735V2l-.008-.09A.5.5 0 005 1.5z" fill="rgba(153,153,153,1)" fill-rule="evenodd" class=""></path></symbol>
<symbol id="icon-wave_delete" viewBox="0 0 40 40." "><g fill="none" fill-rule="evenodd"><circle fill="# 000" opacity="0.2" cx="20" cy="20" r="20"></circle><path stroke="#FFF" stroke-width="4" stroke-linecap="round" d="M13 13l14 14M27 13L13 27"></path></g></symbol>
</svg>
Copy the codePut one copy and you can quote it indefinitely. We don’t see it when it’s in the toolbox (the page doesn’t render it), we only see it on the page when we reference it using the
<use xlink:href="#icon-time"></use>
Copy the code
We use
+
What’s the difference between symbol and G in defs? In my understanding, the biggest difference between symbol and G tag is that symbol can add view attributes and viewport attributes to reusable code blocks. It is convenient to adjust directly to the appropriate use (print) size when taking.
Iii. SVG animation and its application
3-1. SVG Animation summary
In fact, there are many things to say about SVG animation. In this article, we mainly talk about some basic attributes and techniques of SVG animation: 1, SMIL driver 2, JavaScript driver 3, CSS driver
| technology | describe | note |
|---|---|---|
| SMIL | Very powerful and pure tabbed animation | Although SMIL has been deprecated since Chrome 45, it is still supported, and all major browsers have good support |
| CSS | CSS is also limited to simple animations | The compatibility of offset-path is poor. CSS animation is not suitable for interactive animation |
| JavaScript | Complex animation will use JS, including the world of some SVG animation library, but also to achieve JS |
SVG is an XML-based vector graphics description language that can be roughly understood as HTML, so it can interact with JS and CSS. Especially CSS, we can use CSS3 to animate SVG. But keep in mind that you can only style HTML inline with CSS if it contains SVG files. In this article, we are not easy to achieve CSS3 + HTML, but using SVG can be quickly and easily implemented several scenarios to do the corresponding introduction
3-2.SVG animation practices
1, change of line 2, path to achieve smooth changes of graphics 3, stroke animation 4, specified trajectory movement
3 minus 2 minus 1, the change in line
The figure below is a GIF icon with a volume of about 156KB, compressed.
If we do it in SVG. What should I do? We divided into the following two ways, hands-on compatibility is OK
CSS+SVG implementation code practices
Code practices based on SMIL implementations
Summary & Explanation:
Point 1: There are many attributes in SVG that can be described using CSS. Based on CSS animation three musketeers (Animation, Transform, Transition) on the basis of. We control a few properties to get the animation we want. The following two points are worth noting:
- Transform: There are two ways to use transform. One is to write the transform property in an SVG tag and the other is to write the transform in a CSS file. They are fundamentally different.
<rect transform="rotate(45deg)..." . /> rect {transform: rotate(45deg)}/** The in-line transform attribute is executed at the top left corner of our SVG element, which is the origin of the SVG coordinate. * * /
/** The CSS transform starts at the center of the element itself. * * /
Copy the code- CSS descriptive properties: Many articles tell us that CSS can control SVG for animation, but in the actual development process we would like to know which properties we can control CSS. Here are some common properties that you can use with confidence
| Name of a CSS controllable property | Achievable scenario |
|---|---|
| In theory, all display properties can be controlled using CSS: for example, stroke-width, color, fill, and so onDisplay properties of SVG | Most display styles change dynamically |
| x | We know that the rectangle has x and y properties, which means the starting point, controlling x, we can dynamically control the displacement of the rectangle on the X-axis |
| y | By controlling y, we can dynamically control the y-displacement of the rectangle |
| cx | <circle cx="100" cy="100" r="50" fill="#fff" />This is a circle, and controlling CX can control the displacement of the X-axis of the circle (or ellipse) |
| cy | Controlling cy can control the Y-axis displacement of the circle (or ellipse) |
| r | R is the radius of the circle, and controlling R can control the size of the circle |
| rx | Rx is the X-axis radius of the ellipse, and controlling RX can control the size of the ellipse |
| ry | Ry is the radius of the ellipse in the Y-axis direction. Controlling RY can control the size of the ellipse |
| d | The d attribute of the path tag, which controls the path information of D, can control the change of graph (The d property does not support CSS description in Safari. We will explain this in more detail below) |
| PS: If you look at the official in daily development, it is not clear whether the property can be controlled by CSS, here to provide you with a query link | Css-controlled SVG-related properties are not supported |
You can animate SVG using SMIL. For example, the following code can do the same thing without CSS
export default function App() {
return (
<div className="App">
<svg width="100%" height="100%" viewBox="0 0 100% 100%." ">
{[1, 2, 3, 4, 5].map((it, index) => (
<line
key={index}
stroke="# 000"
strokeWidth="2"
x1={15 + index * 5}
y1="8"
x2={15 + index * 5}
y2="22"
>
<animate
attributeName="y1"
values="8; 15; 8"
dur="1s"
begin={` ${(5 % (index + 1)) * 0.2}s`}
repeatCount="indefinite"
/>
<animate
attributeName="y2"
values="22; 15; 22"
dur="1s"
begin={` ${(5 % (index + 1)) * 0.2}s`}
repeatCount="indefinite"
/>
</line>
))}
</svg>
</div>
);
}
Copy the codeSo what is SMIL for SVG? I don’t want to go into detail here, because there are many articles on the Internet that describe the SMIL animation bar in more detail. This article wants to communicate with you is how to make a choice between SMIL driver and CSS driver. Although Chrome officially announced that SMIL was being discontinued back in Chrome 45, this is how well it has been supported by major browser vendors so far
3-2-2, PATH Changes (graph smooth changes)
CSS+SVG implementation code practices Logo changes
Code based on SMIL implementation practices Logo changes
CSS+SVG implementation code practice play pause
Code based on the SMIL implementation practices play pausing
Summary & Explanation:
Point 1: There are two ways to control the
Based on the CSS:
path {
transition: ease all 0.3 s; // Treat SVG & just like dom.play{// here is the <path /> path in the play state:path("M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z");
}
&.pause{// here is the <path /> path in the play state:path(
"M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z"); }}Copy the codeBased on SMIL(i.e. dynamic control of the
const pathMap = {
from: "M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z".to: "M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"
};
<svg class="icon" viewBox="0 0 120 120" width="400" height="400">
<path
d="M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z"
fill="# 000000"
>
<animate
attributeName="d"
from={play ? pathMap.from : pathMap.to}
to={play ? pathMap.to : pathMap.from}
dur="0.3 s"
begin="indefinite"// Set the start time to infinity so that it does not autoplayfill="freeze"
/>
</path>
</svg>
Copy the codeThis smooth transition is achieved by switching between the above two paths.
Point 2: We see the pattern change, all need to follow a principle is the point alignment principle, what does it mean? We can see the following demo, pentagram to 10 sides (polygon drawing bad, sorry… 😜). Is the transition from 10 control points to 10 control points. So it’s smooth
There is no such smooth transition from 10 points to 3 points (of course, many SVG animation frameworks now solve this problem). See framework recommendations at the end)
The application of 3-2-3, Stroke animation
CSS+SVG implementation code practice – Star ring
CSS+SVG implementation code practice – LOGO stroke
Code practice – Progress loop based on SMIL implementation
Summary & Explanation:
There are a lot of things we can do with stroke animations, such as progress bars in different shapes, strokes in text, neon lights, flowing lights, etc. The core point of stroke animation is that the two display properties of SVG are Stroke-Dasharray and Stroke-Dashoffset. As mentioned above, almost all display properties can be controlled with CSS, so it is recommended to use CSS to develop this animation.
| attribute | Value for | describe | Support. |
|---|---|---|---|
| stroke-dasharray | 1, 3, 4, 4 | Its values are a sequence. You can pass in multiple values that specify the length of the stroke line and the distance between the stroke lines. If you pass in three values, it is similar to stroke-dasharray: 1,2,3. A copy is automatically copied to take effect | <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> <altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan> |
| stroke-dashoffset | 10 | The offset from the starting position of the stroke line segment from the starting point of drawing the graph. Positive or negative values can determine whether to go clockwise or counterclockwise | With the stroke – dasharray consistent |
Imagine a scene where a countdown needs to go from 100 to 0, and the corresponding visual effect is from full stroke to no stroke. Then we initially set the first value of Stroke-Dasharray to 2Ï€r (perimeter) and the second value to also be 2Ï€r (perimeter). So we’re going to get a whole circle.
At this point, if we unwrap the circle we can see something like this
The first is to adjust the first value of stroke-Dasharray from 2Ï€r(perimeter) to 0. The black part of the original expansion is gone, and only the dotted line is empty space.
The second is to adjust the stroke-Dashoffset value from 0 to -2Ï€r (or increase it to 2Ï€r). Compare the first image to the one below
Knowledge point 2: In the actual development, we will encounter some more complex graphics need to do stroke, at this time we can not get how much its perimeter, this time divided into two scenarios. One is that in CSS we can set the second value of Ststrok-Dasharray to a very large number and then adjust the first value as follows:
path {
stroke-dasharray: 0(Adjust to an appropriate value)99999999999999
}
Copy the codeIf we need to dynamically retrieve the perimeter in JS, SVG provides a native API to retrieve the perimeter of the path.
const inPath = document.getElementById("inner-path");
console.log(inPath.getTotalLength());
Copy the code
Since we’re talking about getTotalLength(), let’s also talk about getPointAtLength(). GetPointAtLength, as the name implies, is to get the coordinates of the points based on the distance. That means getting the coordinates of the point at that specified distance, based on the distance from the starting point. The origin of the frame is the starting point of the figure. We might use this API for some directional animations.
3-2-4, the application of trajectory motion animation
Code practice based on SMIL implementation – Trajectory movement
Summary & Explanation:
{/* We enclose the entire aircraft graphic element in g tags */}<g transform="Translate (- 100-35) scale (0.1)">
<path
d="M164.485419 578.709313L196.274694 794.731891 C0.722484 5.53904 8.188147 7.224835 11.078081 2.408278l75.860772-121.377234 740.063969 363.409219 L164.485419 578.709313 z"
fill="#F68206"
></path>
<path
d="M2.167451 440.233302 L159.668861 132.214487 857.828787-260.334901zM289.475071 679.375353 L191.217309 153.407337 542.344309-518.743179 - z"
fill="#FF9900"
></path>
<path
d="M204.222013 l125.23048 800.030103-80.677328-48.888053-39.014111-76.342427-118.4873"
fill="#D3650B"
></path>{/* then here, we use the animateMotion to do the trajectory motion */}<animateMotion
path="M 0 450 Q 150 50 250 50 Q 350 0 400 50 Q 500 50 450 200 C 300 350 250 200 500 50 C 600 50 750 200 650 250 A 50 50 0 1 1 800 50. ""
begin="0s"
rotate="auto"
dur="20s"
repeatCount="indefinite"
/>
</g>
Copy the codeHere we use the
<defs>
<path id="theMotionPath" d="xxx" />
</defs>
<animateMotion>
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
Copy the codeIn actual production, it is recommended to use SMIL to achieve the demand of such trajectory movement. Of course, CSS also has an implementation plan “Use CSS offset path to make elements move along an irregular path”. But CSS compatibility really dare not flatter, dissuade a wave.
Four, write at the end
1. It is recommended to use CSS animations for transitions or simple animations without distortion. Especially with hardware acceleration. CSS does not need to load other resources (usually three-party libraries), and small changes to hover can make for better interactions. CSS is especially recommended when you don’t need 3D, physical motion, or a lot of stacked animation. In addition, the ease of debugging CSS is also a big advantage.
For long animations, development can be very complex and requires a lot of debugging, and CSS can be difficult to adjust the time scale, especially when you need to manipulate small frames. I think SMIL is more suitable for ordered, complex scenes with stacked animations.
3, for deformation animation, it is recommended to use SMIL or third party libraries. Recommended more excellent three – party library has the following several.
| The library | describe |
|---|---|
| GSAP | GreenSock Animation Platform is the full name of the GreenSock Animation Platform. GSAP has two versions, one is flash version, the other is javascript version, which is what we call GSAP JS. GSAP is fast. GSAP specifically optimizes animation performance to achieve the same high performance animation effects as CSS; Lightweight and modular; |
| Snap.svg,SVG.js,Velocity.js | These three libraries will be compared by developers all the time. Basically, if you use jQuery, you will use these three libraries, which means it will be friendly. Snap. SVG is more likely to support modern browsers, so it will be smaller. Compared to snap.svg, svg.js is written more clearly, is a better experience to use, and claims to provide close to full coverage of the SVG specification. Snap. SVG is more of a swordsman style that is smart to write but hard to read, while Velocity is powerful, easy to use, high performance, and feature-rich |
| anime.js | Although the functions of Anime. Js are not as powerful as GASP, the volume is optimistic. The gZIP compression is only about 9KB, which is enough to meet the daily needs of development |
| D3 | Data-driven Documents, as the name suggests, are better suited for creating data-visualized graphical scenarios |
4, how to use SMIL for hardware acceleration, use substitution, and set the x, y, z values (z is 0). Similar to CSS, this moves the element into its own layer so that it is not redrawn when it moves.
The resources
- SVG Animation Bar (SMIL)
- SVG tutorial
- Search for SVG properties supported by CSS
- And some of the articles mentioned in the article
This article is published by netease Cloud Music front end team. Any unauthorized reprint of the article is prohibited. We hire front end, iOS, Android all the year around. If you’re ready for a career change and you love cloud music, join us GRP. Music-fe (at) Corp.netease.com!