pachacamac/svg-creator-tool.html

## 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>click and drag on the canvas ... you're making a polygon ... <button id="reset">reset</button><button id="undo">undo</button></p>
<canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
<img id="preview" alt="preview" style="border: 1px dotted black; width: 100px; height: 100px;">
<span id="pos">0, 0</span>
<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"), dragging, points = [], f = 100/w;
function drawAndUpdateSvg(w, h, f){
  if(!points.length){c.clearRect(0, 0, w, h); return}
  c.beginPath();
  c.moveTo(points[0][0], points[0][1]);
  for(var p in points){
    c.clearRect(0, 0, w, h);
    c.lineTo(points[p][0], points[p][1]);
    c.stroke();
  }
  c.closePath();
  w *= f; h *= f
  var path = points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ');
  var s = '<svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g><polygon points="'+path+'"/></g></svg>';
  var d = 'data:image/svg+xml;base64,' + btoa(s);
  document.getElementById('out').innerText = path + "\n\n" + s + "\n\n" + d;
  document.getElementById('preview').src = d;
}
c.strokeStyle = 'rgb(0,0,0)';
c.lineWidth = 2;

if(location.hash.length){
  points = location.hash.substring(1).split(' ').map(function(p){return p.split(',').map(function(e){return parseInt(e) / f})});
  drawAndUpdateSvg(w, h, f);
}

document.getElementById('reset').onclick = function(){ points = []; drawAndUpdateSvg(w, h, f) };
document.getElementById('undo').onclick = function(){ points = points.slice(0, points.length-1); drawAndUpdateSvg(w, h, f) };

function pos(e){
  var x = e.offsetX, y = e.offsetY;
  if(e.changedTouches){
    x = e.changedTouches[0].pageX - e.changedTouches[0].target.offsetLeft;
    y = e.changedTouches[0].pageY - e.changedTouches[0].target.offsetTop;
  }
  return [Math.floor(x * f / f), Math.floor(y * f / f)];
}

function addPoint(p){ if(!points.length || points[points.length-1][0]!=p[0] || points[points.length-1][1]!=p[1]) points.push(p) }
C.onmousedown = C.ontouchstart = function(e){ e.preventDefault(); addPoint(pos(e)); dragging = true; drawAndUpdateSvg(w, h, f) };
C.onmouseup = C.ontouchend = function(e){ e.preventDefault(); dragging = false; addPoint(pos(e)); drawAndUpdateSvg(w, h, f) };
C.onmousemove = C.ontouchmove = function(e){
  e.preventDefault();
  document.getElementById('pos').innerText = pos(e).map(function(e){return Math.floor(e*f)}).join(', ');
  if(!dragging) return;
  if(points.length>1) points.pop();
  addPoint(pos(e))
  drawAndUpdateSvg(w, h, f);
};
</script>
</body>
</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>click and drag on the canvas ... you're making a polygon ... <button id="reset">reset</button><button id="undo">undo</button></p>
	<canvas id="x" width="500" height="500" style="border: 1px solid black;"></canvas>
	<img id="preview" alt="preview" style="border: 1px dotted black; width: 100px; height: 100px;">
	<span id="pos">0, 0</span>
	<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"), dragging, points = [], f = 100/w;
	function drawAndUpdateSvg(w, h, f){
	if(!points.length){c.clearRect(0, 0, w, h); return}
	c.beginPath();
	c.moveTo(points[0][0], points[0][1]);
	for(var p in points){
	c.clearRect(0, 0, w, h);
	c.lineTo(points[p][0], points[p][1]);
	c.stroke();
	}
	c.closePath();
	w = f; h = f
	var path = points.map(function(p){return p.map(function(e){return Math.floor(e * f)}).join(',')}).join(' ');
	var s = '<svg enable-background="new 0 0 '+w+' '+h+'" width="'+w+'px" height="'+h+'px" viewBox="0 0 '+w+' '+h+'" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g><polygon points="'+path+'"/></g></svg>';
	var d = 'data:image/svg+xml;base64,' + btoa(s);
	document.getElementById('out').innerText = path + "\n\n" + s + "\n\n" + d;
	document.getElementById('preview').src = d;
	}
	c.strokeStyle = 'rgb(0,0,0)';
	c.lineWidth = 2;

	if(location.hash.length){
	points = location.hash.substring(1).split(' ').map(function(p){return p.split(',').map(function(e){return parseInt(e) / f})});
	drawAndUpdateSvg(w, h, f);
	}

	document.getElementById('reset').onclick = function(){ points = []; drawAndUpdateSvg(w, h, f) };
	document.getElementById('undo').onclick = function(){ points = points.slice(0, points.length-1); drawAndUpdateSvg(w, h, f) };

	function pos(e){
	var x = e.offsetX, y = e.offsetY;
	if(e.changedTouches){
	x = e.changedTouches[0].pageX - e.changedTouches[0].target.offsetLeft;
	y = e.changedTouches[0].pageY - e.changedTouches[0].target.offsetTop;
	}
	return [Math.floor(x * f / f), Math.floor(y * f / f)];
	}

	function addPoint(p){ if(!points.length \|\| points[points.length-1][0]!=p[0] \|\| points[points.length-1][1]!=p[1]) points.push(p) }
	C.onmousedown = C.ontouchstart = function(e){ e.preventDefault(); addPoint(pos(e)); dragging = true; drawAndUpdateSvg(w, h, f) };
	C.onmouseup = C.ontouchend = function(e){ e.preventDefault(); dragging = false; addPoint(pos(e)); drawAndUpdateSvg(w, h, f) };
	C.onmousemove = C.ontouchmove = function(e){
	e.preventDefault();
	document.getElementById('pos').innerText = pos(e).map(function(e){return Math.floor(e*f)}).join(', ');
	if(!dragging) return;
	if(points.length>1) points.pop();
	addPoint(pos(e))
	drawAndUpdateSvg(w, h, f);
	};
	</script>
	</body>
	</html>