├── .nvmrc
├── .jshintrc
├── .gitignore
├── .travis.yml
├── src
    ├── parse.js
    ├── transform.js
    ├── lib.js
    ├── flatten.js
    └── pathify.js
├── LICENSE
├── package.json
├── test
    ├── lib-samples.spec.js
    ├── flatten.spec.js
    ├── samples
    │   ├── sample2_result.svg
    │   ├── sample2.svg
    │   ├── sample1_result.svg
    │   ├── sample1.svg
    │   ├── sample3.svg
    │   └── sample3_result.svg
    ├── transform.spec.js
    ├── lib.spec.js
    ├── pathify.spec.js
    └── parse.spec.js
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | 8


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "esversion": 6
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependency directories
2 | node_modules
3 | jspm_packages
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - 8
 5 |   - 14
 6 |   - lts/*
 7 | 
 8 | scripts:
 9 |   - npm test
10 |   - npm run lint
11 | 


--------------------------------------------------------------------------------
/src/parse.js:
--------------------------------------------------------------------------------
 1 | var xmldoc = require('xmldoc');
 2 | 
 3 | module.exports = function (source) {
 4 |     try {
 5 |         return new xmldoc.XmlDocument(source);
 6 |     } catch (exception) {
 7 |         var dom = new xmldoc.XmlDocument('<invalid />');
 8 |         dom.attr.reason = exception.toString();
 9 | 
10 |         return dom;
11 |     }
12 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (C) 2016 StadLine
 2 | 
 3 | Permission to use, copy, modify, and/or distribute this software for any
 4 | purpose with or without fee is hereby granted, provided that the above
 5 | copyright notice and this permission notice appear in all copies.
 6 | 
 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
12 | OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
13 | CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svg-flatten",
 3 |   "version": "1.0.1",
 4 |   "description": "Turns SVG shapes (polygon, polyline, rect, g) into SVG paths. It can merge groups and apply transforms.",
 5 |   "main": "src/lib.js",
 6 |   "dependencies": {
 7 |     "svgpath": "^2.1.6",
 8 |     "xmldoc": "^0.5.0"
 9 |   },
10 |   "devDependencies": {
11 |     "chai": "^3.5.0",
12 |     "jshint": "^2.9.1",
13 |     "mocha": "^2.4.5",
14 |     "proxyquire": "^1.7.9",
15 |     "sinon": "^1.17.4"
16 |   },
17 |   "scripts": {
18 |     "test": "mocha",
19 |     "lint": "jshint **/*.js"
20 |   },
21 |   "keywords": [
22 |     "svg",
23 |     "flatten",
24 |     "flattener",
25 |     "shape",
26 |     "circle",
27 |     "ellipse",
28 |     "line",
29 |     "path",
30 |     "polygon",
31 |     "polyline",
32 |     "rect",
33 |     "g",
34 |     "transform"
35 |   ],
36 |   "author": "alex-pex",
37 |   "license": "ISC",
38 |   "repository": "stadline/svg-flatten"
39 | }
40 | 


--------------------------------------------------------------------------------
/src/transform.js:
--------------------------------------------------------------------------------
 1 | var svgpath = require('svgpath');
 2 | 
 3 | function transformGroup(dom) {
 4 |     var newChildren = [];
 5 | 
 6 |     dom.children.forEach(function (child) {
 7 |         newChildren.push(transform(child));
 8 |     });
 9 | 
10 |     dom.children = newChildren;
11 | 
12 |     if (newChildren.length > 0) {
13 |         dom.firstChild = newChildren[0];
14 |         dom.lastChild = newChildren[newChildren.length - 1];
15 |     }
16 | 
17 |     return dom;
18 | }
19 | 
20 | function transformPath(dom) {
21 |     dom.attr.d = svgpath(dom.attr.d).transform(dom.attr.transform)
22 |       .round(10)
23 |       .toString();
24 | 
25 |     delete dom.attr.transform;
26 | 
27 |     return dom;
28 | }
29 | 
30 | function transform(dom) {
31 |     if (dom.name === 'path' && dom.attr.transform) {
32 |         return transformPath(dom);
33 |     } else if (dom.name === 'svg' || dom.name === 'g') {
34 |         return transformGroup(dom);
35 |     } else {
36 |         return dom;
37 |     }
38 | }
39 | 
40 | module.exports = transform;


--------------------------------------------------------------------------------
/src/lib.js:
--------------------------------------------------------------------------------
 1 | var parseFn = require('./parse.js');
 2 | var pathifyFn = require('./pathify.js');
 3 | var transformFn = require('./transform.js');
 4 | var flattenFn = require('./flatten.js');
 5 | 
 6 | function Wrapper(source) {
 7 |     if (typeof source === "string") {
 8 |         this._value = parseFn(source);
 9 |     } else {
10 |         this._value = source;
11 |     }
12 | 
13 |     this.pathify = function() {
14 |         this._value = pathifyFn(this._value);
15 |         return this;
16 |     };
17 | 
18 |     this.transform = function() {
19 |         this._value = transformFn(this._value);
20 |         return this;
21 |     };
22 | 
23 |     this.flatten = function() {
24 |         this._value = flattenFn(this._value);
25 |         return this;
26 |     };
27 | 
28 |     this.value = function() {
29 |         if (typeof source === "string") {
30 |             var meta = source.substr(0, source.indexOf("<" + this._value.name));
31 |             return meta + this._value.toString();
32 |         } else {
33 |             return this._value;
34 |         }
35 |     };
36 | }
37 | 
38 | module.exports = function(source) {
39 |     return new Wrapper(source);
40 | };
41 | 


--------------------------------------------------------------------------------
/src/flatten.js:
--------------------------------------------------------------------------------
 1 | var transform = require('./transform.js');
 2 | var xmldoc = require('xmldoc');
 3 | 
 4 | function flattenSvg(dom) {
 5 |     var newChildren = [];
 6 | 
 7 |     dom.children.forEach(function (child) {
 8 |         newChildren.push(flatten(child));
 9 |     });
10 | 
11 |     dom.children = newChildren;
12 | 
13 |     if (newChildren.length > 0) {
14 |         dom.firstChild = newChildren[0];
15 |         dom.lastChild = newChildren[newChildren.length - 1];
16 |     }
17 | 
18 |     return dom;
19 | }
20 | 
21 | function flattenGroup(dom) {
22 |     var path = new xmldoc.XmlDocument('<path/>');
23 | 
24 |     path.attr = dom.attr;
25 |     path.attr.d = "";
26 | 
27 |     dom.children.forEach(function (child) {
28 |         var flatChild = transform(flatten(child));
29 | 
30 |         if (flatChild.attr.d) {
31 |             var prefix = path.attr.d.length ? " " : "";
32 |             path.attr.d += prefix + flatChild.attr.d;
33 |         }
34 |     });
35 | 
36 |     return path;
37 | }
38 | 
39 | function flatten(dom) {
40 |     if (dom.name === 'svg') {
41 |         return flattenSvg(dom);
42 |     } else if (dom.name === 'g') {
43 |         return flattenGroup(dom);
44 |     } else {
45 |         return dom;
46 |     }
47 | }
48 | 
49 | module.exports = flatten;


--------------------------------------------------------------------------------
/test/lib-samples.spec.js:
--------------------------------------------------------------------------------
 1 | /*jshint mocha: true*/
 2 | 
 3 | var expect = require('chai').expect;
 4 | var fs = require('fs');
 5 | var svgflatten = require('../src/lib.js');
 6 | var xmldoc = require('xmldoc');
 7 | 
 8 | // test
 9 | describe('svg-flatten: test samples', function () {
10 |     var samples = ["sample1", "sample2", "sample3"];
11 | 
12 |     samples.forEach(function(basename) {
13 |         it('should give accurate results (' + basename + ')', function () {
14 |             var sample = fs.readFileSync(__dirname + '/samples/' + basename + '.svg', 'utf8');
15 |             var expectedResult = fs.readFileSync(__dirname + '/samples/' + basename + '_result.svg', 'utf8');
16 | 
17 |             // test with string
18 |             var result = svgflatten(sample)
19 |               .pathify()
20 |               .flatten()
21 |               .transform()
22 |               .value();
23 | 
24 |             expect(result).to.be.equal(expectedResult);
25 | 
26 |             // test with dom
27 |             var sampleDom = new xmldoc.XmlDocument(sample);
28 |             var expectedResultDom = new xmldoc.XmlDocument(expectedResult);
29 | 
30 |             var resultDom = svgflatten(sampleDom)
31 |               .pathify()
32 |               .flatten()
33 |               .transform()
34 |               .value();
35 | 
36 |             expect(resultDom.toString()).to.be.equal(expectedResultDom.toString());
37 |         });
38 |     });
39 | });
40 | 


