Author of this article: Qian Hongchang (Flash Fire)
1. Why do we use svg
Compare with high-definition png
Continue to compare
The same high-definition texture, the vector diagram is not afraid to zoom in, and the size is small. One point to be explained here is that because SVG saves point, line, and surface information, it has nothing to do with resolution and graphic size, but is only related to the complexity of the image, so the storage space occupied by image files is usually smaller than that of png.
- Optimize SEO and accessibility tools, because SVG images use XML (Extensible Markup Language [English: Extensible Markup Language, abbreviation: XML] mark refers to the information symbol that the computer can understand, through this kind of mark, the computer can process Articles containing various information, etc.) to mark the construction, the browser prints each point and line by drawing them instead of filling some space with predefined pixels. This ensures that SVG images can adapt 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. In the framework of data-driven views such as react and vue, SVG operations are even more comfortable. (The following will share with you some small SVG animation practices in our project)
- At the application level, SVG provides some image editing effects, such as masking and cropping, applying filters, and so on. And SVG is just text, so GZip can be used to effectively compress it.
2. Understand the common elements of SVG and their use
Most tutorials can be found online, here are some points that I think are worth mentioning
2-1. svg tag
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg 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>This is the SVG source file we got from the designer, we broke it apart. First, we removed all the internal code of SVG without looking at it, so it became like this
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg 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>This is the form and some attributes that 99% of SVG will show, including the two viewport attributes of width and height, the viewBox view attribute, and the xmlns attribute. We look at it line by line
The first line: contains the XML declaration, which is actually similar to the DTD declaration of the HTML document. Similar to HTML5 declaration
<!DOCTYPE html>SVG document declaration method (emphasis: generally if SVG is used in HTML, we can not write such document declaration, but if it is a separate SVG file, then it needs to be written, otherwise the browser may not recognize it)
<?xml version="1.0" standalone="no"?> standalone attribute we see is to indicate whether the xml declaration is independent or not. If it is not standalone="no", then an external dtd will be introduced later, as shown in the second line and the third line. version The attribute is used to indicate the version of the SVG document that conforms to the specification. It is only allowed to be used on the root element <svg> . It is purely a description and has no effect on rendering or processing. Although it accepts any number, there are only two valid choices, 1.0 and 1.1.
Fourth line: 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>The xmlns attribute is the XML declaration space of SVG, this part is similar to xmlns="http://www.w3.org/1999/xhtml" in HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">The width & height attributes can be understood as the size of the canvas. That's right, the size of the canvas. for 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>
The current SVG canvas size is 100 * 100 canvas. We draw a stroked circle with a radius of 49 plus 1 unit. It just happened to be full without any problems. What you see is what you get. Then we try to change the width and height. Find
<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>We can see that the blue area is the width and height we set, and the graphic part is still the circle unchanged. So we understand the role of width and height.
The viewBox property, and then we will modify the code to match the viewBox property
<svg style="background:#007fff" xmlns="http://www.w3.org/2000/svg" version="1.1" <!-- viewBox定义--> viewBox="0, 0, 100, 100" width="300" height="300" > <circle cx="50" cy="50" r="49" stroke="black" stroke-width="1" fill="red" /> </svg>
We can see that the size of the blue area remains the same, but our circle has become very large, so large that it fills the entire canvas. Yes, your idea is correct. The so-called viewBox attribute can be understood as the screenshot operation when we chat on WeChat. The four parameters of the viewBox property, the first two represent the starting point of the screenshot, and the latter two represent the end of the screenshot, all of which are based on the fixed point in the upper left corner as the origin. Finally, the screenshot is stretched and placed on the SVG canvas, and it becomes the SVG we saw above. Let's modify 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>So the whole logic is like this
2-2.path tag
In SVG, you can regard path as the most basic drawing element. Because it is the most basic and inseparable, it can evolve various complex drawing effects. So path is the most basic and most complex drawing element.
The basic attributes of path and the meaning it represents
We know 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 complicated command 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>In fact, you don’t need to feel sick at all. I’ll continue to break it up here.
- Those instructions in the d attribute
| instruction | parameter | meaning |
|---|---|---|
| M | x y | Move the pen to point (x,y) |
| L | x y | pen draws a line segment from the current point to point (x, y) |
| H | x | pen draws a horizontal line segment from the current point to point (x, y0), y0 represents the y-axis coordinate of the pen before drawing, that is, the y-axis remains unchanged |
| V | y | pen draws a vertical line segment from the current point to point (x0,y), x0 represents the x-axis coordinate of the pen before drawing, that is, the x-axis remains unchanged |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | pen draws an arc from the current point to point (x, y) |
| C | x1 y1, x2 y2, x y | The pen draws a cubic Bézier curve from the current point to the point (x, y) |
| S | x2 y2, x y | Special version of cubic Bézier curve (omitting the first control point) |
| Q | x1 y1, x y | Draw quadratic Bezier curve to point (x,y) |
| T | x y | Special version of quadratic Bézier curve (control points omitted) |
| Z | no parameters | draw a closed figure, if the d attribute does not specify the Z command, draw a line segment instead of a closed figure |
The above are all the instructions in the path, among which the bolded parts are common basic instructions, which are relatively easy to understand. Each instruction has a corresponding lowercase instruction. For example, M 10,10 has corresponding m 10,10. The uppercase represents the absolute position. The origin of the upper left corner of the SVG canvas. Lowercase represents the relative position. The is based on the position of the current pen .
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>
Draw a picture to help understand
According to the steps in the figure, we can draw two circles that are satisfied, so we can see that there are three zeros in the A instruction, we did not explain it, reviewing the A instruction, and combining this picture, we can better understand
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- Bezier curve
Regarding the Bezier curve, this article by Mr. Zhang has made it very clear, very easy to understand Deep understanding of SVG path , recommended to students who want to know more about svg path
2-3. Basic graphics
The basic graphics is relatively easy to understand. Let’s just summarize it in a table without going into too much detail.
| Graphics | label | template | meaning |
|---|---|---|---|
| rectangle | < rect > | <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> | x: the abscissa of the starting point, y: the ordinate of the starting point, rx: the radius of the chamfer in the x-axis direction, ry: the radius of the chamfer in the x-axis direction, width: width, height: height |
| Round shape | < circle > | <circle cx="100" cy="100" r="50" fill="#fff"></circle> | cx: abscissa of circle center, cy: ordinate of circle center, r: radius |
| oval | < ellipse > | <ellipse cx="75" cy="75" rx="20" ry="5"/> | cx: ellipse center abscissa, cy: ellipse center ordinate, rx: ellipse x-axis direction radius, ry: ellipse y-axis direction radius |
| straight line | < line > | <line x1="10" x2="50" y1="110" y2="150"/> | x1, y1: start point, x2, y2: end point |
| Polyline | < 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 a space to form a coordinate point, separated by a comma to form a coordinate set. Connected into a broken 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"/> | Similar to a polyline, the difference is that the last point will automatically close the first point to form a closed loop. |
2-4.symbol tag
The symbol tag is the core technical point of the icon management platform of our live broadcast team. Its function is equivalent to a component, which is placed in our toolbox, like the following:
<svg class="svg-sprite">[工具箱]
<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 5 0 110 10A5 5 0 015 0zm0 1.5a.5.5 0 00-.5.5v3.02l.008.088a.5.5 0 00.238.343L7.02 6.794l.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>One copy can be quoted unlimitedly. When it is in the toolbox, we can't see it (the page won't render it), only when we use the <use> tag to reference it, we can see it on the page:
<use xlink:href="#icon-time"></use>
We use <symbol> + <use> to realize the svg sprite map, does it feel very easy?
Some students may have questions. The symbol tag and the g tag, when placed in defs, seem to define a reusable module, so what is the difference between the two? 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 directly adjust to the appropriate application (print) size when taking it.
Three, 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 properties and application skills of SVG animation.
1. SMIL driver
2. JavaScript driven
3. CSS driver
| technology | description | Remarks |
|---|---|---|
| SMIL | Very powerful and purely labelled animation | Although SMIL is deprecated after Chrome 45, it still supports it, and the support of major browsers is quite good. |
| CSS | CSS can only achieve simple animation | The offset-path compatibility is very poor. CSS animation is not suitable for highly interactive animation |
| JavaScript | Complex animations need to use JS, including some SVG animation libraries in the world, which are also implemented by JS | - |
SVG is an XML-based vector graphics description language, which can be approximately understood as HTML, so it can interact with JS and CSS. Especially CSS, we can use CSS3 to animate SVG. But the thing to remember is that we can use CSS to style development only when the HTML contains SVG files inline. this article, we will introduce several scenarios that are not easy to implement in usual CSS3 + HTML, but can be quickly and easily implemented using SVG
3-2. SVG animation practice
1. Change of straight line
2, the path path realizes the smooth change of graphics
3. Stroke animation
4. Specified trajectory movement
3-2-1, straight line change
The picture below is a GIF icon, the size is about 156KB, after compression.
If we use SVG to achieve it. What should I do. We are divided into the following two ways, the compatibility of the pro-test is OK
CSS+SVG implementation code practice
Code practice based on SMIL implementation
summary & description :
knowledge point 1:
There are many attributes in SVG that we can use CSS to describe. Based on the CSS animation Three Musketeers (animation, transform, transition). We control some properties to achieve the animation effect we want. The following two points are worth noting:
- transform : There are two uses for transform, one is the transform attribute written in the SVG tag, and the other is the transform written in the CSS file. They have essential differences.
<rect transform="rotate(45deg) ..." ... />
rect {
transform: rotate(45deg)
}
/** 行内的 transform 属性，他的执行基点是在我们 svg 元素的左上角也就是 svg 的坐标原点。**/
/** 而 CSS 的 transform 原点则在元素本身的中心点。**/CSS can describe properties : Many articles tell us that CSS can control SVG to do animation, but in the actual development process, we will want to know more about which properties we can control with CSS. Here are some common properties and you can rest assured Attributes used
| CSS Controllable Property Name|Achievable Scene
| --- | --- |
| In theory, all display attributes can be controlled by CSS, including: stroke-width, color, fill, etc. SVG display attributes |Most of the display styles change dynamically
|x|We know that the rectangle has x and y attributes, which means the starting point, controlling x, we can dynamically control the X-axis displacement of the rectangle
|y|Control y, we can dynamically control the Y-axis displacement of the rectangle
|cx|<circle cx="100" cy="100" r="50" fill="#fff" />This is a circle, control cx can control the X-axis displacement of the circle (or ellipse)|
|cy|Control cy can control the Y-axis displacement of a circle (or ellipse)
|r|r is the radius of the circle, controlling r can control the size of the circle
|rx|rx is the X-axis radius of the ellipse, control 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
The d attribute of the |d|path tag controls the path information of d, and can control the change of graphics ( d attribute does not support CSS description on safari. We will explain detail below)|
|PS: If you are not sure whether this property can be controlled by CSS in your daily development, here is a query link for everyone | does not support CSS-controlled SVG related properties
knowledge point 2: can use SMIL to animate SVG, for example, the same animation effect, the following code can also be achieved 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>
);
}Then
What is SVG's SMIL it ?
这里不想再对其做大篇幅的赘述，因为网上有很多文章都已经说得比较详细了[SMIL 动画指栏](https://css-tricks.com/guide-svg-animations-smil/)、[SVG SMIL animation 动画详解](https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/)。 本文更想和大家交流的是在SMIL驱动和CSS驱动如何做选择的问题。 Although it is said that as early as Chrome 45, chrome has officially announced that it will abandon SMIL, but up to the present position, the support of major browser manufacturers is like this
Chrom announced the abandonment of SMIL because it wants to support the development of CSS Animation and Web Animation, so we can understand that it is currently in a transitional state. There are indeed some animation effects that CSS cannot support temporarily or are very poorly supported. SMIL can easily carry out. However, based on the general trend of web animation technology development, it is still recommended that the priority of our SVG animation implementation scheme is CSS-driven -> JS-driven (we can use some frameworks, and we will recommend some useful frameworks at the end of the article) -> SMIL-driven
3-2-2, path change (graphics smooth change)
Code practice logo changes implemented by CSS+SVG
Code practice logo changes based on SMIL implementation
CSS+SVG implementation code practice play pause
based on SMIL implementation code practice play pause
summary & description :
knowledge point 1:
By <path/> d attribute of 060d2ff2ef311d, we can achieve a lot of animation effects. There are currently two ways to control the d attribute, one is through CSS control, and the other is through SMIL control, but currently safari does not support . CSS to describe the d attribute of the <path> Therefore, it is not recommended to use CSS to achieve this smooth shape deformation effect. It is more recommended to use SMIL or third-party libraries to achieve
Based on CSS:
path {
transition: ease all 0.3s; // 就像对dom一样的对待svg
&.play { //这里是播放状态下的<path />路径
d: 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 { //这里是播放状态下的<path />路径
d: 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"
);
}
}Based on SMIL (that is, through <animate> achieve <path> d attributes):
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.3s"
begin="indefinite" // 这里设置开始时间为无限以达到不自动播放的效果
fill="freeze"
/>
</path>
</svg>The switching of the above two paths can bring this smooth transition effect.
knowledge point 2:
When we see the changes in graphics, we all need to follow a principle that is the principle of point alignment. What does it mean? We can look at the demo below, from a five-pointed star to a 10-sided polygon (Polygon drawing is not good, sorry...😜). , Are the transition from 10 control points to 10 control points. So the effect is smooth
And the 10 points to 3 points in the figure below do not have this smooth transition effect (of course, many SVG animation frameworks have solved this problem. See the frame recommendation at the end of the article )
3-2-3, the application of stroke animation
CSS+SVG implementation-Star Ring
CSS+SVG implementation code practice-LOGO stroke
code practice based on SMIL implementation-progress ring
Summary & Description :
knowledge point 1:
Similar stroke animations can be used to make many effects, such as various shapes of progress bars, such as text strokes, such as neon lights, water and lights, and other flowing animation effects. The core point of stroke animation is that the two display attributes of SVG are stroke-dasharray and stroke-dashoffset. As we said above, almost all display attributes can be controlled by CSS, so this kind of animation is recommended. CSS to develop.
| Attributes | Value example | description | Support range |
|---|---|---|---|
| stroke-dasharray | 1 3 4 4 | Its value is a sequence, you can pass in multiple values, respectively specify the length of the stroke short line and the stroke line spacing, the multiple values are cycled in turn, if you pass in 3 values, it is similar to stroke-dasharray: 1,2,3 . It will automatically copy a copy and then take effect | <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> <altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan> |
| stroke-dashoffset | 10 | The offset of the starting position of the stroked line segment from the starting point of the drawing. Positive and negative values can decide whether to go clockwise or counterclockwise | Consistent with stroke-dasharray |
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 our initial state sets the first value of stroke-dasharray to 2πr (perimeter), and the second value is also set to 2πr (perimeter). Then we will get a full circle.
At this time, if we expand the circle, we can see such a scene
So there are actually two solutions to achieve dynamic changes in progress
The first is to adjust the first value of stroke-dasharray from 2πr (perimeter) to 0. The black part in the original unfolded image is gone (it can be understood as a dot as shown in the figure below and can’t be seen), and only the dotted line is a blank gap.
The second is to adjust the value of stroke-dashoffset from 0 to -2πr (or increase to 2πr). Compare the first picture to the following picture
knowledge point 2:
In actual development, we will encounter some more complex graphics that need to be stroked. At this time, we can't get the circumference of it. At this time, we can deal with it in two scenarios. One is that in CSS we can set the second value of stroke-dasharray to a very large number, and then adjust the first value such as:
path {
stroke-dasharray: 0(调整到合适的值) 99999999999999
}If we need to dynamically get the perimeter in js, SVG provides a native api to get the perimeter of the path.
const inPath = document.getElementById("inner-path");
console.log(inPath.getTotalLength());ps: Some materials say that this method can only be used for <path /> , but the author personally tested it on safair and chrome, it can basically support all basic graphics and <path /> , but <text /> does not support it, the browser will report not a function.
Now that we talked about getTotalLength() , let's getPointAtLength() . getPointAtLength, as the name suggests, is to get the point coordinates based on the distance. It means to obtain the coordinates of the point corresponding to the specified distance based on the distance to the starting point. The origin of the coordinate system is the starting point of the graph. We may use this api in some pointing animations.
3-2-4, application of trajectory motion animation
Code practice based on SMIL implementation-trajectory movement
summary & description :
{/* 我们将整个飞机图形元件用g标签包起 */}
<g transform="translate(-100, -35) scale(0.1)">
<path
d="M164.485419 578.709313L196.274694 794.731891c0.722484 5.53904 8.188147 7.224835 11.078081 2.408278l75.860772-121.377234 740.063969-363.409219L164.485419 578.709313z"
fill="#F68206"
></path>
<path
d="M2.167451 440.233302l159.668861 132.214487 857.828787-260.334901zM289.475071 679.375353l191.217309 153.407337 542.344309-518.743179z"
fill="#FF9900"
></path>
<path
d="M204.222013 800.030103l125.23048-80.677328-48.888053-39.014111-76.342427 118.4873"
fill="#D3650B"
></path>
{/* 然后在这里，我们利用animateMotion，去做这个轨迹运动 */}
<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><animateMotion /> in SMIL, the path attribute in animateMotion, we can also use it like this
<defs>
<path id="theMotionPath" d="xxx" />
</defs>
<animateMotion>
<mpath xlink:href="#theMotionPath"/>
</animateMotion>In actual production, it is recommended to use SMIL to achieve our trajectory movement requirements. Of course, CSS also has an implementation plan "Using CSS offset-path to move elements along an irregular path" . However, the compatibility of CSS is really not flattering.
Four, write at the end
1 . It is recommended to use CSS animations for transitions without distortion or simple animations. Especially when hardware acceleration. CSS does not need to load other resources (usually refers to the third party library), and small changes when hovering can bring better effects for interaction. Especially when you don't need 3d, physical sense, or a lot of stacking animation effects, it is recommended to use CSS. In addition, the ease of debugging of CSS is also a great advantage.
2 . For longer animations, the development will become very complicated and require effort to debug, while CSS adjustment of the time scale is very difficult, especially when you need to manipulate some subtle frames, I personally think SMIL is more suitable. Sequence, complex scenes of stacked animation groups.
3 . For deformed animation, it is recommended to use SMIL or a third-party library. The recommended three-party libraries are as follows.
| Library name | Description |
| --- | --- |
| GSAP | The full name is GreenSock Animation Platform. When flash was popular in the past, GSAP was a big hit. There are two versions of GSAP, one is the flash version and the other is the javascript version, which is what we call GSAP js. GSAP is fast. GSAP specially optimizes the animation performance to achieve the same high-performance animation effect as css; lightweight and modular; |
| Snap.svg 、 SVG.js 、 Velocity.js Friendly, Snap.svg prefers to support modern browsers, so its size will be smaller. Look at SVG.js compared to Snap.svg. SVG.js is written more clearly, has a better experience when used, and claims to provide nearly complete SVG specification coverage. The style of Snap.svg is more like a knight, it will be very smart to write but not easy to read. Velocity is also very powerful, easy to use, high performance, and rich in features|
| anime.js | Although anime.js is not as powerful as GASP, its size is very optimistic. After gzip compression is only about 9kb, it is enough to meet the daily needs of development|
| D3 | Data-Driven Documents, as the name suggests, is more suitable for creating data visualization graphic scenes to use |
4 , how to use SMIL for hardware acceleration, use <animateTransform> instead of <animate> , and set the x, y, z values (z is 0). The principle is similar to CSS, which moves the element to its own layer so that it will not be redrawn when it moves.
Reference
- SVG animation finger bar (SMIL)
- SVG tutorial
- CSS supported SVG attributes search
- And some articles mentioned in the article
This article was published from , the big front-end team of NetEase Cloud Music. Any unauthorized reprinting of the article is prohibited. We recruit front-end, iOS, and Android all year round. If you are ready to change jobs and you happen to like cloud music, then join us at grp.music-fe(at)corp.netease.com!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。