HTML5 SVG图形在线编辑器

可以在线编辑SVG的代码，并可以导出为PNG图片。

svg, editor, ace.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 33992
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
body {
    font-family: "Open Sans", sans-serif;
}
.mainnav {
    position: absolute;
    top: 0;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding-left: 12.5px;
    background: #fff;
}
.mainnav-logo {
    display: inline-block;
    padding-right: 1em;
    color: #333;
    font-size: 25px;
    font-weight: 300;
    line-height: 50px;
}
.mainnav-icon {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 1.5em;
    padding: 5px;
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 0.25em;
}
.mainnav-icon:hover {
    background: rgba(0, 0, 0, 0.4);
}
#editor {
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 50%;
}
#workspace {
    position: absolute;
    top: 50px;
    left: 50%;
    bottom: 0;
    right: 0;
    padding: 10px;
    background: #ddd;
}
#workspace svg {
    border: 1px solid #999;
}

HTML

init = "<svg width=\"100\" height=\"100\">\n  <circle cx=\"50\" cy=\"50\" r=\"25\" />\n</svg>\n";

edit = ace.edit("editor");

edit.getSession().setMode("ace/mode/svg");

edit.getSession().setTabSize(4);

updateWorkspace = function() {
            return document.getElementById("workspace").innerHTML = edit.getSession().getValue();
        };

edit.getSession().on("change", updateWorkspace);

updateWorkspace();

$(".mainnav-icon._new").on("click", function(e) {
            return edit.getSession().setValue(init);
        });

$(".mainnav-icon._sai").on("click", function(e) {
            return saveSvgAsPng($("#workspace").children()[0], "file.png");
        });

}).call(this);
</script>

可以在线编辑SVG的代码，并可以导出为PNG图片。

svg, editor, ace.js

编辑器支持Emmet

快捷键

可以在线编辑SVG的代码，并可以导出为PNG图片。

svg, editor, ace.js

HTML5 SVG在文章中使用钢笔圈词画线连接的动画

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：