npm 包 ivi-ssr-svg 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

ivi-ssr-svg 是一个用于将 SVG 图像转换为服务器端渲染（SSR）友好格式的 npm 包。它提供了一种简洁而高效的方式来处理 SVG 格式的图像，并输出符合 SSR 要求的 HTML 标记，以确保对 SEO 和首次加载的快速响应的支持。

安装

可以使用 npm 来安装 ivi-ssr-svg 包，通过以下命令：

npm i ivi-ssr-svg

使用

ivi-ssr-svg 提供了一个轻量级、易于使用、功能齐备的接口，使得将 SVG 图像转换为服务器端渲染（SSR）友好格式变得既简单又直观。

下面是基本的使用方法：

-- -------------------- ---- -------
----- --------- - -----------------------

----- --- - -
  ---- ---------- - --- ---- -----------------------------------
    ----- ------ ------ ---------- -------------
  ------
--

----- ---- - ----------------------------

------------------

上面的代码会将输入的 SVG 图像字符串转换为符合 SSR 要求的 HTML 标记，将其输出至控制台中。

输出结果：

<div>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="80" height="80"></rect>
  </svg>
</div>

深入

从 SVG 到 SSR HTML

ivi-ssr-svg 最强大的特性之一是把 SVG 图像转换为符合服务器端渲染（SSR）要求的 HTML 标记，这样可以确保搜索引擎能够正确地理解并索引它们。

转换后的 HTML 标记包含一个标准的 <div> 元素，其内部嵌套着转换之后的 SVG 图像元素以及其所有属性，这样即使在没有 JS 支持的情况下（如爬虫），也可以正确地解析渲染图像。

在使用 ivi-ssr-svg 时，可以通过 convertToSsr 函数来转换 SVG 图像，具体函数签名如下：

function convertToSsr(svg: string, options?: Options): string;

其中，第一个参数 svg 是待处理的 SVG 图像字符串，第二个参数 options 是一个可选的参数，用于配置转换器。该函数的返回值是符合 SSR 要求的 HTML 标记字符串。

压缩输出

默认情况下，ivi-ssr-svg 会自动将输出的 HTML 标记进行压缩，以便减小传输大小和提高性能。压缩输出可以通过在 convertToSsr 函数的选项中设置 compress 属性来控制。

const code = iviSsrSvg.convertToSsr(svg, {compress: false});

配置根元素和样式属性

在一些场景下，需要对 SVG 的根元素进行样式配置，可以通过在 convertToSsr 函数的选项参数中设置 rootElement 和 style 属性来实现。

const code = iviSsrSvg.convertToSsr(svg, {rootElement: 'span', style: { color: 'red' }});

指定 class 名称

ivi-ssr-svg 还提供了一种方便的方式来为 SVG 图像设置指定的 class 名称。可以通过在 SVG 元素中添加 class 属性，并将其值设置为 $class ，然后在 convertToSsr 函数的选项参数中设置 className 属性来指定 class 名称。

const svg = `
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" class="$class" />
</svg>
`;

const code = iviSsrSvg.convertToSsr(svg, {className: 'my-class'});

输出结果：

<div class="my-class">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="80" height="80" class="my-class"></rect>
  </svg>
</div>

结论

ivi-ssr-svg 是一个必不可少的 npm 包，为开发人员提供了一种方便的方式来将 SVG 图像转换为符合服务器端渲染（SSR）要求的 HTML 标记，以确保对 SEO 和首次加载的快速响应的支持。本文以示例代码的方式介绍了 ivi-ssr-svg 的基本用法及其高级特性，希望能为读者在实际开发中提供一些帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005656581e8991b448e1ba1