超级浣熊
Cocos引擎10年老用户，精通Cocos全家桶
2011年开始写中日英多语言博客
supersuraccoon-cocos2d.comCocos 独立游戏上架AppStore
Cocos 电子书上架iBookStore
持续用 cocos 引擎编写各种有趣的东西！
今天给大家介绍我的一个项目：SVGComponent
开始之前，先上一段视频，让我们对SVGComponent有个感性的认识
01 SVG是什么？
SVG 全称是 Scalable Vector Graphics 中文是 可缩放的矢量图形, 它是用XML 来描述二维图形的语言。
SVG 图形对象可被组化、样式化、变形和重组，包括图像嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。
SVG 的矢量特性可以让移动设备清楚地浏览 SVG 图像信息，在放大后不会出现模糊的情况。
02 邂逅SVG
大约在7年前，我第一次接触 svg，出于好奇，就用 cocos2d-html5 v2.x 写了一个 SVG 解析渲染 的演示程序。当然其中的实现功能非常的有限而且问题也很多，比如只支持画轮廓，无法填充图形，大部分的命令没有解析。
然后在5年前，用 cocos2d-html" title=js>js v3.9把程序重写了一下，把渲染方式升级到了 v3 的风格然后加入了颜色填充的功能。
最近在论坛搜索一些关于 cc.Graphics 帖子的时候，偶然看到有一些朋友提到了 svg 这个东西在 creator 中的使用可能性。
于是就有了我的这个，大幅度升级的 creator 版的 svg 扩展。
用一句话来描述一下SVGComponent个组件的作用:
读取 svg 文件，解析，使用 creator 的方式 进行渲染。
03 测试用例
在细说组件的功能之前，先来直接看下演示程序，看下目前这个组件已经 实现了哪些功能 和 能做这些什么，请看下面视频：
-
Tiger：演示了如何通过组件提供的一些内置属性，实现
复杂图像的绘制过程渲染演示。 -
汉字笔画：演示了如何通过组件提供的一些内置属性，实现
汉字书写的过程渲染演示。 -
Yoga：演示了如何通过组件提供的一些内置属性，实现图像的
触摸填色功能演示。 -
path：绘制的图形都是由
svg支持的一个重要标签path所内置的命令组成的。 -
FillRule：组件所支持的
svg内置的填充规则的实际渲染结果，包括了非零填充，奇偶填充。演示的例子包括了自相交多边形，带洞的图形，不同路径走向的图形。 -
Icons：进阶用例，所有图标都来自开源网站
game-icons.net，用于进一步验证解析库的正确性。 -
Toucan：演示了如何通过组件配合 cc.RenderTexture && FBO
实现cc.Graphics的纹理化并对其使用shader` 特效的演示。
04 一坑到底
看上面描述，你可能会觉得，这不是什么特别复杂的事情，但是如果有尝试做过相同事情的朋友，可能才会了解，这里面的坑 实在是太多了。
这些坑都是来自 svg 一方的，还有些问题是来自 creator 内部的。
cc.Graphics 是 creator 里的绘图组件。但是其提供的绘图接口还是非常有限的。此外，cc.Graphics 在对一些曲线绘制的图形填充的时候，也有 bug。
取决于 svg 对象的复杂程度，cc.Graphics 可能会被很重度的使用，但是这在 native 平台会有报错出现。不过这个问题就在最近，已经被官方解决了。
上面列出的是一些主要的坑，还有无数的小坑，无数的细节调试，这里推荐一个很棒的在线 svg 路径调试工具 svg-path-editor ，在调试解析器的时候，有很多细节，都是对着这个编辑器同步单步调试来寻找问题的并解决的。
要解决这些大的问题，而且还要尽量的不修改引擎，同时支持 Web、 Android、 iOS 平台，还是很有挑战性的。
后面我会深入与大家介绍SVG相关基础图形、命令、SVG转JSON工具，也希望得到更多的人反馈和帮助，能利用SVG开发出更多创意作品。
参考资源与工具：
SVG 解析渲染：
https://github.com/supersuraccoon/CocosSVG-HTML5cc.Graphics Native:
https://forum.cocos.org/t/bug-2-2-2-4-3-native-graphics/99409/5SVG 路径调试工具:
https://yqnn.github.io/svg-path-editor/cc.RenderTexture && FBO:
https://store.cocos.com/#/resources/detail/2528
game-icons.net
http://game-icons.net/
