Tag: svg

分类
前端

Boostrap 发布图表库 Bootrap Icons 1.0，该准备切换到 SVG 了

Bootstrap 团队一边开发 Bootstrap 5，一边发布了 Bootstrap Icons 1.0（以下简称 BI）。官方全文见此：Bootstrap Icons v1.0.0。这个版本里包含 1100 个图标，涵盖范围很广，全免费（MIT），可以自由使用、修改。

真正引起我注意的是，这个仓库不再使用 Webfont，而是全部使用 SVG。官方文档 介绍了三种使用方式：

  1. 直接嵌入 SVG 代码
  2. 在 <svg> 中引用 BI 库并配合 <use> 使用
  3. 通过 bootstrap-icons/icons/*.svg 直接使用

如果你非常怀念 Webfont 方式，可以用（3）结合 CSS background-image 的方式近似的模拟。

其实，GitHub 很早以前就开始从 Webfont（Icon font） 向 SVG 切换了，他们还特地写了篇博客解释这件事情：Delivering Octicons with SVG，在里面列举了六个理由：

  1. Icon font 本身存在一些渲染问题，Webkit 内核的浏览器会使其边缘模糊，不利于辨识
  2. Icon font 一般会延后加载，而字体在完成加载之前无法判定大小，所以加载完成之后，需要重新计算布局并且重新进行渲染，造成不必要的性能损耗
  3. 可用性。参考这篇 Slide：Death to Icon Fonts，每十个人当中就有一个人存在阅读障碍，他们很难使用普通字体，必须使用专为他们设计的特殊字体，而这个时候，icon font 就会变成没有意义的方块。对使用阅读器的人更甚：icon font 是一种 hack，通常来说，我们并不会真的写文字进去，所以在他们看起来，图标会变得完全不可读。
  4. 合适的图标尺寸
  5. 方便重构字体文件
  6. 方便制作动画

所以，如今 Bootstrap 放弃 webfont，使用 SVG 作为主要格式，应该说是大势所趋。这几年使用 Webfont，的确很方便，给开发带来很大的效率提升，但与此同时，也存在不少问题：

  1. fontawesome 体积越来越大，现在一组字体要 1M+，加载很耗时，但是拆分非常困难，即使只用几个图标，也需要加载整个字体库
  2. 无法对图标进行稍微复杂的操作，比如双色，或者特定部位的动画
  3. 放大之后，图标比较丑，也不好加工
  4. 前面说过的那些问题

所以未来我和我厂也要慢慢从 webfont 切回 SVG。这样也有助于提升我厂产品的可用性。其实，互联网行业的可用性一直都做得不错，软件开发目前也算是残障人士最有机会获得体面收入的机会，所以，我辈仍需努力呀。

分类
js

用 SVG 画五角星

先上代码：

See the Pen draw a star by Meathill (@meathill) on CodePen.

话说前两日想起来填坑，需要用五角星做示例。正好前几天买了本 SVG 的书，就想试一下。这篇文章记录其中几个要点。

多边形 <polygon>

在 SVG 中，画多边形要用到 <polygon>，它有一个属性 points 可以用来定义各个点的座标。有了它我们就可以连点成线做出想要的多边形了。

创建 SVG 元素

以前直接使用 document.createElement() 就能创建出想要的元素，然而 SVG 并非普通的文档，所以要小小的变动一下，使用命名空间来创建合适的元素：

var svg = document.getElementById('svg')
  , ns = svg.namespaceURI
  , star = document.createElementNS(ns, 'polygon');

先取到页面中写好的 SVG 节点，然后取得它的命名空间，最后借由它创建需要的元素。

使用 JS 操作元素

SVG 元素都是 SVGElement，对他们进行操作是需要一点技巧的。

比如，向对变形增加顶点就需要

var point = svg.createSVGPoint();
point.x = 10;
point.y = 10;
star.points.appendItem(point);

总结

整体说来 SVG 操作还是蛮简单的，将来可能简单的绘图都直接用代码写了。