diff --git a/test/agent.html b/test/agent.html
new file mode 100644
index 0000000000..f95af971c6
--- /dev/null
+++ b/test/agent.html
@@ -0,0 +1,401 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                background: #2E2733;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+            var houseImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAAAAXNSR0IArs4c6QAAAyBJREFUWAntmM9PE0EUx78z3bagRMAqEaLSCzHK1Ziol3LVP8CDZ/8Eo6dauPpfePO/IDEe/AMgIV4QDBpII0JFtt2Z8b22U7pru90tu1STTtLMdGbezGe/7+3OD2CcxgqMFYitgIhtEWJgTEVSM/32aNwFJURFh3SP3JQYJAE629ieyqM+zbO7yP0solgjUM8YQ/OsZr5hL5eFl+H2Bhw1j4U68IYeRhiu65cSgWTA7/gy6+L3koF5yZMJiLd5TH6+gcUfrOw+jq+6kLcVdIHbM5DVPPTOHO5U+UG4rl9y+jVErbeADbh3CbBCdistWzPt4XSV4DdzqLt1iEUF75Mdl2BJbecBqXtMdelBdgMqqFWarGQhyH8rHjR56rRCgLuAmrNtNmdVJ9vut3W9cg70oVIYYNeAJQKtAGZZQ17vqm8WJbQj4Q4MuaHcHRHQMpU0TJ5AP9iKuHlsyJiAbR7zkArzceFs/1juHg7QToVipxSzEBnynIAxsfzdI0GmBUhvTOYI2YEMAzukBchaKYjZLBpTPIdfO/+/UMg0AVsY5oUHs8SrVRhoX8j0AZuYjwxUmVame2GgPT+kFwTY7dN1B5J8PrHJa31wLf8LcgSAFrYvqA+SAOVX7M4Y/FpWMGtkXbIjXFC+noEoC1zeuIlbh3Y/GoxJR6B2jXaqr0YAyDqUSJzXzEDlzhsfgKwKBcehLddTthhResIMQLXj5Q5tC6igcqgd1GHuC6iCgZwhVZcBXU4XWK6RWhsC+tAgU80hdwAUlJ2zQ8sVwW3+KbwrGo3HGvq9NUgjl5DPJLIfJ+Ac9TpW+JRsnzV4l9zcKVfNc1GDPkkDzD+mPrkEdVwQ73iX3k4VW+CT3b+ffEqeH7cVWzxOkrGcKCQHP8dW62EbDJpIShSS9GvGFpMlGcv/f0xq5A19fuhNj+Y4OhF6bMNKDmvHtsEU6m7+ZvFNAx/koyTuyzbcd1i7XvOEQvJdzT62dvimgQ/yfE7uNQgreHZtwvc7wLB2vcb3rTjBDsEVqN9Bnl3cvVK0xjm7oIpqN+jiKsg3/j9WYKxAiAJ/AI3Lp8qficYGAAAAAElFTkSuQmCC';
+
+            var myChart;
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                myChart = echarts.init(document.getElementById('main'));
+                var mapData = [];
+                var mapWidth = 35;
+                var mapHeight = 19;
+                for (var i = 0; i < mapWidth; ++i) {
+                    for (var j = 0; j < mapHeight; ++j) {
+                        mapData.push([
+                            i, j
+                        ]);
+                    }
+                }
+
+                var position = [3, 4];
+                var targetPosition = position;
+                var globalR = 20;
+
+                var buildings = [];
+                for (var i = 0; i < 20; ++i) {
+                    var x = Math.floor(Math.random() * mapWidth);
+                    var y = Math.floor(Math.random() * mapHeight);
+                    if (buildings.indexOf([x, y]) === -1) {
+                        buildings.push([x, y]);
+                    }
+                }
+
+                var people = [];
+                for (var i = 0; i < 10; ++i) {
+                    var x = Math.floor(Math.random() * mapWidth);
+                    var y = Math.floor(Math.random() * mapHeight);
+                    if (people.indexOf([x, y]) === -1
+                        && buildings.indexOf([x, y]) === -1
+                    ) {
+                        people.push([x, y]);
+                    }
+                }
+
+                echarts.registerMap('hexMap', {
+                    features: [{
+                        geometry: {
+                            coordinates: {
+                                0: [[0, 0], [100, 50]]
+                            },
+                            type: 'Polygon'
+                        },
+                        properties: {
+                            childNum: 1,
+                            name: 'hexBin'
+                        }
+                    }]
+                });
+
+                var getRenderItem = function (option) {
+                    return function (params, api) {
+                        // console.log(params);
+                        var r = (option && option.r) || globalR;
+                        var dx = Math.sqrt(3) / 2 * globalR;
+                        var dy = 0.75 * globalR;
+
+                        var cx = (api.value(0) + 1) * dx * 2;
+                        var cy = (api.value(1) + 1) * dy * 2;
+                        if (api.value(1) % 2 === 1) {
+                            cx += dx;
+                        }
+
+                        var points = [];
+                        for (var i = 0; i < 6; ++i) {
+                            points.push([
+                                cx + r * Math.cos(Math.PI / 3 * i + Math.PI / 6),
+                                cy + r * Math.sin(Math.PI / 3 * i + Math.PI / 6)
+                            ])
+                        }
+
+                        var el = {
+                            type: 'polygon',
+                            shape: {
+                                points: points
+                            },
+                            style: api.style(),
+                            styleEmphasis: api.styleEmphasis()
+                        };
+                        if (option && option.icon) {
+                            var imgW = globalR;
+                            var imgH = imgW;
+                            el = {
+                                type: 'group',
+                                children: [
+                                    {
+                                        type: 'image',
+                                        style: {
+                                            image: option.icon,
+                                            x: cx - imgW / 2,
+                                            y: cy - imgH / 2,
+                                            width: imgW,
+                                            height: imgH
+                                        }
+                                    },
+                                    el
+                                ]
+                            }
+                        }
+
+                        return el;
+                    };
+                };
+
+                var primaryColor = '#2AFFD9';
+                var peopleColor = '#FF3F88';
+                var buildingColor = '#DFFF57';
+
+                option = {
+                    backgroundColor: '#2C314C',
+                    geo: {
+                        map: 'hexMap'
+                    },
+                    series: [{
+                        name: 'map',
+                        type: 'custom',
+                        coordinateSystem: 'geo',
+                        data: mapData,
+                        renderItem: getRenderItem(),
+                        itemStyle: {
+                            normal: {
+                                color: '#21253B',
+                                borderColor: '#2C314C',
+                                borderWidth: 2
+                            },
+                            emphasis: {
+                                borderColor: primaryColor,
+                                shadowBlur: 10,
+                                shadowColor: primaryColor,
+                                z: 20
+                            }
+                        }
+                    }, {
+                        name: 'agent',
+                        type: 'custom',
+                        coordinateSystem: 'geo',
+                        data: getAgentData(),
+                        renderItem: getRenderItem(),
+                        itemStyle: {
+                            normal: {
+                                color: primaryColor,
+                                shadowBlur: 80,
+                                shadowColor: primaryColor
+                            }
+                        },
+                        z: 10,
+                        silent: true
+                    }, {
+                        name: 'buildings',
+                        type: 'custom',
+                        coordinateSystem: 'geo',
+                        data: buildings,
+                        renderItem: getRenderItem({
+                            icon: houseImg
+                        }),
+                        itemStyle: {
+                            normal: {
+                                color: 'transparent',
+                                borderColor: buildingColor,
+                                borderWidth: 2,
+                                shadowBlur: 5,
+                                shadowColor: buildingColor
+                            }
+                        }
+                    }, {
+                        name: 'people',
+                        type: 'custom',
+                        coordinateSystem: 'geo',
+                        data: people,
+                        renderItem: getRenderItem({
+                            r: 8
+                        }),
+                        itemStyle: {
+                            normal: {
+                                color: peopleColor,
+                                shadowBlur: 40,
+                                shadowColor: peopleColor
+                            }
+                        },
+                        z: 10,
+                        silent: true
+                    }]
+                };
+
+                myChart.setOption(option);
+
+                myChart.on('click', function (data) {
+                    targetPosition = data.value;
+                    moveNext();
+                });
+
+                setInterval(function () {
+                    for (var i = 0; i < people.length; ++i) {
+                        if (Math.random() > 0.6) {
+                            var moves = getNeighbors(people[i]);
+                            var id = Math.floor(Math.random() * moves.length);
+                            people[i][0] += moves[id][0];
+                            people[i][1] += moves[id][1];
+
+                            if (isOutOfMap(people[i])) {
+                                people[i][0] -= moves[id][0];
+                                people[i][1] -= moves[id][1];
+                            }
+                        }
+                    }
+
+                    moveNext();
+
+                    myChart.setOption({
+                        series: [{}, {}, {}, {
+                            data: people
+                        }]
+                    });
+                }, 1000);
+
+                function isOutOfMap(pos) {
+                    return pos[0] < 0 || pos[0] >= mapWidth || pos[1] < 0
+                        || pos[1] >= mapHeight;
+                }
+
+                function getNeighbors(pos) {
+                    if (pos[1] % 2) {
+                        return [[0, 0], [0, -1], [1, -1], [-1, 0], [1, 0],
+                            [0, 1], [1, 1]];
+                    }
+                    else {
+                        return [[-1, -1], [-1, 0], [-1, 1], [0, -1], [1, 0],
+                            [0, 1]];
+                    }
+                }
+
+                function getAgentData() {
+                    var data = [{
+                        value: position,
+                        itemStyle: {
+                            normal: {
+                                opacity: 1
+                            }
+                        }
+                    }];
+
+                    var mapPos = function (pos) {
+                        return pos[0] + ',' + pos[1];
+                    };
+
+                    var pos = [position];
+                    var moves = getNeighbors(position);
+                    var level1 = [];
+                    moves.forEach(function (move) {
+                        var newPos = [
+                            position[0] + move[0],
+                            position[1] + move[1]
+                        ];
+                        if (!isOutOfMap(newPos)
+                            && pos.indexOf(mapPos(newPos)) === -1
+                        ) {
+                            data.push({
+                                value: newPos,
+                                itemStyle: {
+                                    normal: {
+                                        opacity: 0.2
+                                    }
+                                }
+                            });
+                            level1.push(newPos);
+                            pos.push(mapPos(newPos));
+                        }
+                    });
+
+                    level1.forEach(function (parent) {
+                        moves = getNeighbors(parent);
+                        moves.forEach(function (move) {
+                            var newPos = [
+                                parent[0] + move[0],
+                                parent[1] + move[1]
+                            ];
+                            if (!(newPos[0] === position[0]
+                                && newPos[1] === position[1])
+                                && !isOutOfMap(newPos)
+                                && pos.indexOf(mapPos(newPos)) === -1
+                            ) {
+                                data.push({
+                                    value: newPos,
+                                    itemStyle: {
+                                        normal: {
+                                            opacity: 0.05
+                                        }
+                                    }
+                                });
+                                pos.push(mapPos(newPos));
+                            }
+                        });
+                    });
+                    return data;
+                }
+
+                // var dMap = {};
+                // var todoList = [];
+                // function distance(a, b) {
+                //     var key = a[0] + ',' + a[1] + ',' + b[0] + ',' + b[1];
+                //     if (dMap[key]) {
+                //         return dMap[key];
+                //     }
+
+                //     if (a[0] === b[0] && a[1] === b[1]) {
+                //         dMap[key] = {
+                //             distance: 0,
+                //             path: []
+                //         };
+                //         return dMap[key];
+                //     }
+                //     else if (isOutOfMap(a) || isOutOfMap(b)) {
+                //         dMap[key] = {
+                //             distance: Number.MAX_VALUE,
+                //             path: []
+                //         };
+                //         return dMap[key];
+                //     }
+                //     else {
+                //         var neighbors = [[0, -1], [1, -1], [-1, 0], [1, 0], [0, 1], [1, 1]];
+                //         neighbors.forEach(function (n) {
+                //             if (a[0] + n[0] === b[0] && a[1] + n[1] === b[1]) {
+                //                 dMap[key] = {
+                //                     distance: 1,
+                //                     path: n
+                //                 };
+                //                 return dMap[key];
+                //             }
+                //         })
+
+                //         var dis = neighbors.map(function (n) {
+                //             return distance([a[0] + n[0], a[1] + n[1]], b);
+                //         });
+                //         var min = Number.MAX_VALUE;
+                //         var minId = null;
+                //         dis.forEach(function (d, id) {
+                //             if (d.distance < min) {
+                //                 min = d.distance;
+                //                 minId = id;
+                //             }
+                //         });
+                //         dMap[key] = {
+                //             distance: min + 1,
+                //             path: [neighbors[minId]].concat(dis[minId].path)
+                //         }
+                //         return dMap[key];
+                //     }
+                // }
+
+                function moveNext() {
+                    var dx = 0;
+                    if (position[0] !== targetPosition[0]) {
+                        dx = targetPosition[0] > position[0] ? 1 : -1;
+                    }
+
+                    var dy = 0;
+                    if (position[1] !== targetPosition[1]) {
+                        dy = targetPosition[1] > position[1] ? 1 : -1;
+                    }
+
+                    if (dx !== 0 || dy !== 0) {
+                        position[0] += dx;
+                        position[1] += dy;
+
+                        myChart.setOption({
+                            type: 'custom',
+                            series: [{}, {
+                                data: getAgentData()
+                            }]
+                        });
+                    }
+                }
+
+            });
+        </script>
+    </body>
+</html>
diff --git a/test/smooth.html b/test/smooth.html
index 35ca1f4100..db2b0410e8 100644
--- a/test/smooth.html
+++ b/test/smooth.html
@@ -28,38 +28,28 @@
                     // renderer: 'svg'
                 });
 
