Skip to content

Instantly share code, notes, and snippets.

@nazeeruddinikram

nazeeruddinikram/svg-creator-tool.html

Forked from pachacamac/svg-creator-tool.html
Created June 2, 2016 12:37
Show Gist options
  • Save nazeeruddinikram/497fd6fcddad0347c8afdba3039ae4f6 to your computer and use it in GitHub Desktop.
Save nazeeruddinikram/497fd6fcddad0347c8afdba3039ae4f6 to your computer and use it in GitHub Desktop.
Download ZIP
simple as fuck svg creator
Raw
svg-creator-tool.html
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>SVG Helper Tool</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p id="pos">0, 0</p>
<canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
<p>hold ctrl and click to start a new path, then click, click, click, ...</p>
<pre id="out" style="width:100%; white-space: pre-wrap; word-wrap: break-word;"></pre>
<script>
var C = document.getElementById('x'), w = C.width, h = C.height, c = C.getContext("2d"), points = [], f = 100/w;
function makeSvg(w, h, f){
w *= f; h *= f;
var s = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" id="Icons" version="1.1" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="'+points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ')+'"/></g></svg>';
document.getElementById('out').innerText = s + "\n\ndata:image/svg+xml;base64," + btoa(s);
}
c.strokeStyle = 'rgb(0,0,0)';
c.lineWidth = 2;
C.onmousemove = function(e){
document.getElementById('pos').innerText = Math.floor(e.offsetX * f) + ', ' + Math.floor(e.offsetY * f);
}
C.onclick = function(e){
var x = Math.floor(e.offsetX * f / f), y = Math.floor(e.offsetY * f / f);
c.clearRect(0, 0, w, h);
if(e.ctrlKey){
c.closePath();
points = [];
c.beginPath();
}
c.lineTo(x, y);
points.push([x, y]);
makeSvg(w, h, f);
c.stroke();
c.moveTo(x, y);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment