【一周一荐】| tiny-svg：一款轻量级创建工具库

小半 • 2024年2月29日下午3:22 • 前端开发 • 阅读 388

bpmn-js越了解越觉得是一个宝藏库，bpmn-js中用于使用绘制元素svg的tiny-svg库也是bpmn-io组织自行开发的一款轻量级SVG工具类库，周下载量足达61398次，本篇文章就来了解下如何使用tiny-svg来实现SVG的绘制。

什么是SVG?

SVG即可缩放矢量图（Scalable Vector Graphics），是一个以XML格式定义的一个标记文件，SVG图片相较于像素图片而言有如下特点：

可放大缩小且保持原有质量，不失真
W3C制定的XML标准
模块可交互，支持DOM

tiny-svg特性

没有包装魔法，直接使用原生的DOM操作
模块化
库大小只有2kb，库代码已被压缩和混淆
支持innerSvg
简化的svg属性处理
几何辅助支持

安装

安装可以选择使用npm、pnpm、yarn进行安装

$ npm i tiny-svg // 或
$ yarn add tiny-svg

使用

tiny-svg使用最简单的方式通过string文本方式来创建和维护svg的绘制，这种方式会让我们的创建更加灵活轻便，操作复杂度降低，但同时由于缺少足够的api来操作使用，需要使用者对于svg的结构标准、功能支持、坐标计算需要足够多的了解才能更加完美的创建和绘制。

import {
  appendTo,
  classes,
  create,
  innerSVG
} from 'tiny-svg';

var container = document.createElement('div');
var element = appendTo(create('svg'), container);

var g = appendTo(create('g'), element);

// add classes, SVG style!
classes(g).add('foo');

var text = `
  <g class="foo bar">
    <rect x="0" y="0" width="0" height="0" rx="50" ry="50"/>
  </g>
`;

// set innerSVG
innerSVG(g, text);