A node lib to convert svg shape elements into path svg elements.
npm install convertpath 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 |
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"/>' */
注意：
- 1.svg 区分大小写， 如
viewBox与viewbox,minify压缩会导致viewBox变成小写- 2.
stroke-width属性指定了当前对象的轮廓的宽度。它的默认值是 1。如果使用了一个<percentage>，这个值代表当前视口的百分比。如果使用了 0 值，则将不绘制轮廓。viewBox变更stroke-width也需要变更。