SVG简单入门四:渐变、图案及滤镜

写在最前面

做为一个技术人士来说,用什么样的技术解决什么的问题,相当重要。

对于本人来说,滤镜、渐变之类的简直就是玄学,但对于我的设计师同事来说,这些就是不值一提的常识。

那么,有没有必要去了解这些东西呢?

个人建议:需要知道这些知识能够发挥什么样的作用,用不着深入学习。

用经济学的术语就是深入学习滤镜之类的原理,是一种边际成本高,边际收入很低的行为,换言之就是性价比低。(我说的是对一般的开发者而言,如果是专门从事此领域就要再换言之一下了。)

但是完全不知道这一块的知识,也是不可取的,比如你可能完全不知道一些炫酷的特效如何产生的,那么你的思维空间就缺失掉了一部分的想象力,所以个人建议还是做个基本了解。现在进入正题:

阅读更多

SVG简单入门三:基本样式

写到这里,我忽然意识到自己有点孤陋寡闻了,因为我看到现在好多设计师都没有使用 PS 了,而是使用 Sketch 和 AI 之类的失量工具做创作,作品都是支持转成SVG的。

我现在也看到了越来越多的网站,里面使用图片也是SVG , 比如 <image src="xx.svg">import svg from './xx.svg' 等等。效果其实一点也不逊于 png、jpg!

做为一个刚接触SVG编程的小粉,发现SVG适用的领域还很多,还是很欣慰的,也搞清楚了很多事情。比如之前一直不理解SVG为什么需要有这么多种使用样式的方式,现在知道了。

阅读更多

SVG简单入门二:结构&图形介绍

有大神说过,20%的知识点解决80%的问题,剩下的20%的问题需要用80%的知识点来解决。

SVG看上去简单,其实内容还是相当丰富的,所以本教程只写一下个人的观点,以及总结一些常用的说明,保证20%以上,剩下的80%我会贴出一些个人认为不错的链接过来扩展阅读。(可能会有英文链接,有阅读能力的建议是英文优先)

SVG文档结构:标签

先总结一下SVG的常用标签,这里使用列位熟悉的HTML来打个比方,不能算很恰当,理解即可。

阅读更多

SVG简单入门一:简单介绍

—– 后记:SVG系列已经更新到语雀平台:看起来更清晰:—-

语雀地址: https://www.yuque.com/ada87/svg
本文地址: https://www.xdnote.com/svg1

小说一下历史

SVG很久以前就存在了,但是从来没有使用过。在没有HTML5之前,占据图形展示的主角是 Flash。还有就是应用程序通过字节流绘制的,比如PHP的GD库,Java的Graphx等等。

后来 HTML5 发布,Canvas(画布) 走向了前端,很多图形工具框架出现了,直到现在仍然是主流,很欣喜的是,国内在基于画布的开源项目已经非常成熟,一点也不比国外的差,比如百度的 ECharts, 阿里的 G2,G6 等等,都是非常不错的Canvas框架。

也多亏了浏览器大战,Canvas 很快都支持了WebGl,ThreeJs 应声而出。也是基于Canvas的种实现,使用opengl,通过硬件渲染支持复杂的3D图形显示。

当然想起了写个SVG的教程,我们还是把主角光环移回 SVG 身上来。直到现在,SVG占据的图形化编程市场也并不算多,有学习的的必要吗?

我的回答是:看需要,任何技术都有它的适用性。

阅读更多

关闭评论说明

关闭评论说明

阅读更多

d3-format 小记

D3自带的 d3.format() 是一个格式化数字的方法,和大部分的D3方法一样,调用后会返回一个新的方法,方便后面使用。

比如:

1
2
3
4
var FormatNumber1 = d3.format("s");
FormatNumber1(1500) // "1.50000k"
var FormatNumber2 = d3.format("~s");
FormatNumber2(1500) // "1.5k"

是不是很方便! 实际上 d3的format方法相当强大,可以把数字格式化为各种你需要的形式。通过方法的参数可以设置转换的规则,规则主要部分如下:

阅读更多

网页字体九成手册

html5诞生以来,字体特性算是一个广受喜爱的特性,但又对于最终用户不算是太友好,毕竟前端不是专业造字人,特别是中文,所以就出现了很多基于字体的框架,软件等。

今天说一下,如果本文看完的话,基本上能解决 90% 的字体问题,所以就叫九成手册,当然你要问我IE,我就呵呵了,再说一次,html5.

图标

一:使用图标库

使用 Icon 是目前来说字体应用最为广泛的了。比较流行的框架有 glyphicons awesome 等等。

记得在不久前(就算是如今),很多网站都没有使用字体来做为图标,而是使用图片,这样会有很多缺点:

  1. 字体文件一般都比较小,包含上百个图标的字体通常不到 40kb,而使用位图,100个图标可能达到 1Mb 以上,而且网络请求 100个小图标,也是不小的开销。
  2. 当然,你也可心使用 css-sprite 技术将这100个小图标压成一幅图片,这样就只请求一次了,但编写css样式的复杂度就会变高很多,即使是用 compass,也要额外写很多。而且当你使用 sprite 图后,就没有办法进行大小控制了。
  3. 使用图片,样式不够灵活,比如放大缩小,颜色等,如果是字体,可以随便调整 font-sizecolor 等属性。
  4. 图片如果拉大后,就会失真,颗粒感强

当然图片有两点好处,目前还使用图片做为ICON的都是基于以下考虑

  1. 图片显示效果可以好一点,比如在PS里面加入各种特效后导成图片,字体就比较难做到
  2. 兼容老古董IE

一般情况下,都是使用 <span class="icon xxx" /> 之类的来放置一个图标,但也有一些框架可以直接使用文字切换,比如 Google 的 MaterialIcon 可以直接写为 <i class="material-icons">book</i>

具体怎么写参考框架就行了,不多讨论,但是即使如此,一般情况下都会受到一定的局限性,有时想要一个好的 ICON 但是图标库中没有是很觉的事。

阅读更多

TypeScript 文档化工具: typedoc

由于目前主要前端语言由 JavaScript 切换到了 TypeScript,所以原先用的 JSDoc 工具也用不了了,虽说 JSDoc 官方也在积极适配TypeScript,但始终产品不能等工具。何况不是核心的文档功能。

于是上Github上找了一下,很快发现了以下项目:

TSDoc
typescript-docs
ts2jsdoc

Star 只有几十不说,安装下来,发现功能粗糙,很多基本的应该有的功能很难进行定制,生成效果和预期差距很大。

TypeDoc

这些项目的理念是基于 JSDoc 或是自己实现一个简单的 JSDoc 来实现文档化,于是换了换思路,终于找到了神器 typedoc

阅读更多