├── LICENSE
├── readme.md
├── src
    └── svgpathnormalizer.js
└── test
    └── test.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Tadahisa Motooka
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # SVGPathNormalizer #
 2 | 
 3 | Most modern web browsers do not implement [SVGAnimatedPathData.normalizedPathSegList](http://www.w3.org/TR/SVG/paths.html#InterfaceSVGAnimatedPathData) probably because of its severe specification : for example, it is too difficult to express elliptical arcs by cubic bezier curves.
 4 | 
 5 | This normalizer expresses paths using the following commands only :
 6 | 
 7 | - SVG_PATHSEG_MOVETO_ABS (M),
 8 | - SVG_PATHSEG_LINETO_ABS (L),
 9 | - SVG_PATHSEG_CURVETO_CUBIC_ABS (C),
10 | - SVG_PATHSEG_CURVETO_QUADRATIC_ABS (Q),
11 | - SVG_PATHSEG_ARC_ABS (A) and
12 | - SVG_PATHSEG_CLOSEPATH (z).
13 | 
14 | ## License ##
15 | MIT License. See `LICENSE` file for more details.
16 | 
17 | ## Usage ##
18 | 1. Import the file `svgpathnormalizer.js` in your HTML or SVG document
19 | 1. Get reference to `<path>` element. For example, use `document.getElementById(idString)`
20 | 1. Get an instance of `SVGPathSegList` via `pathSegList` property of the `<path>` element
21 | 1. Call `SVGPathNormalizer.normalize` function with just one argument : the instance of `SVGPathSegList`
22 | 1. You will get another instance of `SVGPathSegList` which is normalized.
23 | 
24 | Please note that the original `<path>` will NOT be modified even if you modify the returned instance of `SVGPathSegList`.
25 | 
26 | ## Requirement ##
27 | Your runtime environment MUST support SVG 1.1. Most modern web browsers - including Internet Explorer 11 - match the requirement.
28 | 
29 | Chrome 48 and Firefox 43 have removed `SVGPathSegList` implementation. So you will also require [SVGPathSeg polyfill](https://github.com/progers/pathseg).
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/src/svgpathnormalizer.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * SVGPathNormalizer
  3 |  * https://github.com/motooka/SVGPathNormalizer
  4 |  * 
  5 |  * Copyright (c) Tadahisa Motooka
  6 |  * Licensed under the MIT license
  7 |  * See the file "LICENSE" for more detail.
  8 |  * 
  9 |  */
 10 | var SVGPathNormalizer = {};
 11 | 
 12 | SVGPathNormalizer.normalize = function(pathSegList) {
 13 | 	var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 14 | 	var newPathSegList = path.pathSegList;
 15 | 	var seg = null;
 16 | 	var newSeg = null;
 17 | 	var curX = 0;
 18 | 	var curY = 0;
 19 | 	var newX = 0;
 20 | 	var newY = 0;
 21 | 	var startX = null;
 22 | 	var startY = null;
 23 | 	var lastCommandIsCubicBezier = false;
 24 | 	var lastCommandIsQuadraticBezier = false;
 25 | 	var lastControlX = null;
 26 | 	var lastControlY = null;
 27 | 	var thisCommandIsCubicBezier = false;
 28 | 	var thisCommandIsQuadraticBezier = false;
 29 | 	
 30 | 	
 31 | 	for(var i=0; i<pathSegList.numberOfItems; i++) {
 32 | 		seg = pathSegList.getItem(i);
 33 | 		thisCommandIsCubicBezier = false;
 34 | 		thisCommandIsQuadraticBezier = false;
 35 | 		switch(seg.pathSegType) {
 36 | 			// z
 37 | 			case SVGPathSeg.PATHSEG_CLOSEPATH:
 38 | 				newX = startX;
 39 | 				newY = startY;
 40 | 				newSeg = path.createSVGPathSegClosePath();
 41 | 				startX = null;
 42 | 				startY = null;
 43 | 				break;
 44 | 			
 45 | 			// M
 46 | 			case SVGPathSeg.PATHSEG_MOVETO_ABS:
 47 | 				newX = seg.x;
 48 | 				newY = seg.y;
 49 | 				newSeg = path.createSVGPathSegMovetoAbs(newX, newY);
 50 | 				break;
 51 | 			
 52 | 			// m
 53 | 			case SVGPathSeg.PATHSEG_MOVETO_REL:
 54 | 				newX = curX + seg.x;
 55 | 				newY = curY + seg.y;
 56 | 				newSeg = path.createSVGPathSegMovetoAbs(newX, newY);
 57 | 				break;
 58 | 			
 59 | 			case SVGPathSeg.PATHSEG_LINETO_ABS:
 60 | 				newX = seg.x;
 61 | 				newY = seg.y;
 62 | 				newSeg = path.createSVGPathSegLinetoAbs(newX, newY);
 63 | 				break;
 64 | 			
 65 | 			case SVGPathSeg.PATHSEG_LINETO_REL:
 66 | 				newX = curX + seg.x;
 67 | 				newY = curY + seg.y;
 68 | 				newSeg = path.createSVGPathSegLinetoAbs(newX, newY);
 69 | 				break;
 70 | 			
 71 | 			case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
 72 | 				newX = seg.x;
 73 | 				newY = seg.y;
 74 | 				lastControlX = seg.x2;
 75 | 				lastControlY = seg.y2;
 76 | 				newSeg = path.createSVGPathSegCurvetoCubicAbs(newX, newY, seg.x1, seg.y1, seg.x2, seg.y2);
 77 | 				thisCommandIsCubicBezier = true;
 78 | 				break;
 79 | 			
 80 | 			case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
 81 | 				newX = curX + seg.x;
 82 | 				newY = curY + seg.y;
 83 | 				lastControlX = curX + seg.x2;
 84 | 				lastControlY = curY + seg.y2;
 85 | 				newSeg = path.createSVGPathSegCurvetoCubicAbs(newX, newY, (curX + seg.x1), (curY + seg.y1), (curX + seg.x2), (curY + seg.y2));
 86 | 				thisCommandIsCubicBezier = true;
 87 | 				break;
 88 | 			
 89 | 			case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
 90 | 				newX = seg.x;
 91 | 				newY = seg.y;
 92 | 				lastControlX = seg.x1;
 93 | 				lastControlY = seg.y1;
 94 | 				newSeg = path.createSVGPathSegCurvetoQuadraticAbs(newX, newY, seg.x1, seg.y1);
 95 | 				thisCommandIsQuadraticBezier = true;
 96 | 				break;
 97 | 			
 98 | 			case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
 99 | 				newX = curX + seg.x;
100 | 				newY = curY + seg.y;
101 | 				lastControlX = curX + seg.x1;
102 | 				lastControlY = curY + seg.y1;
103 | 				newSeg = path.createSVGPathSegCurvetoQuadraticAbs(newX, newY, (curX + seg.x1), (curY + seg.y1));
104 | 				thisCommandIsQuadraticBezier = true;
105 | 				break;
106 | 			
107 | 			case SVGPathSeg.PATHSEG_ARC_ABS:
108 | 				newX = seg.x;
109 | 				newY = seg.y;
110 | 				newSeg = path.createSVGPathSegArcAbs(newX, newY, seg.r1, seg.r2, seg.angle, seg.largeArcFlag, seg.sweepFlag);
111 | 				break;
112 | 			
113 | 			case SVGPathSeg.PATHSEG_ARC_REL:
114 | 				newX = curX + seg.x;
115 | 				newY = curY + seg.y;
116 | 				newSeg = path.createSVGPathSegArcAbs(newX, newY, seg.r1, seg.r2, seg.angle, seg.largeArcFlag, seg.sweepFlag);
117 | 				break;
118 | 			
119 | 			case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
120 | 				newX = seg.x;
121 | 				newY = curY;
122 | 				newSeg = path.createSVGPathSegLinetoAbs(newX, newY);
123 | 				break;
124 | 			
125 | 			case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
126 | 				newX = curX + seg.x;
127 | 				newY = curY;
128 | 				newSeg = path.createSVGPathSegLinetoAbs(newX, newY);
129 | 				break;
130 | 			
131 | 			case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
132 | 				newX = curX;
133 | 				newY = seg.y;
134 | 				newSeg = path.createSVGPathSegLinetoAbs(newX, newY);
135 | 				break;
136 | 			
137 | 			case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:
138 | 				newX = curX;
139 | 				newY = curY + seg.y;
140 | 				newSeg = path.createSVGPathSegLinetoAbs(newX, newY);
141 | 				break;
142 | 			
143 | 			case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
144 | 				newX = seg.x;
145 | 				newY = seg.y;
146 | 				var firstControlX = curX;
147 | 				var firstControlY = curY;
148 | 				if(lastCommandIsCubicBezier) {
149 | 					var refl = SVGPathNormalizer.getReflectionPoint(lastControlX, lastControlY, curX, curY);
150 | 					firstControlX = refl.x;
151 | 					firstControlY = refl.y;
152 | 				}
153 | 				lastControlX = seg.x2;
154 | 				lastControlY = seg.y2;
155 | 				newSeg = path.createSVGPathSegCurvetoCubicAbs(newX, newY, firstControlX, firstControlY, lastControlX, lastControlY);
156 | 				thisCommandIsCubicBezier = true;
157 | 				break;
158 | 			
159 | 			case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
160 | 				newX = curX + seg.x;
161 | 				newY = curY + seg.y;
162 | 				var firstControlX = curX;
163 | 				var firstControlY = curY;
164 | 				if(lastCommandIsCubicBezier) {
165 | 					var refl = SVGPathNormalizer.getReflectionPoint(lastControlX, lastControlY, curX, curY);
166 | 					firstControlX = refl.x;
167 | 					firstControlY = refl.y;
168 | 				}
169 | 				lastControlX = (curX + seg.x2);
170 | 				lastControlY = (curY + seg.y2);
171 | 				newSeg = path.createSVGPathSegCurvetoCubicAbs(newX, newY, firstControlX, firstControlY, lastControlX, lastControlY);
172 | 				thisCommandIsCubicBezier = true;
173 | 				break;
174 | 				
175 | 			case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
176 | 				newX = seg.x;
177 | 				newY = seg.y;
178 | 				var firstControlX = curX;
179 | 				var firstControlY = curY;
180 | 				if(lastCommandIsQuadraticBezier) {
181 | 					var refl = SVGPathNormalizer.getReflectionPoint(lastControlX, lastControlY, curX, curY);
182 | 					firstControlX = refl.x;
183 | 					firstControlY = refl.y;
184 | 				}
185 | 				newSeg = path.createSVGPathSegCurvetoQuadraticAbs(newX, newY, firstControlX, firstControlY);
186 | 				lastControlX = firstControlX;
187 | 				lastControlY = firstControlY;
188 | 				thisCommandIsQuadraticBezier = true;
189 | 				break;
190 | 			
191 | 			case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:
192 | 				newX = curX + seg.x;
193 | 				newY = curY + seg.y;
194 | 				var firstControlX = curX;
195 | 				var firstControlY = curY;
196 | 				if(lastCommandIsQuadraticBezier) {
197 | 					var refl = SVGPathNormalizer.getReflectionPoint(lastControlX, lastControlY, curX, curY);
198 | 					firstControlX = refl.x;
199 | 					firstControlY = refl.y;
200 | 				}
201 | 				newSeg = path.createSVGPathSegCurvetoQuadraticAbs(newX, newY, firstControlX, firstControlY);
202 | 				lastControlX = firstControlX;
203 | 				lastControlY = firstControlY;
204 | 				thisCommandIsQuadraticBezier = true;
205 | 				break;
206 | 				
207 | 			default:
208 | 				newSeg = seg;
209 | 				break;
210 | 		}
211 | 		newPathSegList.appendItem(newSeg);
212 | 		curX = newX;
213 | 		curY = newY;
214 | 		if(startX === null && startY === null) {
215 | 			startX = curX;
216 | 			startY = curY;
217 | 		}
218 | 		
219 | 		if(thisCommandIsCubicBezier || thisCommandIsQuadraticBezier) {
220 | 			// do nothing
221 | 		}
222 | 		else {
223 | 			// clear last controll point
224 | 			lastControlX = null;
225 | 			lastControlY = null;
226 | 		}
227 | 		lastCommandIsCubicBezier = thisCommandIsCubicBezier;
228 | 		lastCommandIsQuadraticBezier = thisCommandIsQuadraticBezier;
229 | 	}
230 | 	
231 | 	return newPathSegList;
232 | };
233 | 
234 | SVGPathNormalizer.getReflectionPoint = function(lastControlX, lastControlY, curX, curY) {
235 | 	return {
236 | 		x: curX + (curX - lastControlX),
237 | 		y: curY + (curY - lastControlY)
238 | 	};
239 | };
240 | 


--------------------------------------------------------------------------------
/test/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <!--
 4 | /**
 5 |  * SVGPathNormalizer : test HTML file
 6 |  * https://github.com/motooka/SVGPathNormalizer
 7 |  * 
 8 |  * Copyright (c) Tadahisa Motooka
 9 |  * Licensed under the MIT license
10 |  * See the file "LICENSE" for more detail.
11 |  * 
12 |  */
13 | -->
14 | <head>
15 | 	<meta charset="UTF-8">
16 | 	<title>SVGPathNormalizer Test Page</title>
17 | 
18 | <script type="text/javascript" src="../src/svgpathnormalizer.js"></script>
19 | <script type="text/javascript">
20 | function drawBlackLine(buttonObj) {
21 | 	var canvas = document.getElementById('svgCanvas');
22 | 	var originalPath = document.getElementById('originalPath');
23 | 	var normalizedPathSegList = SVGPathNormalizer.normalize(originalPath.pathSegList);
24 | 	var pathSegListBufferArray = [];
25 | 	for(var i=0; i<normalizedPathSegList.numberOfItems; i++) {
26 | 		pathSegListBufferArray.push(normalizedPathSegList.getItem(i));
27 | 	}
28 | 	
29 | 	var newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
30 | 	newPath.setAttribute('id', 'newPath');
31 | 	newPath.setAttribute('fill', 'none');
32 | 	newPath.setAttribute('stroke', '#000000');
33 | 	newPath.setAttribute('stroke-width', 1);
34 | 	var newPathSegList = newPath.pathSegList;
35 | 	newPathSegList.initialize(pathSegListBufferArray[0]);
36 | 	for(var i=1; i<pathSegListBufferArray.length; i++) {
37 | 		// on Safari, this operation affects normalizedPathSegList
38 | 		newPathSegList.appendItem(pathSegListBufferArray[i]);
39 | 	}
40 | 	
41 | 	canvas.appendChild(newPath);
42 | }
43 | </script>
44 | <style type="text/css">
45 | #svgCanvas {
46 | 	border: 3px solid #c0c0c0;
47 | 	margin: 15px;
48 | }
49 | </style>
50 | </head>
51 | <body>
52 | <h1>SVGPathNormalizer Test Page</h1>
53 | <p>
54 | 	The red line is the original line. By clicking the button below, a black line will appear. If it does not differ from the red one, we can say OK.<br/>
55 | 	<input type="button" value="draw a black line" onclick="drawBlackLine(this);"/>
56 | </p>
57 | <hr/>
58 | <svg id="svgCanvas" xmlns="http://www.w3.org/2000/svg" width="800" height="300" viewBox="0 0 800 300">
59 | 	<path
60 | 		id="originalPath"
61 | 		fill="none"
62 | 		stroke="#ff0000"
63 | 		stroke-width="1"
64 | 		d="
65 | 			M 10 10
66 | 			L 380 280
67 | 			H 50
68 | 			V 100
69 | 			C 120 0 240 30 300 90
70 | 			S 100 270 140 280
71 | 			Q 400 280 380 190
72 | 			T 380 10
73 | 			A 80 120 0 0 1 310 20
74 | 			A 10 10 0 1 0 305 22
75 | 			S 280 30 280 15
76 | 			H 275
77 | 			T 260 10
78 | 			Z
79 | 			
80 | 			m 400 0
81 | 			l 370 270
82 | 			h -330
83 | 			v -180
84 | 			c 70 -100 190 -70 250 -10
85 | 			s -200 180 -160 190
86 | 			q 260 0 240 -90
87 | 			t 0 -180
88 | 			a 80 120 0 0 1 -70 10
89 | 			a 10 10 0 1 0 -5 2
90 | 			s -30 10 -30 -5
91 | 			h -5
92 | 			t -15 -5
93 | 			z
94 | 			"></path>
95 | </svg>
96 | 
97 | </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------