选择存储在javascript对象中的svg数据

Question

我有一堆svg路径数据存储在项目的javascript对象中，我正在尝试适应我的需求，格式是这样的：

var clothData={
"cloth0":{
    "frontSide":{
        "cX":0,
        "cY":0,
        "path": [{
            "type": "path",
            "style": [{
                "attr": "d",
                "val": "/* d element info */" 
            }]
        }, /* ... */ ]
    }
},
"cloth1":{
    "frontSide":{
        "cX":0,
        "cY":0,
        "path": [{
            "type": "path",
            "style": [{
                "attr": "d",
                "val": "/* d element info */" 
            }]
         }, /* ... */
        ]
    }
 }, /* ... */ 
}

然后根据用户操作将数据动态加载到g内的svg元素中。我目前正在使用d3.js .data函数在元素中加载"path"属性。

我使用对象作为参考数据，在我的代码中有类似这样的内容：svgElement.select(partSelector).data(data.frontSide.path)，其中partSelector是要转到要更改的svg部分的选择器，data是从对象中获得的。

我不知道用于生成包含这些对象的脚本的工具是什么，问题是该文件要在服务后很大，10MB在缩小后。

有没有办法可以压缩数据以减少数据？

我不需要使用 d3.js 或带有对象的脚本，我只需要一种方法可以根据数据动态修改svg的内容而不使用{ {1}}档案。