前言
随着互联网的高度发展，我们的视觉交互设计也越来越重要。而 SVG 这种基于 XML 的矢量图格式，体积小、可伸缩、可动画以及试图设计优雅度都非常出色，所以它已经在应用中广受认可。它在各种领域中都有用武之地，比如 LOGO 设计、UI 界面设计、音乐视频等。本教程将着重讲解使用 npm 包 svgcode，它是一个生成 SVG 代码的库，帮助我们更快捷的生成所需要的 SVG 图标。
安装
如果你还没有安装 npm，你需要先安装 npm，然后执行以下命令安装 svgcode：
npm install svgcode
基础使用
接下来我将通过一个简单的例子来描述 svgcode 的基本使用，它将使用 svgcode 的方法返回 svg 代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----- - --- ------ - --- ----- --------- - ------------------- ----- - -------- -- -- --- ----- --- - ------------------- -------- --- -- ------ -------------- --- ------ ------------- ------- ------------- -- ----------------------- - -- -- -- -- ------ ------ ------- ------- ------------- -------------------------------------------------------------------- ---- -----------------
运行如上 js 脚本会得到如下输出：
<svg viewbox="0 0 50 50" width="50px" height="50px"> <image x="0" y="0" width="50" height="50" xlink:href="data:image/png;base64,"></image> </svg>
例中我们使用 create 方法创建 <image> 元素，并使用 serialize 将其有序输出。使用起来非常简单，不需要繁琐的配置即可生成所需元素。
进阶使用
使用 svgcode 有一些进阶方案，比如渐变，这种高级元素。我们可以看一个例子，示例将创建一个包含渐变的 SVG 渲染效果。
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - -------------------------------- -
--- -------------
--- -----
--- -----
--- -------
--- ------
-- -
---------------------- -------- ----- ------------- --------
---------------------- -------- ------ ------------- ---------
---------------------- -------- ------- ------------- ---------
---
----- --- - -------------------
-------- --- -- ---- ----------- ---
------ --------
------- --------
------ -
----------- -------
-
-- ------------------------ -
--- ----
--- ----
-- ---
----- ------------------
----
-----------------这个例子使用了 linearGradient 梯度，让它呈现其他颜色的效果。运行上述代码会得到以下输出：
-- -------------------- ---- -------
---- ---------- - --- ---- ------------- -------------- -------------------------
------
--------------- --------------- ------- ------- --------- ----------
----- ----------- ------------------------
----- ------------ -------------------------
----- ------------- --------------------------
-----------------
-------
------- -------- -------- ------ ---------------------------------
------结语
通过这个教程，我相信你已经掌握了 npm 包 svgcode 的基础使用和进阶使用，它可以让我们更快速的创建出 SVG 图标。让我们共同探索如何从 SVG 的学习中更深入地了解为什么 SVG 可以这样鲜明夺目，并找到自己未来的的发展机会和方向。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d0927023822816