SVG parser for LaserWeb/CNCWeb.
<svg> <title> <desc>
<g> <defs> <use>
<line> <polyline> <polygon>
<rect> <circle> <ellipse>
<path> <image> <text>
- ViewBox, PreserveAspectRatio
- Clipping paths with Clipper.js
- Promise mechanism
- ES6 / UMD module
https://lautr3k.github.io/lw.svg-parser/dist/example/
Using NPM
npm install lw.svg-parser
Using GIT
git clone https://github.com/lautr3k/lw.svg-parser.git
cd svg-parser
npm install
Or download the last build from https://github.com/raw/lautr3k/lw.svg-parser/master/dist/lw.svg-parser.js
<script src="./lw.svg-parser.js"></script>
<script>
var parser = SVGParser.Parser();
</script>
let settings = {
includes: ['svg', 'g', 'defs', 'use', 'line', 'polyline', 'polygon', 'rect', 'circle', 'ellipse', 'path', 'title', 'desc', 'image', 'text'],
excludes: ['#text', '#comment'],
traceSettings: { // Arc, Bezier curves only
linear : true, // Linear trace mode
step : 0.01, // Step resolution if linear mode = false
resolution : 100, // Number of segments we use to approximate arc length
segmentLength: 1 // Segment length
},
onTag: tag => {} // Called after a tag is parsed
}
import Parser from 'svg-parser'
let parser = new Parser(settings)
// <input> must be an raw XML string, XMLDocument, Element or File object
return parser.parse(input).then(tags => {
console.log('tags:', tags);
tags.forEach(tag => {
tag.getPaths() // return an array of Path objects (all contours + holes)
tag.getShapes() // return an array of ExPolygons objects from Clipper.js (filled shapes)
})
})
.catch(error => {
console.error('error:', error);
});
After the main <svg>
tag was parsed you can access this two properties on the parser instance :
parser.editor // Editor info { name, version, fingerprint }
parser.document // Document info { width, height, viewBox }
// where viewBox is { x, y, width, height }