background
Recently, SVG is often used in the business development of the company. Besides, I am interested in graphics, so I want to take this opportunity to learn SVG technology. However, after searching online, I find that many of them are fragmented and not comprehensive enough to explain individual knowledge points in SVG. I personally have not found a systematic and comprehensive introduction to SVG technology. With the intention of creating one without us, I have tried to put together a comprehensive overview of THE SVG technical system to share with you.
At the beginning of finishing, I was thinking about what way I should output. If I use the way of article, it will be another swastika. Personally, I don’t like long articles with ten thousand characters at every turn. In the fragmented era, it is difficult for people to concentrate for a long time. If the content is too long, it will only lead to poor reading experience and make people tired of reading.
At the same time, I don’t want to share the detailed details of SVG, because there are so many things in SVG that it is easy to get bogged down in endless points of knowledge. I want the knowledge crystal to be structured, systematic, categorized, easy to refer to, and easy to remember. So to this end, I spent more than 70 hours after work, access to a large number of data, looking for a large number of sample images, a large number of sample code to finish my introduction of SVG technology, controlled community many articles, homogeneity paper summarizes the cobwebs I find out the optimal resources, will otherwise one single knowledge into a SVG knowledge tree.
Of course, due to my limited cognitive ability, from an overall point of view, the SVG knowledge tree I sorted out is just the tip of the iceberg, and there are certainly deficiencies and omisations. We welcome comments and suggestions from the community, thank you very much! I will continue to improve the knowledge tree in the long term based on your feedback and my own in-depth learning. Therefore, I also recommend you to save the address of mind map for later learning and use.
Why learn? What can you do with learning?
When I’m learning a new technology, I like to ask myself these questions: Why am I learning this technology? What can I do with this technology? What does he bring to my table? Overall weigh their most valuable time and energy to invest in the most valuable things, now should also be added, AFTER I learn this technology I can bring value to the community?
For students interested in graphics direction, SVG is a must-learn technology, and it has basically become the default requirement in the recruitment market. For other students, this technology may be often used in daily business development, such as visualization, C-side business, or B-side data management and other related businesses.
According to my work experience, many people are blank in SVG technology. In many places where SVG can be easily implemented, students who are not familiar with it will habitually use pictures instead, for example: Different color logos with the same shape, bitmap display with vector element background, some Loading animations, simple filters for some images, etc.
If you have learned SVG technology, you can clearly know the above scenarios. It is easy to use SVG’s fill attribute, Path element, SMIL animation and SVG Filter technology to achieve the corresponding requirements and bring a good user experience compared to simply using images instead. It’s like when you see the river at the edge of the river, “The big river goes east, the waves are gone, the gallant men of the past”, instead of “My God, the waves are big”.
An overview of the content
So what is the difference between this SVG knowledge tree and other mind maps?
First, he has a lot of pictures, easy to understand and remember
Secondly, he has a lot of sample code, easy to learn and copy
There are also many online resources, many GIFs for expansion and interesting understanding
There is an outline reading mode in the upper right corner of the mind map link. You can switch to this mode if the mind map is too long for reading
The last
Until now, the SVG knowledge tree is only accumulated after MORE than 70 hours of study after work, and cannot be regarded as the authoritative guide of SVG technology. I plan to invest 1.5 times more time to go into details and add more sample codes, diagrams and cases to this knowledge tree. If you are interested, you are welcome to collect it.
If you think the content in the mind map can help you, please like it and forward it to encourage me to write. Thank you! 🙏 🏻