Cars on pure SVG
Recently, SVG-animation is a great inspiration for me. With her help, you can make impressive things from simple elements. For example, today I finished making a demo about cars and happily wrote about it to my blog .
I would not like to break the habr rules, so I will write a few words about the process. The SVG specification has a section on animation , which coolly describes how clients (for example, browsers) should perform animation. In theory, it turns out very beautiful, but until you try to do something with your own hands - you will not understand.
Update:
Direct links to cars rally , racing , acceleration and deceleration , parking , car with headlights .
For practice, I decided to take a little car from a clipboard and play with it. It is easy to say - one image weighs about 24Kb on average. It turns out that the pictures are drawn in vector editors without special settings. As a result, it turns out that the simple contour (element of the path) of the car consists of obviously redundant sheets of coordinates. By default, Inkscape makes the coordinates relative and as a result, the set of numbers becomes negative. In addition, the number of characters after the point can reach 4-5.
Conclusion: if you don’t be lazy, you can save about 5-7Kb from 24Kb by properly optimizing the image.
')
Someone will say that saving on matches is not interesting. If I object, reducing the number of points in the path element and reducing the number of elements in the resulting DOM tree can make life easier for the browser and relieve the user's computer.
After receiving the optimized SVG-car, I noticed that the contour in Firefox \ Opera was smooth, and in Chromium it was all jagged. If experts tell what is the matter, I will be grateful.
After creating the animations themselves in the process of checking their work in different browsers, I discovered the following:
1. Firefox loads the processor much more than Opera and Chromium do.
2. Animation with splines without any problems earned in Opera, and in Firefox and Chromium behaves quite capriciously and in my case it was not even possible to find a working combination for both browsers.
If anyone has an example of uneven animation that works in all browsers - I will say thanks for the link.
I would not like to break the habr rules, so I will write a few words about the process. The SVG specification has a section on animation , which coolly describes how clients (for example, browsers) should perform animation. In theory, it turns out very beautiful, but until you try to do something with your own hands - you will not understand.
Update:
Direct links to cars rally , racing , acceleration and deceleration , parking , car with headlights .
For practice, I decided to take a little car from a clipboard and play with it. It is easy to say - one image weighs about 24Kb on average. It turns out that the pictures are drawn in vector editors without special settings. As a result, it turns out that the simple contour (element of the path) of the car consists of obviously redundant sheets of coordinates. By default, Inkscape makes the coordinates relative and as a result, the set of numbers becomes negative. In addition, the number of characters after the point can reach 4-5.
Conclusion: if you don’t be lazy, you can save about 5-7Kb from 24Kb by properly optimizing the image.
')
Someone will say that saving on matches is not interesting. If I object, reducing the number of points in the path element and reducing the number of elements in the resulting DOM tree can make life easier for the browser and relieve the user's computer.
After receiving the optimized SVG-car, I noticed that the contour in Firefox \ Opera was smooth, and in Chromium it was all jagged. If experts tell what is the matter, I will be grateful.
After creating the animations themselves in the process of checking their work in different browsers, I discovered the following:
1. Firefox loads the processor much more than Opera and Chromium do.
2. Animation with splines without any problems earned in Opera, and in Firefox and Chromium behaves quite capriciously and in my case it was not even possible to find a working combination for both browsers.
If anyone has an example of uneven animation that works in all browsers - I will say thanks for the link.
Source: https://habr.com/ru/post/142953/
All Articles