人们常常开玩笑的形容从事SVG(可矢量缩放图)的人,一定是一个“考古学家”并且和SVG一样有趣的人。这个比喻确实比较恰当。 SVG自发明以来确实沉静了一段较长的时间,虽然先前的SVG技术,由于缺乏浏览器厂商的支持和人们对这种技术的理解,曲折发展了一段时间,但是现在它以优秀的兼容性重新复燃,在开源社区拥有了很强的地位,以下是SVG一些优点:
- 数据可视化:SVG允许人们通过真实的数据直观地表达想法,并着重于复杂的思想交流展现
- 设备响应式:世界上需要兼容的仪器、网页视口、视网膜设备有成百上千种,(SVG)有能力通过使用一张矢量缩放图来兼容各种设备,让你的(资源加载列表)变得清爽简单。(SVG)是响应式兼容配置的游戏规则改变者。
- 性能表现:如果我们正确地构建SVG,并减少path路径点和简化图形细节(优化手段),SVG文件大小会十分轻量,且位图完全望其项背。通过正确构建SVG图片,我们可以让我们的网站(资源加载)变得快捷可用。
- 可操作的DOM结构:对于开发者来说,SVG拥有可操作的DOM结构这一点,起初可能并不起眼,但实际上对于开发却是出乎意料的方便。拥有一体化DOM结构的SVG,意味着你的代码可以为屏幕阅读器提供更多的信息,并且让你的图形代码看起来非常容易令人理解。你还可以正确的找到图形片段的内部结点,对这些小的DOM片段同时进行动画和操作。在这本书内,你会发现这个特性是真的强。它能够允许你远离那些能将人逼疯的:有关
z-index
和position
相关操作设置。
我们可以流畅自由地使用SVG制作动画,目前我们仅仅触及到了这项技术的潜力的表面,作为一名开发者,当你看到响应式媒体动画组件灵活的跳跃和snap动画, 你一定会极其兴奋的。你可以创造写实的动作和格式化的动作来完成你商标动画制作。 SVG还有令人称奇的一点就是可以使用数学方法进行绘制图案。
本书由始道终都贯穿着SVG的相关知识。 谈到SVG,这就意味,我们将讨论SVG DOM的基础相关知识,(因为它的结构简单)这样工作起来就让人觉得代码浅显易懂。我们还将讨论SVG性能方面的设计,我们将学会如何精易SVG文件体积和结构。借此避免网站性能由于SVG的原因大打折扣。必不可少的,我们还将讨论如何通过css操控SVG进行动画,学习一些相关理论,然后学习使用Javascript深入SVG动画,来完成优美且有趣的各种动画效果。如果你想了解如何设计SVG(编码+优化),那么你将会在此书的前半部分学到很多。而此书的后半部分将更加适合javascript开发者学习如何使用js控制SVG动画,SVG这一技术将设计和开发的世界交融起来,所以本书两个方面都会涉及。我建议读者,首先通读第一章节,因为它是理解后续章节的基础。
使用SVG制作动画,是我的互联网从业生涯中,最具激动人心的一部分了:它激发出了我关于代码性能、代码易用性、设计美感以及创造性的潜力,(学习SVG动画的过程中)让我学会避免了一些丑陋的代码以及图片黑科技(hack技术),让我在需要时候能够对页面进行响应式设计。这一技术还能够让我创作出令人惊叹的数据可视化作品,来帮助我更加方便的(通过图表)与用户交流,讲述原理,或者只是做一点用户交互体验的优化精炼。
虽然我拥有超过10年以上的前端开发经验。但是学习SVG动画技术,激励起了我的兴趣,打破了我的墨守成规。我希望你也能够喜欢这本书,并且为互联网创造出许多动态SVG作品。这是一个令人激动的时代,因为,SVG的潜力还未完全激发出来。目前,只有一小部分的SVG功能运用到web设计和开发中。我期待能够看到读者你在读完此书之后,借助新学到的知识所做的作品。让我们一起推动互联网再一次的革新浪潮。
在此书内,我们遵循一些印刷样式上的排版约定:
- 斜体:代指新的条款,url, email地址,文件名,以及文件扩展名。
- 等宽字体:包括编程段落,以及其他段落引用程序中的元素,例如函数变量和函数名,数据库名,数据类型,环境变量,声明以及关键词。
- 等宽加粗字体:包括重要知识点以及其他需要用户逐字逐句理解的重要内容。
- 等宽加斜字体:包括一些需要用户提供值得变量或者通过上下文决定的变量
如果你对注明案例代码的归属,我们对此表示感激但不强制要求。归属格式通常包括 书题,作者,出版商和ISBN号。范例如下:“SVG Animations by Sarah Drasner (O’Reilly). Copyright 2017 Sarah Drasner 978-1-491-93970-3.”
如果你感觉不正当的使用了本书的代码案例或者是超出了上述所授予的版权,请随时于联系我们,我们的电子邮箱是:[email protected]。
Safari(原Safari网上书店)是一家会员制的服务于企业、政府、教育工作者以及个人的学习参考平台。
只要你成为了O’Reilly的会员,那么就有权浏览由250以上的家出版社,包括:O’Reilly Media、Harvard Business Review、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Adobe、Focal Press、Cisco Press, John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、还有 Course Technology以及其他出版社出版的上千本图书,学习视频,学习计划,互动教程。
如果想获得更多信息,请访问这个网站 http://oreilly.com/safari。
若有关于本书的任何评论或问题,请和出版公司联系:
- 美国:O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472
- 电话:800-998-9938 (in the United States or Canada)、707-829-0515 (international or local)、707-829-0104 (fax)
本书有一个配套的网站,里面列举了本书的勘误表、实例代码以及其他相关信息。下面是网站的地址:http://oreil.ly/2nouksg。
如果有关于本书的评论和技术问题,也可以通过此邮件进行沟通:[email protected]。
如果想了解更多关于我们数据,课程,会议,新闻,可以访问我们的网站 http://www.oreilly.com。
我们的Facebook是:http://facebook.com/oreilly。
我们的Twitter是:http://twitter.com/oreillymedia。
我们的YouTube是:http://www.youtube.com/oreillymedia。
首先我想感谢 Meg Foley , 她是一名有着惊人地工作能力的编辑。她对我的指导和体贴关心都是十分值得赞赏的。可以说没有她,就没有这本书。
其次,我想感谢那些技术校审员:Amelia Bellamy-Royds, Dudley Storey 和 Val Head,他们通过几番争论后最终帮助我确定了此书的脉络结构!感谢你们的辛苦付出。再来我还想感谢GreenSock 组织的Jack Doyle和Carl Schooff,以及React-Motion的Cheng Lou还有mo.js 的作者Oleg Solomka。感谢他们为本书校审了本书关于他们资源库的链接地址以及为互联网创造了如此令人赞叹的动画工具。感谢SVG发明者Chris Lilley,他是一名值得尊敬的先驱!感谢他为本书做出了如此精彩的序,同时,在技术文章的写作方面亦是我的良师益友。还教会了我一些css技巧和其他知识。
最后,我还想着重感谢 Dizzy Smith, Meagan French 和 Donna Ferriero,他们在本书写作期间长期的支持。 特别是当我好高骛远的那段日子,感谢你们在这段艰难的时期对我的照顾以及陪我走个了一个又一个的里程。你们是最棒的!