-                var data = [];
-                for (var i = 0; i < 8; ++i) {
-                    data.push([
-                        i,
-                        Math.floor(Math.random() * 100)
-                    ])
-                }
+                var data = [
+                    [0, 0]
+                    [1, 1],
+                    [2, 4],
+                    [3, 3],
+                    [4, 3],
+                    [5, 3],
+                    [6, 7],
+                    [7, 7]
+                ];
 
                 option = {
+                    color: ['#4ea397', '#d0648a', '#f5b841'],
                     animation: false,
                     title: {
                         text: '光滑曲线新老算法对比',
                         left: '50%',
                         textAlign: 'center'
                     },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            lineStyle: {
-                                color: '#ddd'
-                            }
-                        },
-                        backgroundColor: 'rgba(255,255,255,1)',
-                        padding: [5, 10],
-                        textStyle: {
-                            color: '#7588E4',
-                        },
-                        extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
-                    },
                     legend: {
-                        left: 20,
-                        data: ['非单调光滑（老算法）','非单调光滑（新算法）', '不光滑']
+                        top: 30,
+                        data: ['非单调光滑（老算法）','单调光滑（新算法）', '不光滑']
                     },
                     xAxis: {
                         type: 'value'
@@ -81,9 +71,12 @@
                         data: data,
                         lineStyle: {
                             width: 1
+                        },
+                        areaStyle: {
+                            opacity: 0.4
                         }
                     }, {
-                        name: '非单调光滑（新算法）',
+                        name: '单调光滑（新算法）',
                         type: 'line',
                         smooth: true,
                         showSymbol: false,
@@ -91,6 +84,9 @@
                         data: data,
                         lineStyle: {
                             width: 1
+                        },
+                        areaStyle: {
+                            opacity: 0.4
                         }
                     }, {
                         name: '不光滑',
@@ -101,7 +97,8 @@
                         connectNulls: true,
                         data: data,
                         lineStyle: {
-                            width: 1
+                            width: 3,
+                            type: 'dashed'
                         }
                     }]
                 };
