SVGSON技术文档：轻松处理SVG文件与数据转换

SVGSON技术文档：轻松处理SVG文件与数据转换

svgson Transform svg files to json notation 项目地址: https://gitcode.com/gh_mirrors/sv/svgson

SVGSON是一个简洁高效的工具，它允许开发者将SVG文件和字符串转化为JavaScript对象或JSON格式，非常适合于在JavaScript环境中操作SVG以及存储到NoSQL数据库中。以下是使用SVGSON的全面指南，涵盖安装、基本使用、API详解以及同步与异步处理方法。

安装指南

你可以通过Yarn或者NPM来添加SVGSON到你的项目中。推荐使用Yarn以获得更佳的包管理体验：

yarn add svgson

如果你偏好NPM，同样适用：

npm install svgson --save

项目使用说明

基本使用

SVGSON提供简单的接口进行SVG和JSON的互相转化。以下是如何将SVG字符串转化为JSON的示例：

const { parse } = require('svgson');

const svgString = `
  <svg>
    <line
      stroke="#bada55"
      stroke-width="2"
      stroke-linecap="round"
      x1="70"
      y1="80"
      x2="250"
      y2="150">
    </line>
  </svg>
`;

parse(svgString)
  .then(json => {
    console.log(JSON.stringify(json, null, 2));
    // 输出解析后的JSON结构
  });

要从JSON重新生成SVG字符串，可以使用stringify方法：

const { stringify } = require('svgson');

// 假设json是之前parse得到的结果
const svgGenerated = stringify(json);
console.log(svgGenerated); // 输出原始SVG字符串

UMD使用

对于直 接在浏览器环境中的使用，SVGSON也提供了UMD版本的兼容性：

<script src="node_modules/svgson/dist/svgson.min.js"></script>
<script>
  svgson.parse(yourSVGString).then(json => {
    // 处理结果...
  });
</script>

项目API使用文档

svgson.parse

该函数用于将SVG字符串转化为AST（抽象语法树）的Promise形式：

svgson.parse(svgString[, options]);

• 参数:
  • svgString: 需要解析的SVG字符串。
  • options (可选): 包含自定义处理节点的函数transformNode和是否启用属性的驼峰命名camelcase。

svgson.parseSync

同步版本的解析函数，适用于不希望异步等待的场景：

svgson.parseSync(svgString[, options]);

svgson.stringify

将AST转化为SVG字符串：

svg = svgson.stringify(ast[, options]);

• 参数:
  • ast: 由parse方法产生的AST对象。
  • options: 可配置项包括transformAttr、transformNode、selfClose等，用于控制属性序列化和节点的处理。

结论

SVGSON是处理SVG数据的强大工具，无论是进行前端的图形动态生成，还是后端的图形数据存储，都能找到它的用武之地。掌握上述文档中提及的基本使用和高级API，将极大提升你的SVG处理能力。

svgson Transform svg files to json notation 项目地址: https://gitcode.com/gh_mirrors/sv/svgson