convertPath

A node lib to convert svg shape elements into path svg elements.

Install

npm install convertpath

What it can do

convertpath has a plugin-based architecture, so almost every optimization is a separate plugin.

Today we have:

Plugin	Description
convertUseToGroup	convert defs and symbol elements into group svg elements.
convertShapeToPath	convert svg shape elements into path svg elements.
removeGroups	move some group and move some group attributes to the contained elements
convertTransfromforPath	remove transform attribute and convert path data to relative
viewBoxTransform	remove width/height attributes and reset ViewBox

Usage

const SVGParser = require('convertpath')

const parse = SVGParser.parse('./test/test.svg', {
  plugins: [
    {
      convertUseToGroup: true, // at first
    },
    {
      convertShapeToPath: true,
    },
    {
      removeGroups: true,
    },
    {
      convertTransfromforPath: true,
    },
    {
      viewBoxTransform: true, // at last
    },
  ],
  size: 1000,
})

const result = parse.toSimpleSvg()
console.log(result)

const paths = parse.getPathAttributes()
console.log(paths)

/**
 * '<circle cx="500" cy="500" r="20" fill="red"/>'
 */
console.log(parse.toSimpleSvg())

/**
 * '<path d="M500,500,m-20,0,a20,20,0,1,0,40,0,a20,20,0,1,0,-40,0,Z" fill="red"/>'
 */

API

SVGParser.parse(filename)

SVGParser.parseStr(svgString)

SVGParser.parseNode(node)

parse.toSimpleSvg()

parse.getPathAttributes

CHANGELOG

CHANGELOG.md

Special thanks

• SVGO
• fontello
• W3C SVG11

注意：

• 1.svg 区分大小写， 如 viewBox 与 viewbox, minify 压缩会导致 viewBox 变成小写
• 2.stroke-width 属性指定了当前对象的轮廓的宽度。它的默认值是 1。如果使用了一个 <percentage>，这个值代表当前视口的百分比。如果使用了 0 值，则将不绘制轮廓。viewBox 变更 stroke-width 也需要变更。