CODEWITHSUNDEEP
javascriptjsonsvg
oxe
oxe

Reputation: 85

SVG path convert into JSON

I have this path:

<path id="secnb1l1" class="lungon"
    fill="none" stroke="black" stroke-width="1"
    d="M 93.00,444.00
       C 93.00,444.00 114.00,506.00 114.00,506.00
         102.30,512.28 100.00,518.71 100.00,531.00
         100.00,531.00 86.00,534.00 86.00,534.00
         86.00,534.00 68.95,485.00 68.95,485.00
         68.95,485.00 58.00,452.00 58.00,452.00
         58.00,452.00 93.00,444.00 93.00,444.00 Z
       M 75.00,458.00
       C 75.00,458.00 79.00,458.00 79.00,458.00
         78.99,466.29 79.26,463.93 76.00,471.00
         76.00,471.00 86.00,471.00 86.00,471.00
         82.12,462.60 83.00,464.37 83.00,455.00
         83.00,455.00 75.00,458.00 75.00,458.00 Z" />

And I want to convert it into JSON. Just like on this LINK

quick example of SVG converted into JSON:

(SVG):

<path d=" M 10 25
        L 10 75
        L 60 75
        L 10 25"
        stroke="red" stroke-width="2" fill="none" />

(JSON):

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
             { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
             { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

I'm afraid that there's no generator to make my works easier. It's a pain to convert it manually.

Thanks in advance for your help :)

EDIT

I'm using d3.js for zoom and pan.

Upvotes: 1

Views: 3331

Answers (3)

Rexfont
Rexfont

Reputation: 1

You can head over here, we have both node packages and API, as well as a simple web interface.

Github: https://github.com/Rexfont/svgJson

The API instruction is given in there as well example:

svgjson({data: 'filepath/string', web: false, file: true, remove: true, output: true, filename: 'example.txt'})

You can use the API if you wish to use it multiple times on web or use the npm for node

Upvotes: 0

philipp
philipp

Reputation: 16505

If you do not want to fiddle around with string operations, you can also use the DOM Interface.

Interface

PathSegList

From there you can iterate over the path elements path segments list and create a json string from that.

var path = document.getElementById(<pathid>),
    seglist = path.pathSegList,
    length = seglist.numberOfItems, i = 0, seg,
    out = [], data, type;


for (; i < length; i++) {
    seg = seglist.getItem(i);
    type = seg.pathSegTypeAsLetter;
    data = { type: seg.pathSegTypeAsLetter };

    switch (type) {
        case 'M':
        case 'm':
        case 'l' :
        case 'L' :
            data.x = seg.x;
            data.y = seg.y;
        break;

        case 'C':
        case 'c':
            data.x = seg.x;
            data.y = seg.x;
            data.x1 = seg.x1;
            data.y1 = seg.y1;
            data.x2 = seg.x2;
            data.y2 = seg.y2;
        break;
        /*
         * to
         * be
         * continued
         */
    }
    out.push(data);
}

return JSON.stringify(out);

I have not test the code above, it should outline the basic process of iterating the Paths' segments. Since there are quite a couple of different types of segments, you can, as outlines above, »switch« over the type and create suitable data from there. Or, instead of path.pathSegList you could use path.normalizedPathSegList what return a list of segments, where each segment is converted to the type of cubic Bezier, but when tried it the last time, I got an »Not yet implemented Error«.

I have created a fiddle showing that the code works!

Upvotes: 1

RichieAHB
RichieAHB

Reputation: 2088

Given that you haven't specified things such as resolution etc. for your path around curves, I've just created a JSON with an extra property for the path type from that co-ordinate to the next one.

var d = document.getElementById('secnb1l1').getAttribute('d');

d = d.replace(/\s{2,}/g, ' '); // Remove multiple spaces
d = d.replace(/([a-zA-Z])\s[0-9]/g, '$1,'); // Add letters to coords group
d = d.split(" "); // Split on space

var coords = [];

for (var i = 0; i < d.length; i++) {
    var coordString = d[i];
    var coordArray = coordString.split(",");

    var coord = {
        x: coordArray[coordArray.length - 2],
        y: coordArray[coordArray.length - 1]
    };

    if (coordArray.length > 2) {
        coord.path = coordArray[0];
    }

    coords.push(coord);

}

You can see it working in this fiddle.

Upvotes: 1

Related Questions