<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>
