随着互联网的普及和发展，Web前端技术变得越来越重要。在现代 Web 开发过程中，使用 SVG （可缩放矢量图形）成为了标准。而 @reeywhaar/svgmaker 是一个利用原生 JavaScript 创建 SVG 图形的 npm 包，能将 SVG 图形快速集成到你的网站或项目上。
本文将介绍如何安装、使用并优化 @reeywhaar/svgmaker 包。同时，我们将探讨该 npm 软件包在现代 Web 开发生态中的意义。
安装
如同安装其他 npm 包一样，你可以在命令行中执行：
npm install @reeywhaar/svgmaker
这将会安装软件包到你的当前项目中。你也可以使用 yarn 包管理器安装。
基本用法
在安装 @reeywhaar/svgmaker 后，你就可以在你的项目中 import 工具。
import { SvgMaker } from "@reeywhaar/svgmaker";创建 SvgMaker 实例：
const svg = new SvgMaker({
width: "1000",
height: "500",
});我们可以用 svg.draw() 命令创建 SVG 图形。
-- -------------------- ---- ------- -- -- ---------------- - -- ----- -- ----- ------ ------ ------- ------ --- -- - ---------------- - --- ------ --- ------ --- ------ --- ------ ------- -------- --- -- -- ------------------ - --- ------ --- ------ -- ----- ----- --------- ------- -------- --------------- ---- ---
在浏览器中，会生成以下 SVG 图形：
进一步拓展嵌套的 SVG 图形
在 SVG 图形中，我们可以嵌套更多的 SVG 图形。让我们试着创建一个 SVG 图形，在其中嵌套其他图形：
-- -------------------- ---- ------- -- -- ----- ------ - ------------------ - --- ------ --- ------ -- ----- ----- --------- ------- -------- --------------- ---- --- -- --- ----- ---- - ---------------- - -- ------ -- ------ ------ ----- ------- ----- ----- ------ ------- -------- --------------- ---- --- -- ------------- ----- ----- - -------------- -------------------------- ------------------------
让我们看看，最终生成的 SVG 图形：
优化性能
我们已经在零代码的情况下生成了一个 SVG 图形，但是我们可以 进一步优化 SVG 图形的性能。
将 SVG 图形储存在单独文件中，并在 DOM 中使用链接资源
首先，我们可以将 SVG 图形保存在单独的文件中，而不是将其直接嵌入 HTML 文件中作为内联 SVG 。这将使 HTML 更加干净，并缩短首次加载，从而加快网站的速度。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500"> <use xlink:href="icons.svg#some-icon"></use> </svg>
使用 use 元素
我们可以使用 use 元素来在多个地方关闭相同的 SVG 元素，并指向其唯一的引用。这是将 SVG 图形嵌套到 HTML 中的最佳实践。
-- -------------------- ---- -------
-----
---- ------------------------- --
------
---- --------------- ------
------- -----------------
------- ------- ------- ------ --
----- ----- ------ ---------- ----------- --
---------
------在 JS 中仅添加所需元素
如果你的 SVG 元素是由 JavaScript 生成的，那么你可以仅生成你实际所需的元素。这可以优化生成的 SVG 元素的大小，从而使其更快地加载。
const circle = svg.draw("circle", { cx: 10, cy: 10, r: 10 });
// 仅添加圆形元素
group.appendChild(circle);总结
在如今的 Web 开发生态中，SVG 图形扮演了很重要的角色。@reeywhaar/svgmaker 可以帮助快速创建 SVG 图形，并且具有细粒度的控制。在实际的项目中，我们应该优化 SVG 图形的生成和使用，以提高性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560e981e8991b448df25c