Tagged

svg

A collection of 3 posts

svg

不要把 svg 转成 base64

不是什么新知识,一个小技巧而已。 今天遇到一个项目中使用纯色图标的问题,用字体麻烦用图片low,所以就想直接用svg,毕竟只有一两个图标。 第一想法是用 DataURI,然后想到了之前 CSS-tricks 的文章,翻了下做下汇总: 不建议把 svg 转 base64 来用 base64 本身浏览器解码也会消耗一定的资源 svg 转 base64 后反而会变大 解决方案: 压缩 svg 文件,使用 SVGO 或者 SVGOMG 使用 DataURI 而不用 base64 ,DataURI 的用法是 data:[<mediatype>][;base64],<data> base64 只是声明 data 使用 base64

canvas

绘制数据图表的又一利器:C3.js

很多人是数据控,其中又有很多人是图标控,看到一个个设计精美的图标在网页上腾挪移动不知戳到了多少人的高潮点。今天,我们就来总结几个好用的Chart libraries并隆重推荐C3.js(如果你已经想到D3的话,说明你懂的,么么哒)。对了,很多特殊目的的库很多(例如专门做Sankey,专门做GeoInfo的),但今天我们主要讲的C3则覆盖大多数charts的库。 这里是我使用过的几个,而今天会突出讲D3 & C3: D3.js / C3.js Chart.js Google Chart Tools HighChart NVD3 D3.js D3.js可以说是数据可视化做的最完整最复杂而展示效果也最引人入胜的一个库,诸多的研究机构、数据机构及开发者都很钟情于它。但是如果你真正地试用这个库,你会发现它并不是一个很简单的数据可视化工具,它更多地提供了一个数据化整理的结构功能。另外,它并不是基于jQuery或其他的底层js libraries,它本身就带有直接和DOM做交流的功能,因此一些教程说其基于a, b, c, …都是错误的。更好地了解它的价值,你也可以阅读我好友写的一篇文章:What

js库

Raphael js库简介

Raphael JS库是在webrebuild交流会上听专家将到的,后来就看了下,果然很强大——通过SVG/VML+JS实现跨浏览器的矢量图形实现方案。 这其实和cufon等网络字体的实现原理是有些类似的:非IE浏览器使用SVG绘图,然后IE中使用VML。它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案,包括一些动画效果。 Raphael的语法也很简单,基本上了解SVG就会很容易上手的: var c = paper.path("M10 10L90 90"); // 画一条线; 浏览器支持 IE6+、Firefox 3.0+、chrome、opera等都是很好支持的。 一些酷酷的例子: 使用Raphael绘制的117个矢量图标: 嗯,这些图标都是用Raphael实现的,点击例子页面中的图标下面就会显示代码。 简单的动画效果,虽然也可以用JS+CSS3实现,但是这个可是跨浏览器的哦。。。 感兴趣的同学可访问官方网站查看更多demo,以及参考文档。