--------------------------------------------------------------------------------
/test/flatten.spec.js:
--------------------------------------------------------------------------------
 1 | /*jshint mocha: true*/
 2 | 
 3 | var expect = require('chai').expect;
 4 | var xmldoc = require('xmldoc');
 5 | var flattenFn = require('../src/flatten.js');
 6 | 
 7 | // test
 8 | describe('svg-flatten: flatten function', function() {
 9 |     it('should flatten path groups', function() {
10 |         var source = new xmldoc.XmlDocument('<svg><g><path d="M300,200 350,250"/><path d="M400,200 450,250"/></g></svg>');
11 |         var target = new xmldoc.XmlDocument('<svg><path d="M300,200 350,250 M400,200 450,250"/></svg>');
12 | 
13 |         // test
14 |         expect(flattenFn(source).toString()).to.be.equal(target.toString());
15 |     });
16 | 
17 |     it('should flatten nested path groups', function() {
18 |         var source = new xmldoc.XmlDocument('<svg><g><g><path d="M300,200 350,250"/><path d="M400,200 450,250"/></g><g><path d="M100,200 150,250"/></g></g></svg>');
19 |         var target = new xmldoc.XmlDocument('<svg><path d="M300,200 350,250 M400,200 450,250 M100,200 150,250"/></svg>');
20 | 
21 |         // test
22 |         expect(flattenFn(source).toString()).to.be.equal(target.toString());
23 |     });
24 | 
25 |     it('should work with complex groups', function() {
26 |         var source = new xmldoc.XmlDocument('<svg><g transform="translate(200, 300) rotate(20)" title="gauche"><g transform="translate(-50, -100)"><style type="text/css">.st0{fill:#D6D5D5;}</style><g><path class="st0" d="M300,200 350,250"/></g><g><path class="st0" d="M400,200 450,250"/></g></g></g></svg>');
27 |         var target = new xmldoc.XmlDocument('<svg><path transform="translate(200, 300) rotate(20)" title="gauche" d="M250 100L300 150M350 100L400 150"/></svg>');
28 | 
29 |         // test
30 |         expect(flattenFn(source).toString()).to.be.equal(target.toString());
31 |     });
32 | });
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | svg-flatten <img src="https://app.travis-ci.com/stadline/svg-flatten.svg?branch=master" />
 2 | ==========================================================================================
 3 | 
 4 | Turns SVG shapes (polygon, polyline, rect, g) into SVG paths. It can merge groups and apply transforms.
 5 | 
 6 | How to use?
 7 | -----------
 8 | 
 9 | ```js
10 | const svgFlatten = require('svg-flatten')
11 | const fs = require('fs')
12 | 
13 | let flattendSvgPath = 'tmp-flattened.svg'
14 | 
15 | // read SVG file into string
16 | let svgString = fs.readFileSync('circle-rect.svg', 'utf8')
17 | // convert all objects to paths 
18 | let modifiedSvgString = svgFlatten(svgString).pathify().value()
19 | // write SVG string to disk
20 | fs.writeFileSync(flattendSvgPath,modifiedSvgString)
21 | ```
22 | 
23 | API
24 | ---
25 | 
26 | ### svgFlatten(content: string): SvgFlatten
27 | 
28 | Reads SVG content and creates a SvgFlatten instance.
29 | 
30 | ### .pathify(): SvgFlatten
31 | 
32 | Turns SVG shapes (polygon, polyline, rect, g) into SVG paths. It is **needed** before other transformations.
33 | 
34 | ### .flatten(): SvgFlatten
35 | 
36 | Converts groups of paths to a fat path, combining all child paths into one.
37 | 
38 | **Be careful: it tries to squash the xml structure, information can be lost.**
39 | 
40 | Some example of the limitations:
41 | - duplicate attributes cannot be safely squashed, like the id in `<g id="g1"><circle id="c1" r="5"/></g>`
42 | - style rules based on the structure like `#g1 > circle`
43 | - [`use`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) directive may not apply
44 | 
45 | ### .transform(): SvgFlatten
46 | 
47 | Apply [SVG transformations](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) to paths. It doesn't apply clipPath.
48 | 
49 | ### .value(): string
50 | 
51 | Returns the final result as SVG content.
52 | 
53 | Need more info?
54 | ---------------
55 | 
56 | Sadly, I wrote this lib for an old project (2016) and didn't need to tweak it since. It is not actively maintened, but I'll try to watch pull-requests.
57 | 


--------------------------------------------------------------------------------
/test/samples/sample2_result.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <!-- Generated by StadLine -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
5 |   <path d="M142.277 164.73h28.529c-17.377-9.39-29.225-27.822-29.225-48.702 0-30.546 24.689-55.266 55.296-55.266 30.249 0 54.948 24.719 54.948 55.266 0 20.88-11.837 39.311-29.225 48.702h35.81c34.427 0 62.587 28.16 62.587 62.577v202.404c0 33.351-26.409 60.836-59.801 62.556v-95.262c0-27.791-21.555-50.739-48.322-50.739h-31.303c-26.429 0-48.353 22.948-48.353 50.739v94.577c-30.228-4.147-53.535-30.567-53.535-61.88v-202.393c0.01-34.417 28.17-62.577 62.597-62.577v0zM126.969 222.463v65.71h140.165v-65.71h-140.165zM287.644 101.098v29.901h89.354v-29.901h-89.354zM23.012 101.098v29.901h89.365v-29.901h-89.365zM196.877 73.266c-23.675 0-42.793 19.139-42.793 42.762 0 23.326 19.118 42.445 42.793 42.445 23.286 0 42.425-19.118 42.425-42.445 0-23.623-19.128-42.762-42.424-42.762v0zM246.274 409.538c-2.11-19.466-17.767-34.796-36.885-34.796h-23.993c-19.118 0-35.123 15.329-37.212 34.796 0 1.034 0 2.416 0 3.44v93.204c0 18.084 16.702 33.055 37.212 33.055h23.993c20.521 0 37.192-14.971 37.192-33.055v-93.204c0-1.014-0.307-2.406-0.307-3.44z"/>
6 |   <path d="M442.277 164.73h28.529c-17.377-9.39-29.225-27.822-29.225-48.702 0-30.546 24.689-55.266 55.296-55.266 30.249 0 54.948 24.719 54.948 55.266 0 20.88-11.837 39.311-29.225 48.702h35.81c34.427 0 62.587 28.16 62.587 62.577v202.404c0 33.351-26.409 60.836-59.801 62.556v-95.262c0-27.791-21.555-50.739-48.322-50.739h-31.303c-26.429 0-48.353 22.948-48.353 50.739v94.577c-30.228-4.147-53.535-30.567-53.535-61.88v-202.393c0.01-34.417 28.17-62.577 62.597-62.577v0zM426.969 222.463v65.71h140.165v-65.71h-140.165zM587.644 101.098v29.901h89.354v-29.901h-89.354zM323.012 101.098v29.901h89.365v-29.901h-89.365zM496.877 73.266c-23.675 0-42.793 19.139-42.793 42.762 0 23.326 19.118 42.445 42.793 42.445 23.286 0 42.425-19.118 42.425-42.445 0-23.623-19.128-42.762-42.424-42.762v0zM546.274 409.538c-2.11-19.466-17.767-34.796-36.885-34.796h-23.993c-19.118 0-35.123 15.329-37.212 34.796 0 1.034 0 2.416 0 3.44v93.204c0 18.084 16.702 33.055 37.212 33.055h23.993c20.521 0 37.192-14.971 37.192-33.055v-93.204c0-1.014-0.307-2.406-0.307-3.44z"/>
7 | </svg>


--------------------------------------------------------------------------------
/test/samples/sample2.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!-- Generated by StadLine -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
 5 |   <g transform="translate(200, 300) rotate(0)">
 6 |     <g transform="translate(-256, -256)">
 7 |       <path d="M198.277 120.73h28.529c-17.377-9.39-29.225-27.822-29.225-48.702 0-30.546 24.689-55.266 55.296-55.266 30.249 0 54.948 24.719 54.948 55.266 0 20.88-11.837 39.311-29.225 48.702h35.81c34.427 0 62.587 28.16 62.587 62.577v202.404c0 33.351-26.409 60.836-59.801 62.556v-95.262c0-27.791-21.555-50.739-48.322-50.739h-31.303c-26.429 0-48.353 22.948-48.353 50.739v94.577c-30.228-4.147-53.535-30.567-53.535-61.88v-202.393c0.010-34.417 28.17-62.577 62.597-62.577v0zM182.969 178.463v65.71h140.165v-65.71h-140.165zM343.644 57.098v29.901h89.354v-29.901h-89.354zM79.012 57.098v29.901h89.365v-29.901h-89.365zM252.877 29.266c-23.675 0-42.793 19.139-42.793 42.762 0 23.326 19.118 42.445 42.793 42.445 23.286 0 42.425-19.118 42.425-42.445 0-23.623-19.128-42.762-42.424-42.762v0zM302.274 365.538c-2.11-19.466-17.767-34.796-36.885-34.796h-23.993c-19.118 0-35.123 15.329-37.212 34.796 0 1.034 0 2.416 0 3.44v93.204c0 18.084 16.702 33.055 37.212 33.055h23.993c20.521 0 37.192-14.971 37.192-33.055v-93.204c0-1.014-0.307-2.406-0.307-3.44z" fill="#000000"/>
 8 |     </g>
 9 |   </g>