diff --git a/test/sunburst-canvas.html b/test/sunburst-canvas.html
new file mode 100644
index 0000000000..4a40ce462d
--- /dev/null
+++ b/test/sunburst-canvas.html
@@ -0,0 +1,239 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                /* background-image: url(old_mathematics.png); */
+                /* background-repeat: repeat; */
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+            var chart;
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                chart = echarts.init(document.getElementById('main'), null, {
+                    // renderer: 'svg'
+                });
+
+                var canvasColor = ['#FF6161', '#FF8C75', '#FFB499'];
+                var svgColor = ['#53C299', '#83E0A8', '#B7F6C0'];
+                var evenColor = '#eee';
+
+                var data = [{
+                    name: '展示平台',
+                    children: [{
+                        name: '手机端',
+                        children: [{
+                            name: '安卓',
+                            children: [{
+                                name: 'SVG ↑↑↑',
+                                value: 1,
+                                itemStyle: {
+                                    color: svgColor[0]
+                                }
+                            }]
+                        }, {
+                            name: 'iOS',
+                            children: [{
+                                name: 'SVG ↑',
+                                value: 1,
+                                itemStyle: {
+                                    color: svgColor[2]
+                                }
+                            }]
+                        }]
+                    }, {
+                        name: '电脑端',
+                        children: [{
+                            name: 'Mac',
+                            children: [{
+                                name: 'Chrome',
+                                children: [{
+                                    name: 'SVG ↑',
+                                    value: 1,
+                                    itemStyle: {
+                                        color: svgColor[2]
+                                    }
+                                }]
+                            }, {
+                                name: 'Safari',
+                                children: [{
+                                    name: '-',
+                                    value: 1,
+                                    itemStyle: {
+                                        color: evenColor
+                                    }
+                                }]
+                            }, {
+                                name: 'Firefox',
+                                children: [{
+                                    name: '-',
+                                    value: 1,
+                                    itemStyle: {
+                                        color: evenColor
+                                    }
+                                }]
+                            }]
+                        }, {
+                            name: 'Windows',
+                            children: [{
+                                name: 'IE',
+                                children: [{
+                                    name: 'Canvas ↑↑',
+                                    value: 1,
+                                    itemStyle: {
+                                        color: canvasColor[1]
+                                    }
+                                }]
+                            }, {
+                                name: 'Chrome',
+                                children: [{
+                                    name: '-',
+                                    value: 1,
+                                    itemStyle: {
+                                        color: evenColor
+                                    }
+                                }]
+                            }, {
+                                name: 'Firefox',
+                                children: [{
+                                    name: 'SVG ↑',
+                                    value: 1,
+                                    itemStyle: {
+                                        color: svgColor[2]
+                                    }
+                                }]
+                            }]
+                        }]
+                    }]
+                }, {
+                    name: '图表类型',
+                    children: [{
+                        name: '折线图',
+                        children: [{
+                            name: 'SVG ↑↑',
+                            value: 1,
+                            itemStyle: {
+                                color: svgColor[1]
+                            }
+                        }]
+                    }, {
+                        name: '柱状图',
+                        children: [{
+                            name: 'Canvas ↑↑',
+                            value: 1,
+                            itemStyle: {
+                                color: canvasColor[1]
+                            }
+                        }]
+                    }, {
+                        name: '饼图',
+                        children: [{
+                            name: '-',
+                            value: 1,
+                            itemStyle: {
+                                color: evenColor
+                            }
+                        }]
+                    }]
+                }, {
+                    name: '数据量',
+                    children: [{
+                        name: '< 1000',
+                        children: [{
+                            name: '-',
+                            value: 1,
+                            itemStyle: {
+                                color: evenColor
+                            }
+                        }]
+                    }, {
+                        name: '>= 1000',
+                        children: [{
+                            name: 'Canvas ↑',
+                            value: 1,
+                            itemStyle: {
+                                color: canvasColor[2]
+                            }
+                        }]
+                    }]
+                }, {
+                    name: '图表个数',
+                    children: [{
+                        name: '< 10',
+                        children: [{
+                            name: '-',
+                            value: 1,
+                            itemStyle: {
+                                color: evenColor
+                            }
+                        }]
+                    }, {
+                        name: '>= 10',
+                        children: [{
+                            name: 'SVG ↑↑↑',
+                            value: 1,
+                            itemStyle: {
+                                color: svgColor[0]
+                            }
+                        }]
+                    }]
+                }, {
+                    name: '特殊\n渲染\n需求',
+                    children: [{
+                        name: '仅 Canvas\n支持',
+                        value: 1,
+                        itemStyle: {
+                            color: canvasColor[0]
+                        }
+                    }]
+                }];
+
+                chart.setOption({
+                    series: {
+                        radius: ['10%', '120%'],
+                        center: ['50%', '38%'],
+                        startAngle: 0,
+                        type: 'sunburst',
+                        sort: null,
+                        highlightPolicy: 'ancestor',
+                        data: data,
+                        label: {
+                            rotate: 0,
+                            textBorderColor: '#444',
+                            textBorderWidth: 2,
+                            fontSize: 14
+                        },
+                        levels: [{}, {
+                            itemStyle: {
+                                color: '#999'
+                            }
+                        }, {
+                            itemStyle: {
+                                color: '#bbb'
+                            }
+                        }, {
+                            itemStyle: {
+                                color: '#ccc'
+                            }
+                        }],
+                        itemStyle: {
+                            color: '#ddd',
+                            borderWidth: 2
+                        }
+                    }
+                });
+            });
+
+        </script>
+    </body>
+</html>
diff --git a/test/svg-test.html b/test/svg-test.html
new file mode 100644
index 0000000000..310354677f
--- /dev/null
+++ b/test/svg-test.html
@@ -0,0 +1,114 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                /* background-image: url(old_mathematics.png); */
+                /* background-repeat: repeat; */
+            }
+        </style>
+        <div id="main"></div>
+        <div id="result" style="border:1px solid red; width: 400px; height:300px;position:absolute;left: 0;top:0;">
+
+        </div>
+        <script>
+            var chart;
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'svg'
+                });
+
+                option ={
+                    animation: false,
+                    "tooltip": {
+                        "trigger": "item",
+                        "formatter": "{a} <br/>{b} : {c} ({d}%)"
+                    },
+                    "series": [
+                        {
+                        "name": "学员分布情况",
+                        "type": "pie",
+                        "radius": [
+                            20,
+                            65
+                        ],
+                        "center": [
+                            "50%",
+                            "50%"
+                        ],
+                        "roseType": "radius",
+                        "label": {
+                            "show": false
+                        },
+                        "data": [
+                            {
+                            "name": "小学数学",
+                            "value": 394
+                            },
+                            {
+                            "name": "小学语文",
+                            "value": 100
+                            }
+                        ]
+                        }
+                    ],
+                    "title": {
+                        "show": false
+                    },
+                    "backgroundColor": "#ffffff",
+                    "color": [
+                        "#7daef3",
+                        "#a0d633"
+                    ]
+                };
+
+                chart.setOption(option);
+
+                var container = document.getElementById('result');
+                // var url = escapeHtml(chart.getDataURL());
+                var url = escapeHtml(`<svg xmlns="http://www.w3.org/2000/svg" version="1.1" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
+<g>
+	<path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3   c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/>
+	<path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/>
+	<path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/>
+	<path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6   c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/>
+	<path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/>
+	<path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7   c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/>
+	<path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7   C20.6,84.2,23.2,86.3,26.2,88.2z"/>
+	<path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6   c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/>
+</g>
+</svg>`)
+                // url = url.replace(/"/g, '&quot;');
+                console.log(url);
+                container.innerHTML = '<img src="' + url + '">';
+
+
+                function escapeHtml (string) {
+                    var entityMap = {
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    '"': '&quot;',
+                    "'": '&#39;',
+                    '/': '&#x2F;',
+                    '`': '&#x60;',
+                    '=': '&#x3D;'
+                    };
+
+                    return String(string).replace(/[&<>"'`=\/]/g, function (s) {
+                        return entityMap[s];
+                    });
+                }
+            });
+        </script>
+    </body>
+</html>
