The convertpath from convertsvg

convertpath's Introduction

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
removeGradient	remove gradient if reference via url('#id')
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

WIKI

SVG WIKI

CHANGELOG

CHANGELOG.md

Special thanks

convertpath's People

Contributors

Stargazers

Watchers

convertpath's Issues

NaN after converting , is this a bug?

thank you for the lib.
I test this library with an svg which content like this:

<svg >
<g id="16" >
<rect transform="translate(5.6906, 12.8755)" x="101.6982" y="-0.1000" width="2.9430" height="0.2000" ry="0.1000" fill="currentColor"/>
</g>
</svg>

after convert, the result is :
<svg viewBox="0 0 1000 1000"><g id="16"><path transform="translate(5.6906, 12.8755)" fill="currentColor" d="MNaN NaNaNaN NaN NaN 0 1 NaN NaNlNaN NaNaNaN NaN NaN 0 1 NaN NaNlNaN NaNaNaN NaN NaN 0 1 NaN NaNlNaN NaNaNaN NaN NaN 0 1 NaN NaNz"/></g></svg>

my code is :

const fs = require('fs');
const SVGParser = require('convertpath')

const parse = SVGParser.parse('./how.svg', {
  plugins: [
    {
      convertShapeToPath: true,
    },
    {
      removeGroups: false,
    },
    {
      viewBoxTransform: true, // 必须放到最后
    },
  ],
  size: 1000, // default 1024
})

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())


fs.writeFile("./how_.svg", parse.toSimpleSvg(), function(err) {
    if(err) {
        return console.log(err);
    }
    else
    {
        console.log("The file was saved!");
    }

   
});

So what's wrong with my code , could you point out the right way, thank you !

svg转化bug

从test.svg到result.svg的转化，我有两个问题：
第一是，viewBox的范围不应该发生变化。
第二是，对比转化前后的两张svg图，发现右下角的黄色方块，位置发生了变化

isNaN 判断导致 line 无法转换

这里的会导致部分情况下 line 未被转换。

var x1 = '10', y1 = '11.1', x2 = '11.1', y2 = '10.1'
isNaN(x1 - y1 + x2 - y2)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

web

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Google

Google ❤️ Open Source for everyone.

Alibaba

Alibaba Open Source for everyone

D3

Data-Driven Documents codes.

Tencent

China tencent open source team.

convertsvg / convertpath Goto Github PK