html5svg在线编辑器,SVG to Canvas在线转换工具

本文介绍了SVG转Canvas的解决方案,包括canvg.js的局限性,以及一个名为SVG2Canvas的在线工具,该工具可以将SVG转换为Canvas并生成JavaScript代码。SVG2Canvas通过重写HTMLCanvasElement方法来实现转换,支持Gradient和Pattern等特性,提供友好的用户界面供用户使用。
摘要由CSDN通过智能技术生成

https://github.com/samsha/svg2canvas

58fcdbcec4cfcdbecf13437c1793995e.png

canvg.js

是的确实有人在做这样的事,canvg.js 就是一个将SVG转换成Canvas的工具库,甚至有些SVG的动画效果也能得到实现,但是canvg.js存在很多问题:

不可避免的SVG兼容问题

SVG是一种很复杂的矢量图形语言,完全转换到Canvas相当于写一个独立的SVG查看器,即使是Adobe的SVG Viewer也会存在兼容问题,更何况一个小小的js工具库

canvg.js无法生成Canvas绘制代码

canvg.js确实能将SVG绘制到Canvas上,但是无法生成绘制代码,就意味着需要引入这个类库,且动态解析SVG,这里存在额外的性能开销,加上canvg.js本身并不完善,代码封装性还是功能上都存在缺陷,在生产环境中引入会带来问题

professorcloud

网上搜索svg to canvas,可以找到这个:http://www.professorcloud.com/svg-to-canvas/可以将SVG转换成Canvas,并输出javascript代码,符合制作矢量图标的需要,Qunee早期的内置icon都是这样制作的,但是这个工具并不完善,不支持渐变,不支持纹理,大部分的SVG图标无法转换,于是我们考虑自己写一个在线工

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值