"svg editor"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lixquid/pen/zxzgEr?depth=everything&order=popularity&page=2&q=editable&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300"); body { font-family: "Open Sans", sans-serif; font-size: 12px; background: #fff; } .strip { position: absolute; top: 0; left: 0; right: 0; height: 50px; line-height: 50px; } .strip_logo { display: inline-block; padding: 0 12.5px; color: #333; font-size: 2em; font-weight: 300; } .button-icon { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1.5em; height: 1.5em; margin: 0 0.25em; border: 1px solid #ccc; font-size: 1.3em; line-height: 1.5em; text-align: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 0.25em; } .button-icon:active, .button-icon._active { background: #ddd; } .label._zoom_factor { display: inline-block; } .spacer { display: inline-block; } .spacer._large { width: 3em; } #editor { position: absolute; top: 50px; left: 0; right: 50%; bottom: 0; } #workspace { position: absolute; top: 50px; left: 50%; right: 0; bottom: 0; padding: 10px; background-color: #ddd; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAADJJREFUOE9jaGho+E8JBhsABAy4MFC+Hps4DI8aMGgMACkiFw8SL6ALIuNRAwgZ8J8BANMK0RdeOT/pAAAAAElFTkSuQmCC"); background-position: 11px 11px; -webkit-transition: all 0.2s; transition: all 0.2s; } #workspace svg { border: 1px solid #f0f; } </style></head><body> <!DOCTYPE html> <html> <head> <title>SVG Edit</title> </head> <body> <div class="strip"> <div class="strip_logo">SVG Edit</div> <div class="button-icon _new" title="New"> <div class="fa fa-file-o"></div> </div> <div class="button-icon _save_svg" title="Save as SVG"> <div class="fa fa-floppy-o"></div> </div> <div class="button-icon _save_png" title="Save as PNG"> <div class="fa fa-picture-o"></div> </div> <div class="spacer _large"></div> <div class="button-icon _bg_dark" title="Dark Background"> <div class="fa fa-moon-o"></div> </div> <div class="button-icon _bg_light" title="Light Background"> <div class="fa fa-sun-o"></div> </div> <div class="spacer _large"></div> <div class="button-icon _zoom_in" title="Zoom In"> <div class="fa fa-search-plus"></div> </div> <div class="button-icon _zoom_out" title="Zoom Out"> <div class="fa fa-search-minus"></div> </div> <div class="button-icon _zoom_reset" title="Reset Zoom"> <div class="fa fa-search"></div> </div> <div class="label _zoom_factor">x1</div> </div> <div id="editor"></div> <div id="workspace"></div> <script src="/js/svg-edit.js"></script> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js'></script><script src='//cdn.rawgit.com/exupero/saveSvgAsPng/gh-pages/saveSvgAsPng.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/tether-tooltip/0.2.6/tooltip.min.js'></script> <script >// SVGEdit stuff // ye var initialSvg = "<svg width=\"100\" height=\"100\">\n\t\n</svg>"; $( "#workspace" ).html( initialSvg ); // Setup the Editor var editor = ace.edit( "editor" ); editor.getSession().setMode( "ace/mode/svg" ); editor.getSession().setTabSize( 4 ); editor.getSession().setValue( initialSvg ); // Update the Workspace function updateWorkspace() { $( "#workspace" ).html( editor.getSession().getValue() ); editForZoom(); } editor.getSession().on( "change", updateWorkspace ); // Translate for zoom var zoomFactor = 1; function editForZoom() { try { var elem = $( "#workspace svg" ); elem.get(0).setAttribute( "viewBox", elem.attr( "viewBox" ) || "0 0 " + elem.attr( "width" ) + " " + elem.attr( "height" ) ); elem.attr( "original-width", elem.attr( "width" ) * zoomFactor ); elem.attr( "original-height", elem.attr( "height" ) * zoomFactor ); elem.attr( "width", elem.attr( "width" ) * zoomFactor ); elem.attr( "height", elem.attr( "height" ) * zoomFactor ); } catch (ex) { // fail console.error( "Could not find viewbox params!" ); } } // Actions $( ".button-icon._new" ).on( "click", function() { editor.getSession().setValue( initialSvg ); } ); $( ".button-icon._save_png" ).on( "click", function() { var elem = $( "#workspace svg" ); var oldFactor = zoomFactor; zoomFactor = 1; updateWorkspace(); var name = $( "#workspace svg g title" ).first(); if ( name == null ) name = "image" else name = name.text() || "image"; name = name.toLowerCase(); saveSvgAsPng( elem.get(0), name ); setTimeout( function() { zoomFactor = oldFactor; updateWorkspace(); }, 0 ); } ); $( ".button-icon._save_svg" ).on( "click", function() { var blob = new Blob( [editor.getSession().getValue()], { type: "text/plain" } ); var name = $( "#workspace svg g title" ).first(); if ( name == null ) name = "image" else name = name.text() || "image"; name = name.toLowerCase() + ".svg"; var link = document.createElement( "a" ); link.download = name; link.innerHTML = "DL"; if ( window.webkitURL != null ) { // webkit link.href = window.webkitURL.createObjectURL( blob ); } else { // firefox link.href = window.URL.createObjectURL( blob ); link.onclick = function( e ) { document.body.removeChild( e.target ); }; link.style.display = "none"; document.body.appendChild( link ); } link.click(); } ); $( ".button-icon._load" ).on( "click", function() { var reader = new FileReader(); reader.onload = function( e ) { editor.getSession().setValue( e.target.result ); }; reader.readAsText(); } ); $( ".button-icon._bg_dark" ).on( "click", function() { $( "#workspace" ).css( "background-color", "#333" ); } ); $( ".button-icon._bg_light" ).on( "click", function() { $( "#workspace" ).css( "background-color", "#ddd" ); } ); $( ".button-icon._bg_grid" ).on( "click", function() { } ); $( ".button-icon._zoom_in" ).on( "click", function() { zoomFactor *= 2; updateWorkspace(); $( ".label._zoom_factor" ).html( "x" + zoomFactor ); } ); $( ".button-icon._zoom_out" ).on( "click", function() { zoomFactor /= 2; updateWorkspace(); $( ".label._zoom_factor" ).html( "x" + zoomFactor ); } ); $( ".button-icon._zoom_reset" ).on( "click", function() { zoomFactor = 1; updateWorkspace(); $( ".label._zoom_factor" ).html( "x" + zoomFactor ); } ); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: