how to draw image from svg path array using imageMagick in PHP

Question

I'm working on a web project that allows users to design business cards. and i'm using Fabric js library in Codeigniter, I'm converting Canvas to JSON to create image using imageMagick, and i am able to print image when only images were used in design, but when i use svg string in canvas, and convert to json , i'm getting this data And i don't know, how to create image from this data using imageMagick. Please help.

stdClass Object
            (
                [type] => path
                [version] => 2.3.6
                [originX] => left
                [originY] => top
                [left] => 460.41162159184
                [top] => 201.78296829576
                [width] => 6.04
                [height] => 7.7
                [fill] => rgb(0,0,0)
                [stroke] => 
                [strokeWidth] => 1
                [strokeDashArray] => 
                [strokeLineCap] => butt
                [strokeLineJoin] => miter
                [strokeMiterLimit] => 10
                [scaleX] => 1
                [scaleY] => 1
                [angle] => 0
                [flipX] => 
                [flipY] => 
                [opacity] => 1
                [shadow] => 
                [visible] => 1
                [clipTo] => 
                [backgroundColor] => 
                [fillRule] => nonzero
                [paintFirst] => fill
                [globalCompositeOperation] => source-over
                [transformMatrix] => 
                [skewX] => 0
                [skewY] => 0
                [path] => Array
                    (
                        [0] => Array
                            (
                                [0] => M
                                [1] => 466.95
                                [2] => 203.98
                            )

                        [1] => Array
                            (
                                [0] => c
                                [1] => -2.17
                                [2] => 1.5
                                [3] => -1.59
                                [4] => 5.74
                                [5] => -5
                                [6] => 6
                            )

                        [2] => Array
                            (
                                [0] => c
                                [1] => -1.37
                                [2] => -1.29
                                [3] => -0.99
                                [4] => -4.34
                                [5] => -0.99
                                [6] => -7
                            )

                        [3] => Array
                            (
                                [0] => C
                                [1] => 464
                                [2] => 201.73
                                [3] => 464.84
                                [4] => 202.22
                                [5] => 466.95
                                [6] => 203.98
                            )

                        [4] => Array
                            (
                                [0] => z
                            )

                    )

            )

And here is JS code, that post designs to PHP ImageMagick

savePNG : function(e) {

            savedCanvas[getItem('activeView')] = canvas.toJSON();
            var datas = JSON.stringify(savedCanvas);
            $.ajaxSetup({

                beforeSend: function(){
                    show_loader('show');
                },
            });
            $.post('studio/api/save', {csrf_token_name:token,designs:datas} ).done( function(data){
                console.log(data);
            }).always( function(){
                show_loader('hide');
            })
            return false;
        },

Answer 1

For graphical elements like paths, rectangles,circles you can use the toSVG method. Rewrite the toObject method an put there the svg parameter.

 toObject : function( propertiesToInclude ) {
        var o = extend( this.callSuper( 'toObject', ['sourcePath', 'pathOffset'].concat( propertiesToInclude ) ), {
            svg  : this.toSVG()
        } );
        return o;
    },

After that you have the svg element in php. Try to create a empty svg file with that content. After that you can use it as a image or graphical element (my suggestion is to used as a graphical element because the result it's a vectorial shape)

UPDATE

Extend the toObject method from fabric.Object

//rewrite core
fabric.Object.prototype.toObject = (function (toObject) {
    return function () {

        return fabric.util.object.extend(toObject.call(this), {
            svgString: this.toSVG()
        });
    };
})(fabric.Object.prototype.toObject);

Exemple: https://jsfiddle.net/6hbnjfw1/4/

Update 2: https://jsfiddle.net/6hbnjfw1/6/