背景
最近公司的业务开发中经常需要使用到SVG,加之我个人对图形方向比较感兴趣,所以想借此机会好好的学习一下SVG技术,但在网上搜了一圈后发现很多都是碎片化的讲解SVG中的个别知识点,都不够全面,我个人没发现有比较系统性和全面的介绍SVG技术的文章。本着没有我们就自己创造一个的初衷,我试着尝试将SVG技术系统全面的整理出来分享给大家。
在整理之初我在思考我应该以什么样的方式进行输出,如果使用文章的方式,那又是一篇万字长文。我个人是不太喜欢动不动就万字的长文,在碎片化时代,人的注意力是很难长时间集中的,内容过长只会导致阅读体验很差,使人产生阅读疲劳,最终也只是走马观花看了一番热闹。
同时我也不希望去分享SVG细致末梢的细节,因为里面的东西实在是太多太多,很容易就陷入到无尽的知识点中去,我希望知识晶体能够结构化、系统化、分门别类、方便查阅、便于记忆的。因此为了这个目标,我下班后花了70多个小时,查阅大量资料,找了大量示例图片,大量示例代码来完成我对SVG技术的入门,对照社区大量同质化的文章,我抽丝剥茧找出最优资源进行归纳总结,将原本一个个单一知识点变成一颗SVG知识树。
当然因个人认知能力有限,从全局观来看,我整理的SVG知识树也只是冰山一角,肯定有不足和遗漏之处,非常欢迎社区的各位大佬点评指出,非常感谢! 我会根据各位大佬们的反馈和自己更深入的学习,长期持续不断的完善知识树,因此我也更推荐大家收藏思维导图的地址,方便后期学习和使用。
为什么要学?学了能干什么?
我个人在学习一项新的技术时,都喜欢问自己这么几个问题,我为什么要学这个技术?学了这个技术我能干些什么?他能给我带来哪些收益?综合权衡将自己最宝贵的时间和精力投入在最有价值的事情上去,现在还应该再加上一个,我学完这个技术我能为社区带来什么有价值的东西?
对于图形方向感兴趣的同学,SVG是一项绕不过去必学的技术,从招聘市场上的招聘要求来看,也基本上成了默认要求。对于其他的同学,大概是日常业务开发中需要经常用这个技术,例如做可视化、或是C端业务、或是B端数据管理等相关业务。
就我的工作经历来看,不少的人对SVG技术其实是一片空白,在很多可以用SVG轻松实现功能的地方,对于不了解的同学都会习惯性的使用图片进行代替,例如:相同形状的不同颜色LOGO、带矢量元素背景的位图展示、一些Loading动画效果、一些图片的简单滤镜效果等等。
如果你学会了SVG技术,就能清晰的知道上述这些类似场景,只需简单使用SVG中的填充属性、Path元素、SMIL动画、SVG Filter技术就能轻松实现,相比简单使用图片代替的方式,使用SVG既能实现相应需求又能给用户带来不错的用户体验,这感觉就像你在江边看到滔滔江水时的“大江东去,浪淘尽,千古风流人物”,而不是“卧槽浪好大”。
内容概览
-> 思维导图点击这里 <-
那么对于【当前文档599条主题 共12409字】的这份SVG知识树,和其他的思维导图有什么区别呢?
首先他有很多的图片,便于理解和记忆
其次他有很多的示例代码,方便学习和拷贝
还有不少在线资源,不少的动图,可以进行扩展提升和趣味性理解
在思维导图链接的右上角有一个大纲的阅读模式,对于思维导图太长不利于阅读时可以切换为该模式
最后
截止发文,该SVG知识树也只是我下班后花了70多个小时的学习积累,并不能作为SVG技术的权威指南,我个人后续打算再投入1.5倍的时间去深入细节,添加更多的示例代码、图示、案例到这颗知识树中,感兴趣的同学欢迎收藏。
如果你觉得思维导图中的内容能帮助到你,欢迎点赞、转发给与我写作鼓励,感谢!🙏🏻