SVG 是一种基于 XML 的标准矢量格式，用于描绘二维图像。SVG 在 Web 开发中使用广泛，然而在实际使用过程中，我们经常会遇到如下问题：
- SVG 图像样式无法与 HTML 和 CSS 进行联动；
- SVG 样式在不同浏览器中呈现效果不一致；
- SVG 样式代码复杂，难以编辑和维护。
svg-style-inliner 是一个轻量级的 npm 包，它可以帮助我们解决以上问题，同时还可以有效减小 SVG 文件大小，提高网页性能。
安装
使用 npm 安装 svg-style-inliner：
npm install svg-style-inliner
使用方法
命令行使用
在命令行中执行：
svg-style-inliner < your-svg-file.svg > your-inlined-svg-file.svg
其中，your-svg-file.svg 是需要转换的 SVG 文件路径，your-inlined-svg-file.svg 是输出路径。
引入模块
在 JavaScript 代码中，我们可以使用以下方式引入 svg-style-inliner：
-- -------------------- ---- ------- ----- -- - -------------- ----- --------------- - ----------------------------- ----- ----------- - ----------- ------------------------ ------- ----- ---- -- - -- ----- ----- ---- ----- ---------- - --------------------- ------------------------ ---展开代码
上面的代码中，我们首先使用 fs 模块读取 SVG 文件内容，然后使用 svgStyleInliner 函数将 SVG 文件中的样式内联到 SVG 元素中，并返回内联后的 SVG 代码。
传入选项
svgStyleInliner 可以接受选项参数，常用的选项如下：
skipFonts: 是否忽略字体相关样式，默认为false；keepImportant: 是否保留 CSS!important关键字，默认为false；keepFills: 是否保留默认填充颜色，默认为false；keepStroke: 是否保留默认描边颜色，默认为false；keepStyles: 是否保留元素的行内样式，默认为false。
使用方式如下：
const inlinedSvg = svgStyleInliner(svg, { skipFonts: true, keepImportant: false, keepFills: false, keepStroke: false, keepStyles: false });
上面的代码中，我们将 skipFonts 设置为 true，这样 svgStyleInliner 在内联样式时将忽略字体相关的样式。
示例
假设我们有一个 SVG 图像文件 test.svg，它定义了一个矩形元素，如下所示：
-- -------------------- ---- ------- ----- ------------- ---------------- ----------------- ---- ---------- - --- ---- ----------------------------------- ------------------- ----- ------ ------ ----------- ------------ ----------- -------------- ---------------- -- ------- ---- - ----- ---- - -------- ------展开代码
这个 SVG 文件中，我们通过内联样式设置了矩形的填充色为红色。
使用 svg-style-inliner 将样式内联到 SVG 元素中，可以得到如下代码：
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <title>Test</title> <rect x="50" y="50" width="100" height="100" style="fill: red;" stroke="black" stroke-width="2" /> </svg>
可以看到，原本在 <style> 元素中定义的样式已经被内联到了 <rect> 元素中。
结语
svg-style-inliner 是一个十分实用的 npm 包，它可以极大地简化 SVG 样式的编辑和维护，并提高网页性能。在实际开发中，我们可以结合选项参数，灵活地控制转换过程，以满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb5d6b5cbfe1ea061147f