10 |   <g transform="translate(500, 300) rotate(0)">
11 |     <g transform="translate(-256, -256)">
12 |       <path d="M198.277 120.73h28.529c-17.377-9.39-29.225-27.822-29.225-48.702 0-30.546 24.689-55.266 55.296-55.266 30.249 0 54.948 24.719 54.948 55.266 0 20.88-11.837 39.311-29.225 48.702h35.81c34.427 0 62.587 28.16 62.587 62.577v202.404c0 33.351-26.409 60.836-59.801 62.556v-95.262c0-27.791-21.555-50.739-48.322-50.739h-31.303c-26.429 0-48.353 22.948-48.353 50.739v94.577c-30.228-4.147-53.535-30.567-53.535-61.88v-202.393c0.010-34.417 28.17-62.577 62.597-62.577v0zM182.969 178.463v65.71h140.165v-65.71h-140.165zM343.644 57.098v29.901h89.354v-29.901h-89.354zM79.012 57.098v29.901h89.365v-29.901h-89.365zM252.877 29.266c-23.675 0-42.793 19.139-42.793 42.762 0 23.326 19.118 42.445 42.793 42.445 23.286 0 42.425-19.118 42.425-42.445 0-23.623-19.128-42.762-42.424-42.762v0zM302.274 365.538c-2.11-19.466-17.767-34.796-36.885-34.796h-23.993c-19.118 0-35.123 15.329-37.212 34.796 0 1.034 0 2.416 0 3.44v93.204c0 18.084 16.702 33.055 37.212 33.055h23.993c20.521 0 37.192-14.971 37.192-33.055v-93.204c0-1.014-0.307-2.406-0.307-3.44z" fill="#000000"/>
13 |     </g>
14 |   </g>
15 | </svg>


