Convert SVG file from absolute to relative

## readme.md

      
        

          Raw
        
        
          
            
          
          
            
              readme.md
            
          
        
      
    
  
    This will convert an absolute SVG path to a relative SVG path.

  

  

## index.html
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<div class="page-header">
	<center>
		<h1>Conversion<small>(1.937)</small></h1></center>
	</div>
	<div class= "container-fluid">
		<div class = "hero-unit">
			<center>
				<legend>Convert SVG Line to relative</legend>
				<label>Mixed relative and Absolute path (string only)</label>
				<textarea rows = "4" id = "incorrectpath" type="text" placeholder="place text here"></textarea>
				<span id = "answerhere" class="help-block">Answer will appear here</span>
				<button onclick = "convertToRelative()" class="btn btn-inverse">Submit</button>
			</center>
		</div>
	</div>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	function convertToRelative() {

		var pathstring = document.getElementById("incorrectpath").value
		//console.log(pathstring + "got it in")
		var svg = d3.select("body").append("svg")
		var simple = svg.append("path")
		.attr("d", pathstring);
		var path = simple.node()

		function set(type) {
			var args = [].slice.call(arguments, 1)
			, rcmd = 'createSVGPathSeg'+ type +'Rel'
			, rseg = path[rcmd].apply(path, args);
			segs.replaceItem(rseg, i);
		}
		var dx, dy, x0, y0, x1, y1, x2, y2, segs = path.pathSegList;
		for (var x = 0, y = 0, i = 0, len = segs.numberOfItems; i < len; i++) {
			var seg = segs.getItem(i)
			, c   = seg.pathSegTypeAsLetter;
			if (/[MLHVCSQTAZz]/.test(c)) {
				if ('x1' in seg) x1 = seg.x1 - x;
				if ('x2' in seg) x2 = seg.x2 - x;
				if ('y1' in seg) y1 = seg.y1 - y;
				if ('y2' in seg) y2 = seg.y2 - y;
				if ('x'  in seg) dx = -x + (x = seg.x);
				if ('y'  in seg) dy = -y + (y = seg.y);
				switch (c) {
					case 'M': set('Moveto',dx,dy);                   break;
					case 'L': set('Lineto',dx,dy);                   break;
					case 'H': set('LinetoHorizontal',dx);            break;
					case 'V': set('LinetoVertical',dy);              break;
					case 'C': set('CurvetoCubic',dx,dy,x1,y1,x2,y2); break;
					case 'S': set('CurvetoCubicSmooth',dx,dy,x2,y2); break;
					case 'Q': set('CurvetoQuadratic',dx,dy,x1,y1);   break;
					case 'T': set('CurvetoQuadraticSmooth',dx,dy);   break;
					case 'A': set('Arc',dx,dy,seg.r1,seg.r2,seg.angle,
						seg.largeArcFlag,seg.sweepFlag);   break;
					case 'Z': case 'z': x = x0; y = y0; break;
				}
			}
			else {
				if ('x' in seg) x += seg.x;
				if ('y' in seg) y += seg.y;
			}
    // store the start of a subpath
    if (c == 'M' || c == 'm') {
    	x0 = x;
    	y0 = y;
    }
}
path.setAttribute('d', path.getAttribute('d').replace(/Z/g, 'z'));
var NewPathAsString = path.getAttribute('d');
simple.remove()
//console.log(NewPathAsString)
$("span").text(NewPathAsString)
}

</script>
</body>
</html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	</head>
	<div class="page-header">
	<center>
	<h1>Conversion<small>(1.937)</small></h1></center>
	</div>
	<div class= "container-fluid">
	<div class = "hero-unit">
	<center>
	<legend>Convert SVG Line to relative</legend>
	<label>Mixed relative and Absolute path (string only)</label>
	<textarea rows = "4" id = "incorrectpath" type="text" placeholder="place text here"></textarea>
	<span id = "answerhere" class="help-block">Answer will appear here</span>
	<button onclick = "convertToRelative()" class="btn btn-inverse">Submit</button>
	</center>
	</div>
	</div>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	function convertToRelative() {

	var pathstring = document.getElementById("incorrectpath").value
	//console.log(pathstring + "got it in")
	var svg = d3.select("body").append("svg")
	var simple = svg.append("path")
	.attr("d", pathstring);
	var path = simple.node()

	function set(type) {
	var args = [].slice.call(arguments, 1)
	, rcmd = 'createSVGPathSeg'+ type +'Rel'
	, rseg = path[rcmd].apply(path, args);
	segs.replaceItem(rseg, i);
	}
	var dx, dy, x0, y0, x1, y1, x2, y2, segs = path.pathSegList;
	for (var x = 0, y = 0, i = 0, len = segs.numberOfItems; i < len; i++) {
	var seg = segs.getItem(i)
	, c = seg.pathSegTypeAsLetter;
	if (/[MLHVCSQTAZz]/.test(c)) {
	if ('x1' in seg) x1 = seg.x1 - x;
	if ('x2' in seg) x2 = seg.x2 - x;
	if ('y1' in seg) y1 = seg.y1 - y;
	if ('y2' in seg) y2 = seg.y2 - y;
	if ('x' in seg) dx = -x + (x = seg.x);
	if ('y' in seg) dy = -y + (y = seg.y);
	switch (c) {
	case 'M': set('Moveto',dx,dy); break;
	case 'L': set('Lineto',dx,dy); break;
	case 'H': set('LinetoHorizontal',dx); break;
	case 'V': set('LinetoVertical',dy); break;
	case 'C': set('CurvetoCubic',dx,dy,x1,y1,x2,y2); break;
	case 'S': set('CurvetoCubicSmooth',dx,dy,x2,y2); break;
	case 'Q': set('CurvetoQuadratic',dx,dy,x1,y1); break;
	case 'T': set('CurvetoQuadraticSmooth',dx,dy); break;
	case 'A': set('Arc',dx,dy,seg.r1,seg.r2,seg.angle,
	seg.largeArcFlag,seg.sweepFlag); break;
	case 'Z': case 'z': x = x0; y = y0; break;
	}
	}
	else {
	if ('x' in seg) x += seg.x;
	if ('y' in seg) y += seg.y;
	}
	// store the start of a subpath
	if (c == 'M' \|\| c == 'm') {
	x0 = x;
	y0 = y;
	}
	}
	path.setAttribute('d', path.getAttribute('d').replace(/Z/g, 'z'));
	var NewPathAsString = path.getAttribute('d');
	simple.remove()
	//console.log(NewPathAsString)
	$("span").text(NewPathAsString)
	}

	</script>
	</body>
	</html>