我们知道canvas画布可以很方便的js原生支持转为图片格式并下载，但是svg矢量图形则并没有这方面原生的支持。 研究过HighChart的svg图形的图片下载机制，其实现原理大体是浏览器端收集SVG代码信息，并发送到到服务器端，由后端程序转换成图片格式后，以流的形式反射给浏览…

文章描述了一种无须后端参与，前端即可实现的 SVG 导出 PNG 等格式图片的方案。

SVG 的应用十分广泛，得益于 SVG 强大的各种特性。 利用 URL.createObjectURL(svg) 取出 URL。 由于微信编辑器不允许嵌入 <style><script><a> 标签，利用SVG SMIL 可进行微信公众号极具创意的图文排版设计，包括动画与交互。…

介绍 Snap.svg 以及其制作动画的几种方式、兼容性和使用建议

一些提高 SVG 开发效率的工具

在客户端内嵌h5的动画场景，非常适合SVGA。SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。svga是全新的动画格式，提供高性能动画播放体验

最近的学习中，对于svg实现的文字霓虹灯动画感到很是有趣，而且实现起来也相对着来说比较容易，效果也不错，比如下图。 需要实现以上的效果，我们需要着重了解两个svg的属性stroke-dasharray与stroke-dashoffset。 官方解释为It's a list of…

使用圆环加载效果可以用可以采用css3+js的方式。这种方式首先我们得有一个圆的图片。。核心是采用显示隐藏的方式，并且依靠层级的方式来控制圆的加载过程。 今天来看看svg实现圆环过渡的过程和原理。 SVG 代码都放在顶层标签 <svg>之中。 当然svg有很多基础知识,你可以点…

偶然在svgTrick上看到了一个效果，模仿了一下。作者原先也是受到dribble上的一个动效启发，这个效果与svg简直是天作之合。 最后模拟的效果如下，gif有点卡顿，戳戳这里查看网页效果。 我们先看着动效分析一下，主要可以将动画分成五部分。 这个效果的完成很简单。只需要在画…