--------------------------------------------------------------------------------
/test/samples/sample1_result.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920.7 1133.7" style="enable-background:new 0 0 1920.7 1133.7;" xml:space="preserve">
 5 |   <style type="text/css">.st0{fill:#E83F46;}</style>
 6 |   <path class="st0" d="M804.5,83 917,83 917,195.5 804.5,195.5z"/>
 7 |   <path class="st0" d="M1630.0708 83.4398L1849.4286 210.0898 1793.1786 307.5148 1573.8208 180.8648z"/>
 8 |   <path class="st0" d="M804.5,268.7 917,268.7 917,381.2 804.5,381.2z"/>
 9 |   <path class="st0" d="M804.5,454.4 917,454.4 917,566.9 804.5,566.9z"/>
10 |   <path class="st0" d="M976.7,262v294.4h294.4V262H976.7z M1221,506.4h-97.1v-97.1h97.1V506.4z"/>
11 |   <path class="st0" d="M1100,83 1212.5,83 1212.5,195.5 1100,195.5z"/>
12 |   <path class="st0" d="M1422 516.1c-6.3-40.5 83.3-114 173-108 90.1 6 173.9 92 175 188 1 85.5-64.1 140.2-79 152-97.2 76.6-220.5 30.1-236 24-84.8-33.6-153-114.3-138-142 22.1-40.7 210.4 57.4 263-10 21.5-27.5 16-77-2-87-19.5-10.8-44.9 29.6-91 26C1458.8 556.8 1425.5 538.3 1422 516.1zM471.6 794.4c-51.8-19.9-94.6-50.8-127.2-91.8 5.8-8.3 12.1-16.3 18.9-24.1 24.2 6.1 43.3 8.1 52.4 8.8l1.2-16c-7.5-0.6-22.3-2.2-41.3-6.4 7.9-8.2 16.4-16.1 25.4-23.7 46.1-39 90.2-56.3 90.6-56.5l-5.8-14.9c-1.9 0.7-47 18.4-95.2 59.2-11.8 10-22.7 20.5-32.8 31.5-9.5-2.7-19.7-5.9-30.2-10-6.9-2.7-13.7-5.5-20.3-8.6-4.1-9.2-7.7-18.5-10.8-28.1 6.4-36.8 19.8-71.4 39.9-103.1 16.9-26.6 38.6-51.1 64.5-73 46.1-39 90.2-56.3 90.6-56.5l-5.8-14.9c-1.9 0.7-47 18.4-95.2 59.2-27.1 22.9-49.9 48.7-67.6 76.7-15.5 24.4-27.3 50.5-35.1 78-5.5-28.5-7-58.6-4.5-89.5 5-60.2 24-103.6 24.1-104l-14.6-6.5c-0.8 1.9-20.2 46.3-25.5 109.2-2.9 35.4-0.8 69.7 6.4 102 1.8 8 3.9 15.9 6.3 23.7 0 0.3-0.1 0.5-0.1 0.8-0.6 3.7-1.1 7.3-1.5 11-33.9-20.2-62.6-46.4-85.7-78.1-22.9-31.5-38.8-66.7-47.2-104.8-6.8-30.8-8.9-63.5-6.1-97.2 5-60.2 24-103.6 24.1-104L149 236c-0.8 1.9-20.2 46.3-25.5 109.2-2.9 35.4-0.8 69.7 6.4 102 8.9 40.2 25.7 77.5 49.9 110.7 25.9 35.5 58.4 64.4 97 86.2-2.5 40.6 3.1 81.1 17 120.9-6.3 17.5-10.9 35.6-13.8 54.2-9.4 59.4-1.1 118.7 24.5 176.4 18.7 42.2 41.8 71.3 50.8 81.8l12.1-10.4c-8.6-10-30.5-37.7-48.4-77.9-24.4-54.8-32.2-111.1-23.3-167.4 1.8-11.2 4.2-22.2 7.3-33 0.5 1.1 1 2.2 1.5 3.3 18.7 42.2 41.8 71.3 50.8 81.8l12.1-10.4c-8.6-10-30.5-37.7-48.4-77.9-3-6.8-5.8-13.6-8.3-20.4 6.4-16.9 14.5-33.1 24.2-48.6 34 41.3 77.9 72.5 130.7 92.8 43.1 16.6 79.9 20.8 93.8 21.9l1.2-16C547.7 814.2 512.7 810.2 471.6 794.4zM323 705.6c-7.4 11.7-14 23.8-19.7 36.2-8.3-29.6-11.9-59.4-10.8-89.4 0.9 0.5 1.8 0.9 2.8 1.4 7.9 16.8 17.4 32.9 28.5 48.1 0.3 0.4 0.6 0.8 0.9 1.2C324.1 703.9 323.5 704.8 323 705.6zM334.3 689.1c-5.7-8.1-11-16.5-15.8-25.1 1.1 0.4 2.3 0.9 3.4 1.3 8.4 3.2 16.6 6 24.4 8.4C342.1 678.7 338.1 683.9 334.3 689.1z"/>
13 |   <path class="st0" d="M1100,939c-80.2-4-242.2-24-239.2-96s151-104,151-104l160.8,54"/>
14 |   <path class="st0" d="M1357.7,989 1457.7,1037 1611.7,1027 1611.7,859 1445.7,795 1387.7,813 1295.7,851"/>
15 | </svg>


--------------------------------------------------------------------------------
/test/samples/sample1.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 1920.7 1133.7" style="enable-background:new 0 0 1920.7 1133.7;" xml:space="preserve">
 5 |   <style type="text/css">.st0{fill:#E83F46;}</style>
 6 |   <rect x="804.5" y="83" class="st0" width="112.5" height="112.5"/>
 7 |   <rect x="1585" y="139.2" transform="matrix(0.866 0.5 -0.5 0.866 327.0608 -829.6074)" class="st0" width="253.3" height="112.5"/>
 8 |   <rect x="804.5" y="268.7" class="st0" width="112.5" height="112.5"/>
 9 |   <rect x="804.5" y="454.4" class="st0" width="112.5" height="112.5"/>
10 |   <path class="st0" d="M976.7,262v294.4h294.4V262H976.7z M1221,506.4h-97.1v-97.1h97.1V506.4z"/>
11 |   <rect x="1100" y="83" class="st0" width="112.5" height="112.5"/>
12 |   <g class="st0" transform="translate(0, 80)">
13 |     <path transform="translate(0, 20)" d="M1422,416.1c-6.3-40.5,83.3-114,173-108c90.1,6,173.9,92,175,188c1,85.5-64.1,140.2-79,152 c-97.2,76.6-220.5,30.1-236,24c-84.8-33.6-153-114.3-138-142c22.1-40.7,210.4,57.4,263-10c21.5-27.5,16-77-2-87 c-19.5-10.8-44.9,29.6-91,26C1458.8,456.8,1425.5,438.3,1422,416.1z"/>
14 |     <path transform="translate(0, 20)" d="M471.6,694.4c-51.8-19.9-94.6-50.8-127.2-91.8c5.8-8.3,12.1-16.3,18.9-24.1c24.2,6.1,43.3,8.1,52.4,8.8l1.2-16 c-7.5-0.6-22.3-2.2-41.3-6.4c7.9-8.2,16.4-16.1,25.4-23.7c46.1-39,90.2-56.3,90.6-56.5l-5.8-14.9c-1.9,0.7-47,18.4-95.2,59.2 c-11.8,10-22.7,20.5-32.8,31.5c-9.5-2.7-19.7-5.9-30.2-10c-6.9-2.7-13.7-5.5-20.3-8.6c-4.1-9.2-7.7-18.5-10.8-28.1 c6.4-36.8,19.8-71.4,39.9-103.1c16.9-26.6,38.6-51.1,64.5-73c46.1-39,90.2-56.3,90.6-56.5l-5.8-14.9c-1.9,0.7-47,18.4-95.2,59.2 c-27.1,22.9-49.9,48.7-67.6,76.7c-15.5,24.4-27.3,50.5-35.1,78c-5.5-28.5-7-58.6-4.5-89.5c5-60.2,24-103.6,24.1-104l-14.6-6.5 c-0.8,1.9-20.2,46.3-25.5,109.2c-2.9,35.4-0.8,69.7,6.4,102c1.8,8,3.9,15.9,6.3,23.7c0,0.3-0.1,0.5-0.1,0.8c-0.6,3.7-1.1,7.3-1.5,11 c-33.9-20.2-62.6-46.4-85.7-78.1c-22.9-31.5-38.8-66.7-47.2-104.8c-6.8-30.8-8.9-63.5-6.1-97.2c5-60.2,24-103.6,24.1-104L149,136 c-0.8,1.9-20.2,46.3-25.5,109.2c-2.9,35.4-0.8,69.7,6.4,102c8.9,40.2,25.7,77.5,49.9,110.7c25.9,35.5,58.4,64.4,97,86.2 c-2.5,40.6,3.1,81.1,17,120.9c-6.3,17.5-10.9,35.6-13.8,54.2c-9.4,59.4-1.1,118.7,24.5,176.4c18.7,42.2,41.8,71.3,50.8,81.8 l12.1-10.4c-8.6-10-30.5-37.7-48.4-77.9c-24.4-54.8-32.2-111.1-23.3-167.4c1.8-11.2,4.2-22.2,7.3-33c0.5,1.1,1,2.2,1.5,3.3 c18.7,42.2,41.8,71.3,50.8,81.8l12.1-10.4c-8.6-10-30.5-37.7-48.4-77.9c-3-6.8-5.8-13.6-8.3-20.4c6.4-16.9,14.5-33.1,24.2-48.6 c34,41.3,77.9,72.5,130.7,92.8c43.1,16.6,79.9,20.8,93.8,21.9l1.2-16C547.7,714.2,512.7,710.2,471.6,694.4z M323,605.6 c-7.4,11.7-14,23.8-19.7,36.2c-8.3-29.6-11.9-59.4-10.8-89.4c0.9,0.5,1.8,0.9,2.8,1.4c7.9,16.8,17.4,32.9,28.5,48.1 c0.3,0.4,0.6,0.8,0.9,1.2C324.1,603.9,323.5,604.8,323,605.6z M334.3,589.1c-5.7-8.1-11-16.5-15.8-25.1c1.1,0.4,2.3,0.9,3.4,1.3 c8.4,3.2,16.6,6,24.4,8.4C342.1,578.7,338.1,583.9,334.3,589.1z"/>
15 |   </g>
16 |   <path class="st0" d="M1100,939c-80.2-4-242.2-24-239.2-96s151-104,151-104l160.8,54"/>
17 |   <polyline class="st0" points="1357.7,989 1457.7,1037 1611.7,1027 1611.7,859 1445.7,795 1387.7,813 1295.7,851 "/>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/test/transform.spec.js:
--------------------------------------------------------------------------------
 1 | /*jshint mocha: true*/
 2 | 
 3 | var expect = require('chai').expect;
 4 | var xmldoc = require('xmldoc');
 5 | var transformFn = require('../src/transform.js');
 6 | 
 7 | // test
 8 | describe('svg-flatten: transform function', function() {
 9 |     it('should apply translate transformation', function() {
10 |         var source = new xmldoc.XmlDocument('<svg><path d="M300,200 350,250" transform="translate(10, 20)"/></svg>');
11 |         var target = new xmldoc.XmlDocument('<svg><path d="M310 220L360 270"/></svg>');
12 | 
13 |         // test
14 |         expect(transformFn(source).toString()).to.be.equal(target.toString());
15 |     });
16 | 
17 |     it('should apply rotate transformation', function() {
18 |         var source = new xmldoc.XmlDocument('<svg><path d="M300,200 350,250" transform="rotate(90)"/></svg>');
19 |         var target = new xmldoc.XmlDocument('<svg><path d="M-200 300L-250 350"/></svg>');
20 | 
21 |         // test
22 |         expect(transformFn(source).toString()).to.be.equal(target.toString());
23 |     });
24 | 
25 |     it('should apply chained transformation', function() {
26 |         var source = new xmldoc.XmlDocument('<svg><path d="M300,200 350,250" transform="translate(10, 0) translate(0, 20)"/></svg>');
27 |         var target = new xmldoc.XmlDocument('<svg><path d="M310 220L360 270"/></svg>');
28 | 
29 |         // test
30 |         expect(transformFn(source).toString()).to.be.equal(target.toString());
31 |     });
32 | 
33 |     it('should work with complex paths', function() {
34 |         var circle = new xmldoc.XmlDocument('<path d="M83,200a17,17 0 1,0 34,0a17,17 0 1,0 -34,0" transform="translate(10, 0)"/>');
35 |         var ellipse = new xmldoc.XmlDocument('<path d="M189,200a11,42 0 1,0 22,0a11,42 0 1,0 -22,0" transform="translate(10, 0)"/>');
36 |         var line = new xmldoc.XmlDocument('<path d="M300,200 350,250" transform="translate(10, 0)"/>');
37 |         var polygon = new xmldoc.XmlDocument('<path d="M100,10 40,198 190,78 10,78 160,198z" transform="translate(10, 0)"/>');
38 |         var polyline = new xmldoc.XmlDocument('<path d="M400,150 450,250 400,300" transform="translate(10, 0)"/>');
39 |         var rect = new xmldoc.XmlDocument('<path d="M500,200 580,200 580,300 500,300z" transform="translate(10, 0)"/>');
40 |         var shape = new xmldoc.XmlDocument('<path d="M1422,416.1c-6.3-40.5,83.3-114,173-108c90.1,6,173.9,92,175,188c1,85.5-64.1,140.2-79,152 c-97.2,76.6-220.5,30.1-236,24c-84.8-33.6-153-114.3-138-142c22.1-40.7,210.4,57.4,263-10c21.5-27.5,16-77-2-87 c-19.5-10.8-44.9,29.6-91,26C1458.8,456.8,1425.5,438.3,1422,416.1z" transform="translate(10, 0)"/>');
41 | 
42 |         // test
43 |         expect(transformFn(circle).toString()).to.be.equal('<path d="M93 200a17 17 0 1 0 34 0 17 17 0 1 0-34 0"/>');
44 |         expect(transformFn(ellipse).toString()).to.be.equal('<path d="M199 200a42 11 90 1 0 22 0 42 11 90 1 0-22 0"/>');
45 |         expect(transformFn(line).toString()).to.be.equal('<path d="M310 200L360 250"/>');
46 |         expect(transformFn(polygon).toString()).to.be.equal('<path d="M110 10L50 198 200 78 20 78 170 198z"/>');
47 |         expect(transformFn(polyline).toString()).to.be.equal('<path d="M410 150L460 250 410 300"/>');
48 |         expect(transformFn(rect).toString()).to.be.equal('<path d="M510 200L590 200 590 300 510 300z"/>');
49 |         expect(transformFn(shape).toString()).to.be.equal('<path d="M1432 416.1c-6.3-40.5 83.3-114 173-108 90.1 6 173.9 92 175 188 1 85.5-64.1 140.2-79 152-97.2 76.6-220.5 30.1-236 24-84.8-33.6-153-114.3-138-142 22.1-40.7 210.4 57.4 263-10 21.5-27.5 16-77-2-87-19.5-10.8-44.9 29.6-91 26C1468.8 456.8 1435.5 438.3 1432 416.1z"/>');
50 |     });
51 | });
52 | 


--------------------------------------------------------------------------------
/test/samples/sample3.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1680" height="1050">
 5 |   <g transform="translate(200, 300) rotate(20)" title="gauche">
 6 |     <g transform="translate(-50, -100)">
 7 |       <style type="text/css">.st0{fill:#D6D5D5;}</style>
 8 |       <g>
 9 |         <path class="st0" d="M1.4,88.6v7.5c0,1.9,1.4,3.8,3.3,3.8h2.7V85.3H4.7C2.8,85.3,1.4,86.7,1.4,88.6z"/>
10 |       </g>
11 |       <g>
12 |         <path class="st0" d="M95.4,85.1h-2.7v14.5h2.7c1.9,0,3.3-1.3,3.3-3.2v-7.5C98.7,86.9,97.3,85.1,95.4,85.1z"/>
13 |       </g>
14 |       <g>
15 |         <path class="st0" d="M1.4,187.6v7.5c0,1.9,1.4,3.8,3.3,3.8h2.7v-14.5H4.7C2.8,184.3,1.4,185.6,1.4,187.6z"/>
16 |       </g>
17 |       <g>
18 |         <path class="st0" d="M95.4,184.1h-2.7v14.5h2.7c1.9,0,3.3-1.3,3.3-3.2v-7.5C98.7,185.9,97.3,184.1,95.4,184.1z"/>
19 |       </g>
20 |       <g>
21 |         <path class="st0" d="M62.5,82.1c0-4.9-3.9-8.9-8.8-8.9V57.1h-7.3v16.1c-4.9,0.1-8.8,4-8.8,8.9v4.3H10.4v11.7h27.1v59.2l-5,9.4
22 |         c-0.6,1.1-0.9,2.4-0.9,3.7v1.1c0,3.7,2.5,6.8,6,7.6v0.6c0,2,0.5,3.9,1.3,5.6H10.4v11.7h79.2v-11.7H61.2c0.8-1.7,1.3-3.6,1.3-5.6
23 |         v-0.6c3.4-0.8,6-3.9,6-7.6v-1.1c0-1.3-0.3-2.6-0.9-3.7l-5-9.4V98.2h27.1V86.5H62.5V82.1z"/>
24 |       </g>
25 |       <g>
26 |         <path class="st0" d="M103.2,35.4c0-0.2-0.1-0.4-0.1-0.5c-0.1-0.2-5.4-17.7-5.4-28.8c0-2.7-2.2-4.9-4.9-4.9s-4.9,2.2-4.9,4.9
27 |         c0,11.8,4.9,28.7,5.7,31.3c0.2,1.7-0.2,3.3-1.3,4.6c-1.1,1.4-2.8,2.1-4.6,2.1H12.2c-1.8,0-3.4-0.8-4.6-2.1c-1.1-1.3-1.5-3-1.3-4.6
28 |         c0.8-2.6,5.7-19.5,5.7-31.3c0-2.7-2.2-4.9-4.9-4.9S2.3,3.4,2.3,6.1c0,11-5.3,28.6-5.4,28.8c-0.1,0.2-0.1,0.4-0.1,0.5
29 |         C-4,40-2.8,44.7,0.2,48.2c3,3.6,7.4,5.6,12,5.6h75.6c4.7,0,9.1-2.1,12-5.6C102.8,44.7,104,40,103.2,35.4z"/>
30 |       </g>
31 |     </g>
32 |   </g>
33 |   <g transform="translate(550, 300) rotate(20)" title="droite">
34 |     <g transform="translate(-50, -100)">
35 |       <style type="text/css">.st0{fill:#D6D5D5;}</style>
36 |       <g>
37 |         <path class="st0" d="M1.4,88.6v7.5c0,1.9,1.4,3.8,3.3,3.8h2.7V85.3H4.7C2.8,85.3,1.4,86.7,1.4,88.6z"/>
38 |       </g>
39 |       <g>
40 |         <path class="st0" d="M95.4,85.1h-2.7v14.5h2.7c1.9,0,3.3-1.3,3.3-3.2v-7.5C98.7,86.9,97.3,85.1,95.4,85.1z"/>
41 |       </g>
42 |       <g>
43 |         <path class="st0" d="M1.4,187.6v7.5c0,1.9,1.4,3.8,3.3,3.8h2.7v-14.5H4.7C2.8,184.3,1.4,185.6,1.4,187.6z"/>
44 |       </g>
45 |       <g>
46 |         <path class="st0" d="M95.4,184.1h-2.7v14.5h2.7c1.9,0,3.3-1.3,3.3-3.2v-7.5C98.7,185.9,97.3,184.1,95.4,184.1z"/>
47 |       </g>
48 |       <g>
49 |         <path class="st0" d="M62.5,82.1c0-4.9-3.9-8.9-8.8-8.9V57.1h-7.3v16.1c-4.9,0.1-8.8,4-8.8,8.9v4.3H10.4v11.7h27.1v59.2l-5,9.4
50 |         c-0.6,1.1-0.9,2.4-0.9,3.7v1.1c0,3.7,2.5,6.8,6,7.6v0.6c0,2,0.5,3.9,1.3,5.6H10.4v11.7h79.2v-11.7H61.2c0.8-1.7,1.3-3.6,1.3-5.6
51 |         v-0.6c3.4-0.8,6-3.9,6-7.6v-1.1c0-1.3-0.3-2.6-0.9-3.7l-5-9.4V98.2h27.1V86.5H62.5V82.1z"/>
52 |       </g>
53 |       <g>
54 |         <path class="st0" d="M103.2,35.4c0-0.2-0.1-0.4-0.1-0.5c-0.1-0.2-5.4-17.7-5.4-28.8c0-2.7-2.2-4.9-4.9-4.9s-4.9,2.2-4.9,4.9
55 |         c0,11.8,4.9,28.7,5.7,31.3c0.2,1.7-0.2,3.3-1.3,4.6c-1.1,1.4-2.8,2.1-4.6,2.1H12.2c-1.8,0-3.4-0.8-4.6-2.1c-1.1-1.3-1.5-3-1.3-4.6
56 |         c0.8-2.6,5.7-19.5,5.7-31.3c0-2.7-2.2-4.9-4.9-4.9S2.3,3.4,2.3,6.1c0,11-5.3,28.6-5.4,28.8c-0.1,0.2-0.1,0.4-0.1,0.5
57 |         C-4,40-2.8,44.7,0.2,48.2c3,3.6,7.4,5.6,12,5.6h75.6c4.7,0,9.1-2.1,12-5.6C102.8,44.7,104,40,103.2,35.4z"/>
58 |       </g>
59 |     </g>
60 |   </g>
61 | </svg>
62 | 


--------------------------------------------------------------------------------
/src/pathify.js:
--------------------------------------------------------------------------------
  1 | /*jshint singleGroups: false*/
  2 | 
  3 | function _convertEllipse(cx = 0, cy = 0, rx = 0, ry = 0) {
  4 |     return "M" + (cx - rx) + "," + cy + "a" + rx + "," + ry + " 0 1,0 " + (rx * 2) + ",0a" + rx + "," + ry + " 0 1,0 " + (rx * -2) + ",0";
  5 | }
  6 | 
  7 | function _convertPoints(points) {
  8 |     var path = "";
  9 | 
 10 |     for (var i=0; i<points.length; i+=2) {
 11 |         var prefix = path.length ? ' ' : 'M';
 12 |         path += prefix + points[i] + ',' + points[i+1];
 13 |     }
 14 | 
 15 |     return path;
 16 | }
 17 | 
 18 | function convertGroup(dom) {
 19 |     var newChildren = [];
 20 | 
 21 |     dom.children.forEach(function (child) {
 22 |         newChildren.push(pathify(child));
 23 |     });
 24 | 
 25 |     dom.children = newChildren;
 26 | 
 27 |     if (newChildren.length > 0) {
 28 |         dom.firstChild = newChildren[0];
 29 |         dom.lastChild = newChildren[newChildren.length - 1];
 30 |     }
 31 | 
 32 |     return dom;
 33 | }
 34 | 
 35 | function convertCircle(dom) {
 36 |     var path = _convertEllipse(dom.attr.cx, dom.attr.cy, dom.attr.r, dom.attr.r);
 37 | 
 38 |     delete dom.attr.cx;
 39 |     delete dom.attr.cy;
 40 |     delete dom.attr.r;
 41 | 
 42 |     dom.name = 'path';
 43 |     dom.attr.d = path;
 44 | 
 45 |     return dom;
 46 | }
 47 | 
 48 | function convertEllipse(dom) {
 49 |     var path = _convertEllipse(dom.attr.cx, dom.attr.cy, dom.attr.rx, dom.attr.ry);
 50 | 
 51 |     delete dom.attr.cx;
 52 |     delete dom.attr.cy;
 53 |     delete dom.attr.rx;
 54 |     delete dom.attr.ry;
 55 | 
 56 |     dom.name = 'path';
 57 |     dom.attr.d = path;
 58 | 
 59 |     return dom;
 60 | }
 61 | 
 62 | function convertLine(dom) {
 63 |     var path = _convertPoints([dom.attr.x1, dom.attr.y1, dom.attr.x2, dom.attr.y2]);
 64 | 
 65 |     delete dom.attr.x1;
 66 |     delete dom.attr.y1;
 67 |     delete dom.attr.x2;
 68 |     delete dom.attr.y2;
 69 | 
 70 |     dom.name = 'path';
 71 |     dom.attr.d = path;
 72 | 
 73 |     return dom;
 74 | }
 75 | 
 76 | function convertPolygon(dom) {
 77 |     var points = dom.attr.points.trim().split(/[\s,]+/);
 78 |     var path = _convertPoints(points) + "z";
 79 | 
 80 |     delete dom.attr.points;
 81 | 
 82 |     dom.name = 'path';
 83 |     dom.attr.d = path;
 84 | 
 85 |     return dom;
 86 | }
 87 | 
 88 | function convertPolyline(dom) {
 89 |     var points = dom.attr.points.trim().split(/[\s,]+/);
 90 |     var path = _convertPoints(points);
 91 | 
 92 |     delete dom.attr.points;
 93 | 
 94 |     dom.name = 'path';
 95 |     dom.attr.d = path;
 96 | 
 97 |     return dom;
 98 | }
 99 | 
100 | function convertRect(dom) {
101 |     var x = parseFloat(dom.attr.x || 0);
102 |     var y = parseFloat(dom.attr.y || 0);
103 |     var width = parseFloat(dom.attr.width);
104 |     var height = parseFloat(dom.attr.height);
105 | 
106 |     var points = [];
107 |     points.push(x, y);
108 |     points.push(x + width, y);
109 |     points.push(x + width, y + height);
110 |     points.push(x, y + height);
111 |     var path = _convertPoints(points) + "z";
112 | 
113 |     delete dom.attr.x;
114 |     delete dom.attr.y;
115 |     delete dom.attr.width;
116 |     delete dom.attr.height;
117 | 
118 |     dom.name = 'path';
119 |     dom.attr.d = path;
120 | 
121 |     return dom;
122 | }
123 | 
124 | function pathify(dom) {
125 |     if (dom.name === 'svg') {
126 |         return convertGroup(dom);
127 |     } else if (dom.name === 'circle') {
128 |         return convertCircle(dom);
129 |     } else if (dom.name === 'ellipse') {
130 |         return convertEllipse(dom);
131 |     } else if (dom.name === 'line') {
132 |         return convertLine(dom);
133 |     } else if (dom.name === 'polygon') {
134 |         return convertPolygon(dom);
135 |     } else if (dom.name === 'polyline') {
136 |         return convertPolyline(dom);
137 |     } else if (dom.name === 'rect') {
138 |         return convertRect(dom);
139 |     } else if (dom.name === 'g') {
140 |         return convertGroup(dom);
141 |     } else {
142 |         return dom;
143 |     }
144 | }
145 | 
146 | module.exports = pathify;
147 | 


--------------------------------------------------------------------------------
/test/lib.spec.js:
--------------------------------------------------------------------------------
  1 | /*jshint mocha: true*/
  2 | /*jshint expr: true*/
  3 | /*jshint multistr: true*/
  4 | 
  5 | var expect = require('chai').expect;
  6 | var sinon = require('sinon');
  7 | var proxyquire = require('proxyquire');
  8 | 
  9 | // sample file
 10 | var file = '<?xml version="1.0" encoding="utf-8"?> \
 11 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> \
 12 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> \
 13 | <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 1920.7 1133.7" style="enable-background:new 0 0 1920.7 1133.7;" xml:space="preserve"> \
 14 |     <rect x="804.5" y="83" class="st0" width="112.5" height="112.5" transform="translate(0, 100)" /> \
 15 | </svg>';
 16 | 
 17 | // test
 18 | describe('svg-flatten lib', function() {
 19 |     var parse;
 20 |     var pathify;
 21 |     var transform;
 22 |     var flatten;
 23 |     var lib;
 24 | 
 25 |     beforeEach(function () {
 26 |         parse = sinon.stub();
 27 |         pathify = sinon.stub();
 28 |         transform = sinon.stub();
 29 |         flatten = sinon.stub();
 30 | 
 31 |         parse.withArgs(file).returns(file);
 32 | 
 33 |         // inject stubs into library
 34 |         lib = proxyquire('../src/lib.js', {
 35 |             './parse.js': parse,
 36 |             './pathify.js': pathify,
 37 |             './transform.js': transform,
 38 |             './flatten.js': flatten
 39 |         });
 40 |     });
 41 | 
 42 |     it('should wrap the source', function() {
 43 |         var wrapper = lib(file);
 44 | 
 45 |         // test
 46 |         expect(wrapper).to.be.an('object');
 47 |         expect(wrapper._value).to.be.equal(file);
 48 |     });
 49 | 
 50 |     it('should apply the parse filter', function() {
 51 |         // init mocks
 52 |         var parsedFile = {
 53 |             parsed: true
 54 |         };
 55 | 
 56 |         parse.withArgs(file).returns(parsedFile);
 57 | 
 58 |         // test
 59 |         expect(lib(file)._value).to.be.equal(parsedFile);
 60 |         expect(parse.calledOnce).to.be.true;
 61 |     });
 62 | 
 63 |     it('should apply the pathify filter', function() {
 64 |         var wrapper = lib(file);
 65 | 
 66 |         // init mocks
 67 |         var pathifiedFile = {
 68 |             pathified: true
 69 |         };
 70 | 
 71 |         pathify.withArgs(file).returns(pathifiedFile);
 72 | 
 73 |         // test
 74 |         expect(wrapper.pathify()._value).to.be.equal(pathifiedFile);
 75 |         expect(pathify.calledOnce).to.be.true;
 76 |     });
 77 | 
 78 |     it('should apply the transform filter', function() {
 79 |         var wrapper = lib(file);
 80 | 
 81 |         // init mocks
 82 |         var transformedFile = {
 83 |             transformed: true
 84 |         };
 85 | 
 86 |         transform.withArgs(file).returns(transformedFile);
 87 | 
 88 |         // test
 89 |         expect(wrapper.transform()._value).to.be.equal(transformedFile);
 90 |         expect(transform.calledOnce).to.be.true;
 91 |     });
 92 | 
 93 |     it('should apply the flatten filter', function() {
 94 |         var wrapper = lib(file);
 95 | 
 96 |         // init mocks
 97 |         var flatFile = {
 98 |             flat: true
 99 |         };
100 | 
101 |         flatten.withArgs(file).returns(flatFile);
102 | 
103 |         // test
104 |         expect(wrapper.flatten()._value).to.be.equal(flatFile);
105 |         expect(flatten.calledOnce).to.be.true;
106 |     });
107 | 
108 |     it('should chain filters', function() {
109 |         var wrapper = lib(file);
110 | 
111 |         // init mocks
112 |         var pathifiedFile = {
113 |             pathified: true
114 |         };
115 | 
116 |         var flatFile = {
117 |             flat: true
118 |         };
119 | 
120 |         pathify.withArgs(file).returns(pathifiedFile);
121 |         flatten.withArgs(pathifiedFile).returns(flatFile);
122 | 
123 |         // test
124 |         expect(wrapper.pathify().flatten()._value).to.be.equal(flatFile);
125 |         expect(parse.calledOnce).to.be.true;
126 |         expect(pathify.calledOnce).to.be.true;
127 |         expect(flatten.calledOnce).to.be.true;
128 |     });
129 | });
130 | 


--------------------------------------------------------------------------------
/test/pathify.spec.js:
--------------------------------------------------------------------------------
  1 | /*jshint mocha: true*/
  2 | 
  3 | var expect = require('chai').expect;
  4 | var xmldoc = require('xmldoc');
  5 | var pathifyFn = require('../src/pathify.js');
  6 | 
  7 | // test
  8 | describe('svg-flatten: pathify function', function() {
  9 |     it('should convert circle', function() {
 10 |         var source = new xmldoc.XmlDocument('<svg><circle cx="100" cy="200" r="17"/></svg>');
 11 |         var target = new xmldoc.XmlDocument('<svg><path d="M83,200a17,17 0 1,0 34,0a17,17 0 1,0 -34,0"/></svg>');
 12 | 
 13 |         // test
 14 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 15 |     });
 16 | 
 17 |     it('should convert circle without center point', function() {
 18 |         var source = new xmldoc.XmlDocument('<svg><circle r="17"/></svg>');
 19 |         var target = new xmldoc.XmlDocument('<svg><path d="M-17,0a17,17 0 1,0 34,0a17,17 0 1,0 -34,0"/></svg>');
 20 | 
 21 |         // test
 22 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 23 |     });
 24 | 
 25 |     it('should convert circle without radius', function() {
 26 |         var source = new xmldoc.XmlDocument('<svg><circle cx="100" cy="200"/></svg>');
 27 |         var target = new xmldoc.XmlDocument('<svg><path d="M100,200a0,0 0 1,0 0,0a0,0 0 1,0 0,0"/></svg>');
 28 | 
 29 |         // test
 30 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 31 |     });
 32 | 
 33 |     it('should convert ellipse', function() {
 34 |         var source = new xmldoc.XmlDocument('<svg><ellipse cx="200" cy="200" rx="11" ry="42"/></svg>');
 35 |         var target = new xmldoc.XmlDocument('<svg><path d="M189,200a11,42 0 1,0 22,0a11,42 0 1,0 -22,0"/></svg>');
 36 | 
 37 |         // test
 38 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 39 |     });
 40 | 
 41 |     it('should convert line', function() {
 42 |         var source = new xmldoc.XmlDocument('<svg><line x1="300" y1="200" x2="350" y2="250"/></svg>');
 43 |         var target = new xmldoc.XmlDocument('<svg><path d="M300,200 350,250"/></svg>');
 44 | 
 45 |         // test
 46 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 47 |     });
 48 | 
 49 |     it('should convert polygons', function() {
 50 |         var source = new xmldoc.XmlDocument('<svg><polygon points="100,10 40,198 190,78 10,78 160,198"/></svg>');
 51 |         var target = new xmldoc.XmlDocument('<svg><path d="M100,10 40,198 190,78 10,78 160,198z"/></svg>');
 52 | 
 53 |         // test
 54 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 55 |     });
 56 | 
 57 |     it('should convert polyline', function() {
 58 |         var source = new xmldoc.XmlDocument('<svg><polyline style="fill:none" points="400,150 450,250 400,300"/></svg>');
 59 |         var target = new xmldoc.XmlDocument('<svg><path style="fill:none" d="M400,150 450,250 400,300"/></svg>');
 60 | 
 61 |         // test
 62 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 63 |     });
 64 | 
 65 |     it('should convert polyline with extra whitespaces', function() {
 66 |         var source = new xmldoc.XmlDocument('<svg><polyline style="fill:none" points="400,150 450,250 400,300  "/></svg>');
 67 |         var target = new xmldoc.XmlDocument('<svg><path style="fill:none" d="M400,150 450,250 400,300"/></svg>');
 68 | 
 69 |         // test
 70 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 71 |     });
 72 | 
 73 |     it('should convert rect', function() {
 74 |         var source = new xmldoc.XmlDocument('<svg><rect x="500" y="200" width="80" height="100"/></svg>');
 75 |         var target = new xmldoc.XmlDocument('<svg><path d="M500,200 580,200 580,300 500,300z"/></svg>');
 76 | 
 77 |         // test
 78 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 79 |     });
 80 | 
 81 |     it('should preserve groups', function() {
 82 |         var source = new xmldoc.XmlDocument('<svg viewBox="0 0 1920.7 1133.7"><path d="M976.7,262v294.4h294.4V262H976.7z M1221,506.4h-97.1v-97.1h97.1V506.4z"/></svg>');
 83 | 
 84 |         // test
 85 |         expect(pathifyFn(source)).to.be.equal(source);
 86 |     });
 87 |     it('should preserve nested groups', function() {
 88 |         var source = new xmldoc.XmlDocument('<svg><g transform="rotate(20)"><g transform="rotate(30)"><line x1="300" y1="200" x2="350" y2="250"/></g></g></svg>');
 89 |         var target = new xmldoc.XmlDocument('<svg><g transform="rotate(20)"><g transform="rotate(30)"><path d="M300,200 350,250"/></g></g></svg>');
 90 | 
 91 |         // test
 92 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
 93 |     });
 94 | 
 95 |     it('should should convert group children', function() {
 96 |         var source = new xmldoc.XmlDocument('<svg><g transform="rotate(45)"><line x1="300" y1="200" x2="350" y2="250"/><circle cx="100" cy="200" r="17"/></g></svg>');
 97 |         var target = new xmldoc.XmlDocument('<svg><g transform="rotate(45)"><path d="M300,200 350,250"/><path d="M83,200a17,17 0 1,0 34,0a17,17 0 1,0 -34,0"/></g></svg>');
 98 | 
 99 |         // test
100 |         expect(pathifyFn(source).toString()).to.be.equal(target.toString());
101 |     });
102 | });
103 | 


--------------------------------------------------------------------------------
/test/parse.spec.js:
--------------------------------------------------------------------------------
 1 | /*jshint mocha: true*/
 2 | /*jshint expr: true*/
 3 | /*jshint multistr: true*/
 4 | 
 5 | var expect = require('chai').expect;
 6 | var parseFn = require('../src/parse.js');
 7 | 
 8 | // sample files
 9 | var file1 = '<?xml version="1.0" encoding="utf-8"?> \
10 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> \
11 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> \
12 | <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 1920.7 1133.7" style="enable-background:new 0 0 1920.7 1133.7;" xml:space="preserve"> \
13 |     <rect x="804.5" y="83" class="st0" width="112.5" height="112.5"/> \
14 | </svg>';
15 | 
16 | var file2 = '<?xml version="1.0" encoding="utf-8"?> \
17 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> \
18 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> \
19 | <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 1920.7 1133.7" style="enable-background:new 0 0 1920.7 1133.7;" xml:space="preserve"> \
20 |     <style type="text/css"> \
21 |         .st0{fill:#E83F46;} \
22 |     </style> \
23 |     <rect x="804.5" y="83" class="st0" width="112.5" height="112.5"/> \
24 |     <rect x="1585" y="139.2" transform="matrix(0.866 0.5 -0.5 0.866 327.0608 -829.6074)" class="st0" width="253.3" height="112.5"/> \
25 |     <rect x="804.5" y="268.7" class="st0" width="112.5" height="112.5"/> \
26 |     <rect x="804.5" y="454.4" class="st0" width="112.5" height="112.5"/> \
27 |     <path class="st0" d="M976.7,262v294.4h294.4V262H976.7z M1221,506.4h-97.1v-97.1h97.1V506.4z"/> \
28 |     <rect x="1100" y="83" class="st0" width="112.5" height="112.5"/> \
29 |     <g transform="translate(0, 100)"> \
30 |         <path class="st0" d="M1422,416.1c-6.3-40.5,83.3-114,173-108c90.1,6,173.9,92,175,188c1,85.5-64.1,140.2-79,152 c-97.2,76.6-220.5,30.1-236,24c-84.8-33.6-153-114.3-138-142c22.1-40.7,210.4,57.4,263-10c21.5-27.5,16-77-2-87 c-19.5-10.8-44.9,29.6-91,26C1458.8,456.8,1425.5,438.3,1422,416.1z"/> \
31 |         <path class="st0" d="M471.6,694.4c-51.8-19.9-94.6-50.8-127.2-91.8c5.8-8.3,12.1-16.3,18.9-24.1c24.2,6.1,43.3,8.1,52.4,8.8l1.2-16 c-7.5-0.6-22.3-2.2-41.3-6.4c7.9-8.2,16.4-16.1,25.4-23.7c46.1-39,90.2-56.3,90.6-56.5l-5.8-14.9c-1.9,0.7-47,18.4-95.2,59.2 c-11.8,10-22.7,20.5-32.8,31.5c-9.5-2.7-19.7-5.9-30.2-10c-6.9-2.7-13.7-5.5-20.3-8.6c-4.1-9.2-7.7-18.5-10.8-28.1 c6.4-36.8,19.8-71.4,39.9-103.1c16.9-26.6,38.6-51.1,64.5-73c46.1-39,90.2-56.3,90.6-56.5l-5.8-14.9c-1.9,0.7-47,18.4-95.2,59.2 c-27.1,22.9-49.9,48.7-67.6,76.7c-15.5,24.4-27.3,50.5-35.1,78c-5.5-28.5-7-58.6-4.5-89.5c5-60.2,24-103.6,24.1-104l-14.6-6.5 c-0.8,1.9-20.2,46.3-25.5,109.2c-2.9,35.4-0.8,69.7,6.4,102c1.8,8,3.9,15.9,6.3,23.7c0,0.3-0.1,0.5-0.1,0.8c-0.6,3.7-1.1,7.3-1.5,11 c-33.9-20.2-62.6-46.4-85.7-78.1c-22.9-31.5-38.8-66.7-47.2-104.8c-6.8-30.8-8.9-63.5-6.1-97.2c5-60.2,24-103.6,24.1-104L149,136 c-0.8,1.9-20.2,46.3-25.5,109.2c-2.9,35.4-0.8,69.7,6.4,102c8.9,40.2,25.7,77.5,49.9,110.7c25.9,35.5,58.4,64.4,97,86.2 c-2.5,40.6,3.1,81.1,17,120.9c-6.3,17.5-10.9,35.6-13.8,54.2c-9.4,59.4-1.1,118.7,24.5,176.4c18.7,42.2,41.8,71.3,50.8,81.8 l12.1-10.4c-8.6-10-30.5-37.7-48.4-77.9c-24.4-54.8-32.2-111.1-23.3-167.4c1.8-11.2,4.2-22.2,7.3-33c0.5,1.1,1,2.2,1.5,3.3 c18.7,42.2,41.8,71.3,50.8,81.8l12.1-10.4c-8.6-10-30.5-37.7-48.4-77.9c-3-6.8-5.8-13.6-8.3-20.4c6.4-16.9,14.5-33.1,24.2-48.6 c34,41.3,77.9,72.5,130.7,92.8c43.1,16.6,79.9,20.8,93.8,21.9l1.2-16C547.7,714.2,512.7,710.2,471.6,694.4z M323,605.6 c-7.4,11.7-14,23.8-19.7,36.2c-8.3-29.6-11.9-59.4-10.8-89.4c0.9,0.5,1.8,0.9,2.8,1.4c7.9,16.8,17.4,32.9,28.5,48.1 c0.3,0.4,0.6,0.8,0.9,1.2C324.1,603.9,323.5,604.8,323,605.6z M334.3,589.1c-5.7-8.1-11-16.5-15.8-25.1c1.1,0.4,2.3,0.9,3.4,1.3 c8.4,3.2,16.6,6,24.4,8.4C342.1,578.7,338.1,583.9,334.3,589.1z"/> \
32 |     </g> \
33 |     <path class="st0" d="M1100,939c-80.2-4-242.2-24-239.2-96s151-104,151-104l160.8,54"/> \
34 |     <polyline class="st0" points="1357.7,989 1457.7,1037 1611.7,1027 1611.7,859 1445.7,795 1387.7,813 1295.7,851 "/> \
35 | </svg>';
36 | 
37 | // test
38 | describe('svg-flatten: parse function', function() {
39 |     it('should successfully parse a simple svg', function() {
40 |         var dom = parseFn(file1);
41 | 
42 |         // test root node
43 |         expect(dom.name).to.be.equal('svg');
44 |         expect(dom.attr.viewBox).to.be.equal('0 0 1920.7 1133.7');
45 | 
46 |         // test child nodes
47 |         expect(dom.children.length).to.be.equal(1);
48 |         expect(dom.children[0].name).to.be.equal('rect');
49 |     });
50 | 
51 |     it('should successfully parse a complex svg', function() {
52 |         var dom = parseFn(file2);
53 | 
54 |         // test root node
55 |         expect(dom.name).to.be.equal('svg');
56 |         expect(dom.attr.viewBox).to.be.equal('0 0 1920.7 1133.7');
57 | 
58 |         // test child nodes
59 |         expect(dom.children.length).to.be.equal(10);
60 |         expect(dom.children[0].name).to.be.equal('style');
61 |         expect(dom.children[1].name).to.be.equal('rect');
62 |         expect(dom.children[7].attr.transform).to.be.equal('translate(0, 100)');
63 |     });
64 | 
65 |     it('should not fail when the source is invalid', function() {
66 |         var dom = parseFn("invalid input");
67 | 
68 |         // test root node
69 |         expect(dom.name).to.be.equal('invalid');
70 |         expect(dom.attr.reason).not.to.be.empty;
71 |     });
72 | });
73 | 


--------------------------------------------------------------------------------
/test/samples/sample3_result.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1680" height="1050">
5 |   <path title="gauche" d="M158.2299682637 272.6653251574l-2.5651510749 7.0476946559c-0.6498382723 1.7854159795 0.0158931245 4.0496601596 1.8013091039 4.699498432l2.5371700762 0.9234543869L164.9967904614 271.6164603688 162.4596203853 270.6930059818C160.6742044058 270.0431677095 158.879806536 270.8799091779 158.2299682637 272.6653251574zM247.7581451192 301.5262944573l-2.5371700761-0.923454387-4.9592920782 13.6255430014 2.5371700761 0.923454387c1.7854159795 0.6498382723 3.5456118349-0.092933934 4.1954501072-1.8783499136l2.565151075-7.0476946559C250.2434945098 304.3464076477 249.5435610987 302.1761327296 247.7581451192 301.5262944573zM124.3699740745 365.6948946152l-2.565151075 7.0476946559c-0.6498382723 1.7854159795 0.0158931245 4.0496601596 1.801309104 4.699498432l2.5371700761 0.923454387 4.9592920782-13.6255430014L128.5654241817 363.8165447017C126.8142102166 363.0727371673 125.0540143611 363.8155093736 124.3699740745 365.6948946152zM213.89815093 394.5558639151l-2.5371700761-0.923454387-4.9592920783 13.6255430014 2.5371700762 0.923454387c1.7854159795 0.6498382723 3.5456118349-0.092933934 4.1954501072-1.8783499136l2.5651510749-7.0476946559C216.3835003206 397.3759771055 215.6835669095 395.2057021874 213.89815093 394.5558639151zM217.8683183254 287.4547538795c1.6758987023-4.6044938419-0.6208219455-9.697142884-5.2253157874-11.3730415863L218.1495268456 260.9526610986l-6.8597561318-2.4967470463-5.5065243075 15.1290511947c-4.6386958562-1.5819294402-9.6373756362 0.7489932219-11.3132743385 5.3534870637l-1.4706866163 4.0406782694L167.4396461661 273.6761826816l-4.0016356769 10.9944036632 25.4656700233 9.2687458841-20.2475924849 55.6298031506-7.9134524512 7.1230099187c-0.9400377301 0.8284497969-1.6665717027 1.9474441609-2.111197889 3.1690445679l-0.3762221576 1.0336618829c-1.2654745303 3.4768626969 0.0234945774 7.2449601797 3.0388026354 9.1937847779l-0.205212086 0.5638155725c-0.6840402867 1.8793852416-0.8640322486 3.8358112927-0.6937123956 5.7069048627L133.6138539912 366.6117828773l-4.0016356769 10.9944036632 74.4236555662 27.0879953514 4.0016356769-10.9944036632L181.3502391271 383.9864061583c1.3331883403-1.3238613407 2.452872923-2.9382672485 3.1369132097-4.8176524901l0.205212086-0.5638155725c3.4685710253 0.4111143907 6.9720342837-1.6126803611 8.237508814-5.089543058l0.3762221576-1.0336618828c0.4446261863-1.221600407 0.6073445864-2.545806857 0.4197511716-3.7846808259l-1.4834737567-10.5432113521L212.4557632799 302.6180070885l25.4656700233 9.2687458841L241.9230689801 300.8923493094 216.3634296947 291.589401411 217.8683183254 287.4547538795zM272.0861486846 257.4913283222c0.0684040287-0.1879385242 0.0428387953-0.4100790626 0.0770408096-0.5040483248-0.0255652334-0.2221405385 0.9794163846-18.4794681619 4.7758399756-28.9100562526 0.923454387-2.5371700761-0.3914250634-5.3569381572-2.9285951396-6.2803925441s-5.3569381572 0.3914250634-6.2803925441 2.9285951395c-4.0358376912 11.0883729253-5.2114842716 28.6450769189-5.3489825476 31.3618938476-0.3934957195 1.665881484-1.3166049971 3.0325816199-2.7948930664 3.8779598693-1.5124900835 0.9393475114-3.3493816392 1.0156981023-5.0408283566 0.4000618443L183.5985449462 234.5428210804c-1.6914467174-0.615636258-2.921338796-1.9146225839-3.6043437546-3.546647163-0.5890356965-1.5978225647-0.3834785012-3.3321080773 0.3516922522-4.7672122419 1.6410064693-2.1695846994 12.0256407333-16.3744912884 16.0614784246-27.4628642137 0.923454387-2.5371700761-0.3914250634-5.3569381572-2.9285951395-6.2803925441S188.2158078338 192.9113319954 187.2923534468 195.4485020716c-3.7622215766 10.3366188286-14.7621469893 25.0625021949-14.92452028 25.2162387046-0.1623732907 0.1537365098-0.2307773194 0.341675034-0.2649793338 0.4356442961C169.7778070771 225.1493550133 169.2979435484 229.9763345029 170.9199509091 234.2913191057c1.5878053464 4.4089538648 5.0384125912 7.793227737 9.3609986468 9.3665203963l71.0407621315 25.8567228354c4.4165553177 1.6074946736 9.2694451501 1.1390288006 13.191624252-1.1580369565C268.5294843034 266.0936616381 271.264610122 262.0875304924 272.0861486846 257.4913283222z"/>
6 |   <path title="droite" d="M508.2299682637 272.6653251574l-2.5651510749 7.0476946559c-0.6498382723 1.7854159795 0.0158931245 4.0496601596 1.8013091039 4.699498432l2.5371700762 0.9234543869L514.9967904614 271.6164603688 512.4596203853 270.6930059818C510.6742044058 270.0431677095 508.879806536 270.8799091779 508.2299682637 272.6653251574zM597.7581451192 301.5262944573l-2.5371700761-0.923454387-4.9592920782 13.6255430014 2.5371700761 0.923454387c1.7854159795 0.6498382723 3.5456118349-0.092933934 4.1954501072-1.8783499136l2.565151075-7.0476946559C600.2434945098 304.3464076477 599.5435610987 302.1761327296 597.7581451192 301.5262944573zM474.3699740745 365.6948946152l-2.565151075 7.0476946559c-0.6498382723 1.7854159795 0.0158931245 4.0496601596 1.801309104 4.699498432l2.5371700761 0.923454387 4.9592920782-13.6255430014L478.5654241817 363.8165447017C476.8142102166 363.0727371673 475.0540143611 363.8155093736 474.3699740745 365.6948946152zM563.89815093 394.5558639151l-2.5371700761-0.923454387-4.9592920783 13.6255430014 2.5371700762 0.923454387c1.7854159795 0.6498382723 3.5456118349-0.092933934 4.1954501072-1.8783499136l2.5651510749-7.0476946559C566.3835003206 397.3759771055 565.6835669095 395.2057021874 563.89815093 394.5558639151zM567.8683183254 287.4547538795c1.6758987023-4.6044938419-0.6208219455-9.697142884-5.2253157874-11.3730415863L568.1495268456 260.9526610986l-6.8597561318-2.4967470463-5.5065243075 15.1290511947c-4.6386958562-1.5819294402-9.6373756362 0.7489932219-11.3132743385 5.3534870637l-1.4706866163 4.0406782694L517.4396461661 273.6761826816l-4.0016356769 10.9944036632 25.4656700233 9.2687458841-20.2475924849 55.6298031506-7.9134524512 7.1230099187c-0.9400377301 0.8284497969-1.6665717027 1.9474441609-2.111197889 3.1690445679l-0.3762221576 1.0336618829c-1.2654745303 3.4768626969 0.0234945774 7.2449601797 3.0388026354 9.1937847779l-0.205212086 0.5638155725c-0.6840402867 1.8793852416-0.8640322486 3.8358112927-0.6937123956 5.7069048627L483.6138539912 366.6117828773l-4.0016356769 10.9944036632 74.4236555662 27.0879953514 4.0016356769-10.9944036632L531.3502391271 383.9864061583c1.3331883403-1.3238613407 2.452872923-2.9382672485 3.1369132097-4.8176524901l0.205212086-0.5638155725c3.4685710253 0.4111143907 6.9720342837-1.6126803611 8.237508814-5.089543058l0.3762221576-1.0336618828c0.4446261863-1.221600407 0.6073445864-2.545806857 0.4197511716-3.7846808259l-1.4834737567-10.5432113521L562.4557632799 302.6180070885l25.4656700233 9.2687458841L591.9230689801 300.8923493094 566.3634296947 291.589401411 567.8683183254 287.4547538795zM622.0861486846 257.4913283222c0.0684040287-0.1879385242 0.0428387953-0.4100790626 0.0770408096-0.5040483248-0.0255652334-0.2221405385 0.9794163846-18.4794681619 4.7758399756-28.9100562526 0.923454387-2.5371700761-0.3914250634-5.3569381572-2.9285951396-6.2803925441s-5.3569381572 0.3914250634-6.2803925441 2.9285951395c-4.0358376912 11.0883729253-5.2114842716 28.6450769189-5.3489825476 31.3618938476-0.3934957195 1.665881484-1.3166049971 3.0325816199-2.7948930664 3.8779598693-1.5124900835 0.9393475114-3.3493816392 1.0156981023-5.0408283566 0.4000618443L533.5985449462 234.5428210804c-1.6914467174-0.615636258-2.921338796-1.9146225839-3.6043437546-3.546647163-0.5890356965-1.5978225647-0.3834785012-3.3321080773 0.3516922522-4.7672122419 1.6410064693-2.1695846994 12.0256407333-16.3744912884 16.0614784246-27.4628642137 0.923454387-2.5371700761-0.3914250634-5.3569381572-2.9285951395-6.2803925441S538.2158078338 192.9113319954 537.2923534468 195.4485020716c-3.7622215766 10.3366188286-14.7621469893 25.0625021949-14.92452028 25.2162387046-0.1623732907 0.1537365098-0.2307773194 0.341675034-0.2649793338 0.4356442961C519.7778070771 225.1493550133 519.2979435484 229.9763345029 520.9199509091 234.2913191057c1.5878053464 4.4089538648 5.0384125912 7.793227737 9.3609986468 9.3665203963l71.0407621315 25.8567228354c4.4165553177 1.6074946736 9.2694451501 1.1390288006 13.191624252-1.1580369565C618.5294843034 266.0936616381 621.264610122 262.0875304924 622.0861486846 257.4913283222z"/>
7 | </svg>


--------------------------------------------------------------------------------