├── README.md
├── svgpath.js
├── svgpath.min.js
├── svgpath_externs.js
└── svgpath_test.html


/README.md:
--------------------------------------------------------------------------------
 1 | # SVGPath
 2 | 
 3 | SVG path segments parser and optimiser used at [aydos.com/svgedit](https://aydos.com/svgedit)
 4 | 
 5 | ## Functions
 6 | 
 7 | ### import
 8 | 
 9 | Import SVG Path string. SVGPath works with only one "path".
10 | 
11 | ### export
12 | 
13 | Export final SVG Path string.
14 | 
15 | ### exportlist
16 | 
17 | Export final SVG Path as segments array. You can work with this array.
18 | 
19 | ### analyse
20 | 
21 | Do some optimization on path. Remove consequtive Ms, remove points on the same line. Detect and mark (not delete) segment too close each other.
22 | 
23 | ### absolute
24 | 
25 | Make all segments absolute.
26 | 
27 | ### relative
28 | 
29 | Make all segmets relative.
30 | 
31 | ### round
32 | 
33 | Round decimal points.
34 | 
35 | ### move
36 | 
37 | Move the path with given dx, dy.
38 | 
39 | ### flip
40 | 
41 | Flip the path with given point or given axis.
42 | 
43 | ### center
44 | 
45 | Centralize the path to given point x, y.
46 | 
47 | ### scale
48 | 
49 | Scale the path.
50 | 
51 | ### rotate
52 | 
53 | Rotate the path wrt point x, y with angle d.


--------------------------------------------------------------------------------
/svgpath.js:
--------------------------------------------------------------------------------
  1 | // ==ClosureCompiler==
  2 | // @compilation_level ADVANCED_OPTIMIZATIONS
  3 | // ==/ClosureCompiler==
  4 | 
  5 | // SVGPath
  6 | // Fahri Aydos, aydos.com
  7 | // 2016-06-18
  8 | // https://aydos.com/svgedit
  9 | 
 10 | /** @constructor */
 11 | (SVGPath = function() {
 12 | 'use strict'
 13 | 
 14 | var dec = -1
 15 | var segs = []
 16 | 
 17 | /** @constructor */
 18 | var Segment = function() {		// All value are absolute
 19 | 	this.t = ""					// relatives are calculate via px and py
 20 | 	this.x = undefined			// this is good for optimize, analyse, rotate, etc
 21 | 	this.y = undefined			// bad for round, so round logic updated
 22 | 	this.px = undefined
 23 | 	this.py = undefined
 24 | 	this.x1 = undefined
 25 | 	this.y1 = undefined
 26 | 	this.x2 = undefined
 27 | 	this.y2 = undefined
 28 | 	this.r1 = undefined
 29 | 	this.r2 = undefined
 30 | 	this.ar = undefined
 31 | 	this.af = undefined
 32 | 	this.sf = undefined
 33 | 	this.info = ""				// Analyse result
 34 | }
 35 | 
 36 | // format the segment for export
 37 | // check absolute-relative, and round decimals
 38 | function formatsegment(s) {
 39 | 	var seg = new Segment()
 40 | 	seg.t = s.t
 41 | 	seg.x = s.t.charCodeAt(0)<96 ? rounddec(s.x) : rounddec(s.x - s.px)
 42 | 	seg.y = s.t.charCodeAt(0)<96 ? rounddec(s.y) : rounddec(s.y - s.py)
 43 | 	seg.px = rounddec(s.px)
 44 | 	seg.py = rounddec(s.py)
 45 | 	seg.x1 = s.x1==undefined ? undefined : s.t.charCodeAt(0)<96 ? rounddec(s.x1) : rounddec(s.x1 - s.px)
 46 | 	seg.y1 = s.y1==undefined ? undefined : s.t.charCodeAt(0)<96 ? rounddec(s.y1) : rounddec(s.y1 - s.py)
 47 | 	seg.x2 = s.x2==undefined ? undefined : s.t.charCodeAt(0)<96 ? rounddec(s.x2) : rounddec(s.x2 - s.px)
 48 | 	seg.y2 = s.y2==undefined ? undefined : s.t.charCodeAt(0)<96 ? rounddec(s.y2) : rounddec(s.y2 - s.py)
 49 | 	seg.r1 = s.r1==undefined ? undefined : rounddec(s.r1)
 50 | 	seg.r2 = s.r1==undefined ? undefined : rounddec(s.r2)
 51 | 	seg.ar = s.ar==undefined ? undefined : rounddec(s.ar)
 52 | 	seg.af = s.af
 53 | 	seg.sf = s.sf
 54 | 	seg.info = s.info
 55 | 	if (s.t == "M") {
 56 | 		seg.info += "m " + rounddec(s.x - s.px) + " " + rounddec(s.y - s.py)
 57 | 	}
 58 | 	if (s.t == "m") {
 59 | 		seg.info += "M " + rounddec(s.x) + " " + rounddec(s.y)
 60 | 	}
 61 | 	return seg
 62 | }
 63 | 
 64 | // import path from string
 65 | this.import = function(str) {
 66 | 	str = str.replace(/\s/g, " ")						// white spaces
 67 | 	str = str.trim()									// spaces at begin and end
 68 | 	str = str.replace(/,/g, " ")						// commas
 69 | 	str = str.replace(/([A-Za-z])([A-Za-z])/g, "$1 $2")	// two chars
 70 | 	str = str.replace(/([A-Za-z])(\d)/g, "$1 $2")		// char + decimal
 71 | 	str = str.replace(/([A-Za-z])(\.)/g, "$1 .")		// char + dot
 72 | 	str = str.replace(/([A-Za-z])(-)/g, "$1 -")			// char + negative number
 73 | 	str = str.replace(/(\d)([A-Za-z])/g, "$1 $2")		// decimal + char
 74 | 	str = str.replace(/(\d)(-)/g, "$1 -")				// decimal + negative number
 75 | 	var reg = /((?:-?[\d]*)\.\d+)((?:\.\d+)+)/g			// decimal + dot + decimal + dot + decimal
 76 | 	while (reg.test(str)) {
 77 | 		str = str.replace(reg, "$1 $2")
 78 | 	}
 79 | 	while (/  /.test(str)) {
 80 | 		str = str.replace(/  /g, " ")					// clear double spaces
 81 | 	}
 82 | 	var list = str.split(" ")
 83 | 	var pret = ""
 84 | 	var prex = 0
 85 | 	var prey = 0
 86 | 	var begx = 0
 87 | 	var begy = 0
 88 | 	var j = 0
 89 | 	var i = 0
 90 | 	segs = []
 91 | 
 92 | 	while (i<list.length) {
 93 | 		var seg = new Segment()
 94 | 
 95 | 		if (list[i].charCodeAt(0)>64) {
 96 | 			seg.t = list[i++]
 97 | 		} else {
 98 | 			if (pret == "")
 99 | 				break
100 | 			seg.t = pret == "M" ? "L" : pret == "m" ? "l" : pret
101 | 		}
102 | 		pret = seg.t
103 | 
104 | 		switch (seg.t) {
105 | 		case "Z":
106 | 		case "z":
107 | 			seg.x = begx
108 | 			seg.y = begy
109 | 			break
110 | 		case "M":
111 | 		case "L":
112 | 		case "H":
113 | 		case "V":
114 | 		case "T":
115 | 			seg.x = seg.t=="V" ? prex : Number(list[i++])
116 | 			seg.y = seg.t=="H" ? prey : Number(list[i++])
117 | 			begx = seg.t=="M" ? seg.x : begx
118 | 			begy = seg.t=="M" ? seg.y : begy
119 | 			break
120 | 		case "m":
121 | 		case "l":
122 | 		case "h":
123 | 		case "v":
124 | 		case "t":
125 | 			seg.x = seg.t=="v" ? prex : prex + Number(list[i++])
126 | 			seg.y = seg.t=="h" ? prey : prey + Number(list[i++])
127 | 			begx = seg.t=="m" ? seg.x : begx
128 | 			begy = seg.t=="m" ? seg.y : begy
129 | 			break
130 | 		case "A":
131 | 		case "a":
132 | 			seg.r1 = Number(list[i++])
133 | 			seg.r2 = Number(list[i++])
134 | 			seg.ar = Number(list[i++])
135 | 			seg.af = Number(list[i++])
136 | 			seg.sf = Number(list[i++])
137 | 			seg.x = seg.t=="A" ? Number(list[i++]) : prex + Number(list[i++])
138 | 			seg.y = seg.t=="A" ? Number(list[i++]) : prey + Number(list[i++])
139 | 			break
140 | 		case "C":
141 | 		case "Q":
142 | 		case "S":
143 | 			seg.x1 = seg.t=="S" ? undefined : Number(list[i++])
144 | 			seg.y1 = seg.t=="S" ? undefined : Number(list[i++])
145 | 			seg.x2 = seg.t=="Q" ? undefined : Number(list[i++])
146 | 			seg.y2 = seg.t=="Q" ? undefined : Number(list[i++])
147 | 			seg.x = Number(list[i++])
148 | 			seg.y = Number(list[i++])
149 | 			break
150 | 		case "c":
151 | 		case "q":
152 | 		case "s":
153 | 			seg.x1 = seg.t=="s" ? undefined : prex + Number(list[i++])
154 | 			seg.y1 = seg.t=="s" ? undefined : prey + Number(list[i++])
155 | 			seg.x2 = seg.t=="q" ? undefined : prex + Number(list[i++])
156 | 			seg.y2 = seg.t=="q" ? undefined : prey + Number(list[i++])
157 | 			seg.x = prex + Number(list[i++])
158 | 			seg.y = prey + Number(list[i++])
159 | 			break
160 | 		default:
161 | 			i++
162 | 		}
163 | 		seg.px = prex
164 | 		seg.py = prey
165 | 		prex = seg.x
166 | 		prey = seg.y
167 | 		segs[j++] = seg
168 | 	}
169 | }
170 | 
171 | // export path for final usage in <svg>
172 | this.export = function() {
173 | 	var str = ""
174 | 	var pre = ""
175 | 	for (var i=0; i<segs.length; i++) {
176 | 		var seg = formatsegment(segs[i])
177 | 		switch (seg.t) {
178 | 		case "Z":
179 | 		case "z":
180 | 			str += seg.t
181 | 			break
182 | 		case "M":
183 | 		case "m":
184 | 			str += seg.t + seg.x + " " + seg.y
185 | 			break
186 | 		case "L":
187 | 			str += (pre==seg.t || pre=="M") ? " " : "L"
188 | 			str += seg.x + " " + seg.y
189 | 			break
190 | 		case "l":
191 | 			str += (pre==seg.t || pre=="m") ? " " : "l"
192 | 			str += seg.x + " " + seg.y
193 | 			break
194 | 		case "H":
195 | 		case "h":
196 | 			str += pre==seg.t ? " " : seg.t
197 | 			str += seg.x
198 | 			break
199 | 		case "V":
200 | 		case "v":
201 | 			str += pre==seg.t ? " " : seg.t
202 | 			str += seg.y
203 | 			break
204 | 		case "A":
205 | 		case "a":
206 | 			str += pre==seg.t ? " " : seg.t
207 | 			str += seg.r1 + " " + seg.r2 + " " + seg.ar + " " + seg.af + " " + seg.sf + " " + seg.x + " " + seg.y
208 | 			break
209 | 		case "C":
210 | 		case "c":
211 | 			str += pre==seg.t ? " " : seg.t
212 | 			str += seg.x1 + " " + seg.y1 + " " + seg.x2 + " " + seg.y2 + " " + seg.x + " " + seg.y
213 | 			break
214 | 		case "Q":
215 | 		case "q":
216 | 			str += pre==seg.t ? " " : seg.t
217 | 			str += seg.x1 + " " + seg.y1 + " " + seg.x + " " + seg.y
218 | 			break
219 | 		case "S":
220 | 		case "s":
221 | 			str += pre==seg.t ? " " : seg.t
222 | 			str += seg.x2 + " " + seg.y2 + " " + seg.x + " " + seg.y
223 | 			break
224 | 		case "T":
225 | 		case "t":
226 | 			str += pre==seg.t ? " " : seg.t
227 | 			str += seg.x + " " + seg.y
228 | 			break
229 | 		}
230 | 		pre = seg.t
231 | 	}
232 | 	str = str.replace(/ -/g, "-")
233 | 	str = str.replace(/-0\./g, "-.")
234 | 	str = str.replace(/ 0\./g, " .")
235 | 	str = str.replace(/([A-Za-z])0\./g, "$1.")
236 | 	str = str.replace(/(\.\d+) \./g, "$1.")
237 | 	return str
238 | }
239 | 
240 | // export the segments as array
241 | this.exportlist = function() {
242 | 	var list = []
243 | 	for (var i=0; i<segs.length; i++) {
244 | 		list[i] = formatsegment(segs[i])
245 | 	}
246 | 	return list
247 | }
248 | 
249 | // make some analysis to minify
250 | this.analyse = function(dist) {
251 | 	dist = Number(dist)
252 | 	if (isNaN(dist))
253 | 		dist = 0
254 | 	if (dist < 0)
255 | 		dist = 0
256 | 
257 | 	for (var i=0; i<segs.length; i++) {
258 | 		segs[i].info = ""
259 | 	}
260 | 
261 | 	// convert L to H or V
262 | 	for (var i=0; i<segs.length; i++) {
263 | 		if ((segs[i].x==segs[i].px) && (segs[i].t.toUpperCase()=="L")) {
264 | 			segs[i].t = segs[i].t == "L" ? "V" : "v"
265 | 		} else
266 | 		if ((segs[i].y==segs[i].py) && (segs[i].t.toUpperCase()=="L")) {
267 | 			segs[i].t = segs[i].t == "L" ? "H" : "h"
268 | 		}
269 | 	}
270 | 
271 | 	var a = -1
272 | 	for (var i=0; i<segs.length-1; i++) {
273 | 		var dx = segs[i].x - segs[i].px
274 | 		var dy = segs[i].y - segs[i].py
275 | 		// two consecutive M
276 | 		if ((segs[i].t.toUpperCase()=="M") && (segs[i+1].t.toUpperCase()=="M")) {
277 | 			segs[i].info = "X"
278 | 			segs[i+1].px = i==0 ? 0 : segs[i-1].x
279 | 			segs[i+1].py = i==0 ? 0 : segs[i-1].y
280 | 		}
281 | 		// two consecutive Z
282 | 		if ((segs[i].t.toUpperCase()=="Z") && (segs[i+1].t.toUpperCase()=="Z")) {
283 | 			segs[i].info = "X"
284 | 		}
285 | 		// on the same line
286 | 		if (segs[i].t.toUpperCase()=="L" || segs[i].t.toUpperCase()=="H" || segs[i].t.toUpperCase()=="V") {
287 | 			var b = atan3(dx, dy)
288 | 			if (b == a) {
289 | 				segs[i-1].info = "X"
290 | 			}
291 | 			a = b
292 | 		} else {
293 | 			a = -1
294 | 		}
295 | 	}
296 | 
297 | 	// first segment must be M
298 | 	if (segs[0].t.toUpperCase()!="M") {
299 | 		segs[0].t = segs[0].t.charCodeAt(0)<96 ? "M" : "m"
300 | 	}
301 | 
302 | 	// last segment cant be M
303 | 	if (segs[segs.length-1].t.toUpperCase()=="M") {
304 | 		segs[segs.length-1].info = "X"
305 | 	}
306 | 
307 | 	// remove certainly removables
308 | 	var i = segs.length
309 | 	while (i--) {
310 | 		if (segs[i].info == "X")
311 | 			segs.splice(i, 1)
312 | 	}
313 | 
314 | 	if (dist==0)
315 | 		return
316 | 
317 | 	// too close segments
318 | 	for (var i=0; i<segs.length-1; i++) {
319 | 		if (segs[i].t.toUpperCase()=="Z")
320 | 			continue
321 | 		var dx = segs[i].x - segs[i+1].x
322 | 		var dy = segs[i].y - segs[i+1].y
323 | 		var d = Math.sqrt(dx*dx + dy*dy)
324 | 		if (d <= dist) {
325 | 			segs[i].info = "D " + d + " "
326 | 		}
327 | 	}
328 | }
329 | 
330 | function atan3(x, y) {
331 | 	var result = Math.atan2(y, x)
332 | 	if (result < 0) {
333 | 		result += 2 * Math.PI
334 | 	}
335 | 	return result
336 | }
337 | 
338 | // make all segments absolute
339 | this.absolute = function() {
340 | 	for (var i=0; i<segs.length; i++) {
341 | 		segs[i].t = segs[i].t.toUpperCase()
342 | 	}
343 | }
344 | 
345 | // make all segments relative
346 | this.relative = function() {
347 | 	for (var i=0; i<segs.length; i++) {
348 | 		segs[i].t = segs[i].t.toLowerCase()
349 | 	}
350 | }
351 | 
352 | // set the global dec variable, to rounding decimals
353 | this.round = function(d) {
354 | 	d = Number(d)
355 | 	if (isNaN(d))
356 | 		d = 0
357 | 	if (d<0)
358 | 		d = -1
359 | 	dec = Math.floor(d)
360 | }
361 | 
362 | function rounddec(num) {
363 | 	if (dec<0)
364 | 		return num
365 | 	if (num % 1 === 0) {
366 | 		return num
367 | 	} else if (dec==0) {
368 | 		return Math.round(num)
369 | 	} else {
370 | 		var pow = Math.pow(10, dec)
371 | 		return Math.round(num * pow) / pow
372 | 	}
373 | }
374 | 
375 | // move path with given dx, dy
376 | this.move = function(dx, dy) {
377 | 	for (var i=0; i<segs.length; i++) {
378 | 		segs[i].x += dx
379 | 		segs[i].y += dy
380 | 		segs[i].px += dx
381 | 		segs[i].py += dy
382 | 		segs[i].x1 = segs[i].x1==undefined ? undefined : segs[i].x1 + dx
383 | 		segs[i].y1 = segs[i].y1==undefined ? undefined : segs[i].y1 + dy
384 | 		segs[i].x2 = segs[i].x2==undefined ? undefined : segs[i].x2 + dx
385 | 		segs[i].y2 = segs[i].y2==undefined ? undefined : segs[i].y2 + dy
386 | 	}
387 | 	segs[0].px = 0
388 | 	segs[0].py = 0
389 | }
390 | 
391 | // flip horizontally with flip(undefined, center)
392 | // flip vertically, with flip(center, undefined)
393 | // flip wrt a point (px, py)
394 | this.flip = function(x, y) {
395 | 	for (var i=0; i<segs.length; i++) {
396 | 		if (x!=undefined) {
397 | 			segs[i].x = x + (x - segs[i].x)
398 | 			segs[i].px = x + (x - segs[i].px)
399 | 			segs[i].x1 = segs[i].x1==undefined ? undefined : x + (x - segs[i].x1)
400 | 			segs[i].x2 = segs[i].x2==undefined ? undefined : x + (x - segs[i].x2)
401 | 			segs[i].sf = segs[i].sf==undefined ? undefined : (segs[i].sf+1)%2
402 | 		}
403 | 		if (y!=undefined) {
404 | 			segs[i].y = y + (y - segs[i].y)
405 | 			segs[i].py = y + (y - segs[i].py)
406 | 			segs[i].y1 = segs[i].y1==undefined ? undefined : y + (y - segs[i].y1)
407 | 			segs[i].y2 = segs[i].y2==undefined ? undefined : y + (y - segs[i].y2)
408 | 			segs[i].sf = segs[i].sf==undefined ? undefined : (segs[i].sf+1)%2
409 | 		}
410 | 	}
411 | 	segs[0].px = 0
412 | 	segs[0].py = 0
413 | }
414 | 
415 | // move paths center to the given coordinates
416 | this.center = function(x, y) {
417 | 	var minx = segs[0].x
418 | 	var miny = segs[0].y
419 | 	var maxx = segs[0].x
420 | 	var maxy = segs[0].y
421 | 	for (var i=1; i<segs.length; i++) {
422 | 		minx = segs[i].x<minx ? segs[i].x : minx
423 | 		miny = segs[i].y<miny ? segs[i].y : miny
424 | 		maxx = segs[i].x>maxx ? segs[i].x : maxx
425 | 		maxy = segs[i].y>maxy ? segs[i].y : maxy
426 | 	}
427 | 	var dx = x - minx - (maxx-minx)/2
428 | 	var dy = y - miny - (maxy-miny)/2
429 | 	this.move(dx, dy)
430 | }
431 | 
432 | // scale path with a given ratio
433 | this.scale = function (ratio) {
434 | 	ratio = Number(ratio)
435 | 	if (isNaN(ratio))
436 | 		return
437 | 	if (ratio <= 0)
438 | 		return
439 | 	for (var i=0; i<segs.length; i++) {
440 | 		var seg = segs[i]
441 | 		seg.x *= ratio
442 | 		seg.y *= ratio
443 | 		seg.px *= ratio
444 | 		seg.py *= ratio
445 | 		seg.x1 = seg.x1==undefined ? undefined : ratio * seg.x1
446 | 		seg.y1 = seg.y1==undefined ? undefined : ratio * seg.y1
447 | 		seg.x2 = seg.x2==undefined ? undefined : ratio * seg.x2
448 | 		seg.y2 = seg.y2==undefined ? undefined : ratio * seg.y2
449 | 		seg.r1 = seg.r1==undefined ? undefined : ratio * seg.r1
450 | 		seg.r2 = seg.r2==undefined ? undefined : ratio * seg.r2
451 | 	}
452 | }
453 | 
454 | // rotate the path with given center and rotation degree
455 | this.rotate = function(x, y, d) {
456 | 	d *= Math.PI/180
457 | 	var sin = Math.sin(d)
458 | 	var cos = Math.cos(d)
459 | 	for (var i=0; i<segs.length; i++) {
460 | 		var rp = rotatepoint(segs[i].x, segs[i].y, x, y, sin, cos)
461 | 		segs[i].x = rp[0]
462 | 		segs[i].y = rp[1]
463 | 		var rp = rotatepoint(segs[i].px, segs[i].py, x, y, sin, cos)
464 | 		segs[i].px = rp[0]
465 | 		segs[i].py = rp[1]
466 | 		if (segs[i].x1!=undefined) {
467 | 			var rp = rotatepoint(segs[i].x1, segs[i].y1, x, y, sin, cos)
468 | 			segs[i].x1 = rp[0]
469 | 			segs[i].y1 = rp[1]
470 | 		}
471 | 		if (segs[i].x2!=undefined) {
472 | 			var rp = rotatepoint(segs[i].x2, segs[i].y2, x, y, sin, cos)
473 | 			segs[i].x2 = rp[0]
474 | 			segs[i].y2 = rp[1]
475 | 		}
476 | 		if (segs[i].t=="H" || segs[i].t=="V") {
477 | 			segs[i].t = "L"
478 | 		}
479 | 		if (segs[i].t=="h" || segs[i].t=="v") {
480 | 			segs[i].t = "l"
481 | 		}
482 | 	}
483 | 	segs[0].px = 0
484 | 	segs[0].py = 0
485 | }
486 | 
487 | function rotatepoint(px, py, ox, oy, sin, cos) {
488 | 	var x = cos * (px-ox) - sin * (py-oy) + ox
489 | 	var y = sin * (px-ox) + cos * (py-oy) + oy
490 | 	return [x, y]
491 | }
492 | 
493 | }) // end of SVGPath
494 | 


--------------------------------------------------------------------------------
/svgpath.min.js:
--------------------------------------------------------------------------------
 1 | SVGPath=function(){function p(a){var b=new q;b.t=a.t;b.x=96>a.t.charCodeAt(0)?g(a.x):g(a.x-a.px);b.y=96>a.t.charCodeAt(0)?g(a.y):g(a.y-a.py);b.px=g(a.px);b.py=g(a.py);b.x1=void 0==a.x1?void 0:96>a.t.charCodeAt(0)?g(a.x1):g(a.x1-a.px);b.y1=void 0==a.y1?void 0:96>a.t.charCodeAt(0)?g(a.y1):g(a.y1-a.py);b.x2=void 0==a.x2?void 0:96>a.t.charCodeAt(0)?g(a.x2):g(a.x2-a.px);b.y2=void 0==a.y2?void 0:96>a.t.charCodeAt(0)?g(a.y2):g(a.y2-a.py);b.r1=void 0==a.r1?void 0:g(a.r1);b.r2=void 0==a.r1?void 0:g(a.r2);
 2 | b.ar=void 0==a.ar?void 0:g(a.ar);b.af=a.af;b.sf=a.sf;b.info=a.info;"M"==a.t&&(b.info+="m "+g(a.x-a.px)+" "+g(a.y-a.py));"m"==a.t&&(b.info+="M "+g(a.x)+" "+g(a.y));return b}function g(a){if(0>m||0===a%1)return a;if(0==m)return Math.round(a);var b=Math.pow(10,m);return Math.round(a*b)/b}function n(a,b,c,e,h,l){return[l*(a-c)-h*(b-e)+c,h*(a-c)+l*(b-e)+e]}var m=-1,b=[],q=function(){this.t="";this.sf=this.af=this.ar=this.r2=this.r1=this.y2=this.x2=this.y1=this.x1=this.py=this.px=this.y=this.x=void 0;this.info=
 3 | ""};this["import"]=function(a){a=a.replace(/\s/g," ");a=a.trim();a=a.replace(/,/g," ");a=a.replace(/([A-Za-z])([A-Za-z])/g,"$1 $2");a=a.replace(/([A-Za-z])(\d)/g,"$1 $2");a=a.replace(/([A-Za-z])(\.)/g,"$1 .");a=a.replace(/([A-Za-z])(-)/g,"$1 -");a=a.replace(/(\d)([A-Za-z])/g,"$1 $2");a=a.replace(/(\d)(-)/g,"$1 -");for(var d=/((?:-?[\d]*)\.\d+)((?:\.\d+)+)/g;d.test(a);)a=a.replace(d,"$1 $2");for(;/  /.test(a);)a=a.replace(/  /g," ");a=a.split(" ");var d="",c=0,e=0,h=0,l=0,g=0,k=0;for(b=[];k<a.length;){var f=
 4 | new q;if(64<a[k].charCodeAt(0))f.t=a[k++];else{if(""==d)break;f.t="M"==d?"L":"m"==d?"l":d}d=f.t;switch(f.t){case "Z":case "z":f.x=h;f.y=l;break;case "M":case "L":case "H":case "V":case "T":f.x="V"==f.t?c:Number(a[k++]);f.y="H"==f.t?e:Number(a[k++]);h="M"==f.t?f.x:h;l="M"==f.t?f.y:l;break;case "m":case "l":case "h":case "v":case "t":f.x="v"==f.t?c:c+Number(a[k++]);f.y="h"==f.t?e:e+Number(a[k++]);h="m"==f.t?f.x:h;l="m"==f.t?f.y:l;break;case "A":case "a":f.r1=Number(a[k++]);f.r2=Number(a[k++]);f.ar=
 5 | Number(a[k++]);f.af=Number(a[k++]);f.sf=Number(a[k++]);f.x="A"==f.t?Number(a[k++]):c+Number(a[k++]);f.y="A"==f.t?Number(a[k++]):e+Number(a[k++]);break;case "C":case "Q":case "S":f.x1="S"==f.t?void 0:Number(a[k++]);f.y1="S"==f.t?void 0:Number(a[k++]);f.x2="Q"==f.t?void 0:Number(a[k++]);f.y2="Q"==f.t?void 0:Number(a[k++]);f.x=Number(a[k++]);f.y=Number(a[k++]);break;case "c":case "q":case "s":f.x1="s"==f.t?void 0:c+Number(a[k++]);f.y1="s"==f.t?void 0:e+Number(a[k++]);f.x2="q"==f.t?void 0:c+Number(a[k++]);
 6 | f.y2="q"==f.t?void 0:e+Number(a[k++]);f.x=c+Number(a[k++]);f.y=e+Number(a[k++]);break;default:k++}f.px=c;f.py=e;c=f.x;e=f.y;b[g++]=f}};this["export"]=function(){for(var a="",d="",c=0;c<b.length;c++){var e=p(b[c]);switch(e.t){case "Z":case "z":a+=e.t;break;case "M":case "m":a+=e.t+e.x+" "+e.y;break;case "L":a+=d==e.t||"M"==d?" ":"L";a+=e.x+" "+e.y;break;case "l":a+=d==e.t||"m"==d?" ":"l";a+=e.x+" "+e.y;break;case "H":case "h":a+=d==e.t?" ":e.t;a+=e.x;break;case "V":case "v":a+=d==e.t?" ":e.t;a+=e.y;
 7 | break;case "A":case "a":a+=d==e.t?" ":e.t;a+=e.r1+" "+e.r2+" "+e.ar+" "+e.af+" "+e.sf+" "+e.x+" "+e.y;break;case "C":case "c":a+=d==e.t?" ":e.t;a+=e.x1+" "+e.y1+" "+e.x2+" "+e.y2+" "+e.x+" "+e.y;break;case "Q":case "q":a+=d==e.t?" ":e.t;a+=e.x1+" "+e.y1+" "+e.x+" "+e.y;break;case "S":case "s":a+=d==e.t?" ":e.t;a+=e.x2+" "+e.y2+" "+e.x+" "+e.y;break;case "T":case "t":a+=d==e.t?" ":e.t,a+=e.x+" "+e.y}d=e.t}a=a.replace(/ -/g,"-");a=a.replace(/-0\./g,"-.");a=a.replace(/ 0\./g," .");a=a.replace(/([A-Za-z])0\./g,
 8 | "$1.");return a=a.replace(/(\.\d+) \./g,"$1.")};this.exportlist=function(){for(var a=[],d=0;d<b.length;d++)a[d]=p(b[d]);return a};this.analyse=function(a){a=Number(a);isNaN(a)&&(a=0);0>a&&(a=0);for(var d=0;d<b.length;d++)b[d].info="";for(d=0;d<b.length;d++)b[d].x==b[d].px&&"L"==b[d].t.toUpperCase()?b[d].t="L"==b[d].t?"V":"v":b[d].y==b[d].py&&"L"==b[d].t.toUpperCase()&&(b[d].t="L"==b[d].t?"H":"h");for(var c=-1,d=0;d<b.length-1;d++){var e=b[d].x-b[d].px,h=b[d].y-b[d].py;"M"==b[d].t.toUpperCase()&&"M"==
 9 | b[d+1].t.toUpperCase()&&(b[d].info="X",b[d+1].px=0==d?0:b[d-1].x,b[d+1].py=0==d?0:b[d-1].y);"Z"==b[d].t.toUpperCase()&&"Z"==b[d+1].t.toUpperCase()&&(b[d].info="X");"L"==b[d].t.toUpperCase()||"H"==b[d].t.toUpperCase()||"V"==b[d].t.toUpperCase()?(e=Math.atan2(h,e),0>e&&(e+=2*Math.PI),e==c&&(b[d-1].info="X"),c=e):c=-1}"M"!=b[0].t.toUpperCase()&&(b[0].t=96>b[0].t.charCodeAt(0)?"M":"m");"M"==b[b.length-1].t.toUpperCase()&&(b[b.length-1].info="X");for(d=b.length;d--;)"X"==b[d].info&&b.splice(d,1);if(0!=
10 | a)for(d=0;d<b.length-1;d++)"Z"!=b[d].t.toUpperCase()&&(e=b[d].x-b[d+1].x,h=b[d].y-b[d+1].y,c=Math.sqrt(e*e+h*h),c<=a&&(b[d].info="D "+c+" "))};this.absolute=function(){for(var a=0;a<b.length;a++)b[a].t=b[a].t.toUpperCase()};this.relative=function(){for(var a=0;a<b.length;a++)b[a].t=b[a].t.toLowerCase()};this.round=function(a){a=Number(a);isNaN(a)&&(a=0);0>a&&(a=-1);m=Math.floor(a)};this.move=function(a,d){for(var c=0;c<b.length;c++)b[c].x+=a,b[c].y+=d,b[c].px+=a,b[c].py+=d,b[c].x1=void 0==b[c].x1?
11 | void 0:b[c].x1+a,b[c].y1=void 0==b[c].y1?void 0:b[c].y1+d,b[c].x2=void 0==b[c].x2?void 0:b[c].x2+a,b[c].y2=void 0==b[c].y2?void 0:b[c].y2+d;b[0].px=0;b[0].py=0};this.flip=function(a,d){for(var c=0;c<b.length;c++)void 0!=a&&(b[c].x=a+(a-b[c].x),b[c].px=a+(a-b[c].px),b[c].x1=void 0==b[c].x1?void 0:a+(a-b[c].x1),b[c].x2=void 0==b[c].x2?void 0:a+(a-b[c].x2),b[c].sf=void 0==b[c].sf?void 0:(b[c].sf+1)%2),void 0!=d&&(b[c].y=d+(d-b[c].y),b[c].py=d+(d-b[c].py),b[c].y1=void 0==b[c].y1?void 0:d+(d-b[c].y1),
12 | b[c].y2=void 0==b[c].y2?void 0:d+(d-b[c].y2),b[c].sf=void 0==b[c].sf?void 0:(b[c].sf+1)%2);b[0].px=0;b[0].py=0};this.center=function(a,d){for(var c=b[0].x,e=b[0].y,h=b[0].x,l=b[0].y,g=1;g<b.length;g++)c=b[g].x<c?b[g].x:c,e=b[g].y<e?b[g].y:e,h=b[g].x>h?b[g].x:h,l=b[g].y>l?b[g].y:l;this.move(a-c-(h-c)/2,d-e-(l-e)/2)};this.scale=function(a){a=Number(a);if(!(isNaN(a)||0>=a))for(var d=0;d<b.length;d++){var c=b[d];c.x*=a;c.y*=a;c.px*=a;c.py*=a;c.x1=void 0==c.x1?void 0:a*c.x1;c.y1=void 0==c.y1?void 0:a*
13 | c.y1;c.x2=void 0==c.x2?void 0:a*c.x2;c.y2=void 0==c.y2?void 0:a*c.y2;c.r1=void 0==c.r1?void 0:a*c.r1;c.r2=void 0==c.r2?void 0:a*c.r2}};this.rotate=function(a,d,c){c*=Math.PI/180;var e=Math.sin(c);c=Math.cos(c);for(var h=0;h<b.length;h++){var g=n(b[h].x,b[h].y,a,d,e,c);b[h].x=g[0];b[h].y=g[1];g=n(b[h].px,b[h].py,a,d,e,c);b[h].px=g[0];b[h].py=g[1];void 0!=b[h].x1&&(g=n(b[h].x1,b[h].y1,a,d,e,c),b[h].x1=g[0],b[h].y1=g[1]);void 0!=b[h].x2&&(g=n(b[h].x2,b[h].y2,a,d,e,c),b[h].x2=g[0],b[h].y2=g[1]);if("H"==
14 | b[h].t||"V"==b[h].t)b[h].t="L";if("h"==b[h].t||"v"==b[h].t)b[h].t="l"}b[0].px=0;b[0].py=0}};
15 | 


--------------------------------------------------------------------------------
/svgpath_externs.js:
--------------------------------------------------------------------------------
 1 | // externs file for google's closure compiler
 2 | // usage:
 3 | // java -jar compiler.jar -O ADVANCED myapp.js --externs svgparser_externs.js > myapp.min.js
 4 | var SVGPath = {
 5 | 	"import" : function () {},
 6 | 	"export" : function () {},
 7 | 	"exportlist" : function () {},
 8 | 	"analyse" : function () {},
 9 | 	"absolute" : function () {},
10 | 	"relative" : function () {},
11 | 	"round" : function () {},
12 | 	"move" : function () {},
13 | 	"flip" : function () {},
14 | 	"center" : function () {},
15 | 	"scale" : function () {},
16 | 	"rotate" : function () {},
17 | }


--------------------------------------------------------------------------------
/svgpath_test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta charset=utf-8>
  5 | <title>SVGPath.js Test Page</title>
  6 | <style>
  7 | svg {
  8 | 	border: 2px solid black;
  9 | 	width: 512px;
 10 | 	height: 512px;
 11 | }
 12 | </style>
 13 | <script type="text/javascript" src="svgpath.js"></script>
 14 | </head>
 15 | <body>
 16 | <h1 id="info"></h1>
 17 | <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path id="box1" d=""></svg>
 18 | <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path id="box2" d=""></svg>
 19 | <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path id="box3" d=""></svg>
 20 | <script type="text/javascript">
 21 | path = `M20 20C40 0 80 0 100 20S40 40 100 100Q20 20 20 100T4 80A40 40 0 0 0 20 20Z
 22 | 		M35 20 35 40 L 55 40 L 55 20 Z M 60 20 V 40 H 80 Z`
 23 | path = "M104.081 62.361C180.879-14.44 334.481-14.44 411.279 62.361S180.879 139.159 411.279 369.559Q104.081 62.361 104.081 369.559T42.639 292.761A153.599 153.599 0 0 0 104.081 62.361ZM161.681 62.361 161.681 139.159 238.479 139.159 238.479 62.361ZM257.68 62.361V139.159H334.481Z"
 24 | 
 25 | info = document.getElementById("info")
 26 | box1 = document.getElementById("box1")
 27 | box2 = document.getElementById("box2")
 28 | box3 = document.getElementById("box3")
 29 | 
 30 | timeout = 0
 31 | 
 32 | svg = new SVGPath()
 33 | svg.import(path)
 34 | box1.setAttribute("d", svg.export())	// draw original
 35 | 
 36 | test1() // start with test1
 37 | 
 38 | function test1() {
 39 | 	info.innerHTML = "Test 1, Absolute, Relative"
 40 | 	var svga = new SVGPath()
 41 | 	svga.import(svg.export())
 42 | 	var svgb = new SVGPath()
 43 | 	svgb.import(svg.export())
 44 | 	svga.absolute()
 45 | 	svgb.relative()
 46 | 	box2.setAttribute("d", svga.export())
 47 | 	box3.setAttribute("d", svgb.export())
 48 | 	window.setTimeout(test2, 1000)
 49 | }
 50 | 
 51 | function test2() {
 52 | 	info.innerHTML = "Test 2 - Round"
 53 | 	var svga = new SVGPath()
 54 | 	svga.import(svg.export())
 55 | 	var svgb = new SVGPath()
 56 | 	svgb.import(svg.export())
 57 | 	svga.round(3)
 58 | 	svgb.round(1)
 59 | 	box2.setAttribute("d", svga.export())
 60 | 	box3.setAttribute("d", svgb.export())
 61 | 	window.setTimeout(test3, 1000)
 62 | }
 63 | 
 64 | function test3() {
 65 | 	info.innerHTML = "Test 3 - Multi Absolute, Relative, Round"
 66 | 	var svga = new SVGPath()
 67 | 	svga.import(svg.export())
 68 | 	var svgb = new SVGPath()
 69 | 	svgb.import(svg.export())
 70 | 	svga.absolute()
 71 | 	svga.relative()
 72 | 	svga.absolute()
 73 | 	svga.relative()
 74 | 	svga.absolute()
 75 | 	svga.relative()
 76 | 	svgb.round(1)
 77 | 	svgb.round(3)
 78 | 	svgb.round(0)
 79 | 	svgb.round(1)
 80 | 	svgb.round(2)
 81 | 	svgb.round(0)
 82 | 	box2.setAttribute("d", svga.export())
 83 | 	box3.setAttribute("d", svgb.export())
 84 | 	window.setTimeout(test4, 1000)
 85 | }
 86 | 
 87 | function test4() {
 88 | 	info.innerHTML = "Test 4, Move"
 89 | 	var svga = new SVGPath()
 90 | 	svga.import(svg.export())
 91 | 	svga.move(30,30)
 92 | 	box2.setAttribute("d", svga.export())
 93 | 	svga.move(-30,-30)
 94 | 	box3.setAttribute("d", svga.export())
 95 | 	window.setTimeout(test5, 1000)
 96 | }
 97 | 
 98 | function test5() {
 99 | 	info.innerHTML = "Test 5 - Scale"
100 | 	var svga = new SVGPath()
101 | 	svga.import(svg.export())
102 | 	var svgb = new SVGPath()
103 | 	svgb.import(svg.export())
104 | 	svga.scale(0.57)
105 | 	svgb.scale(1.23)
106 | 	box2.setAttribute("d", svga.export())
107 | 	box3.setAttribute("d", svgb.export())
108 | 	window.setTimeout(test6, 1000)
109 | }
110 | 
111 | function test6() {
112 | 	info.innerHTML = "Test 6 - Flip Vertical, Horizontal"
113 | 	var svga = new SVGPath()
114 | 	svga.import(svg.export())
115 | 	var svgb = new SVGPath()
116 | 	svgb.import(svg.export())
117 | 	svga.flip(undefined, 256)
118 | 	svgb.flip(256, undefined)
119 | 	box2.setAttribute("d", svga.export())
120 | 	box3.setAttribute("d", svgb.export())
121 | 	window.setTimeout(test7, 1000)
122 | }
123 | 
124 | function test7() {
125 | 	info.innerHTML = "Test 6 - Rotate"
126 | 	var svga = new SVGPath()
127 | 	svga.import(svg.export())
128 | 	var svgb = new SVGPath()
129 | 	svgb.import(svg.export())
130 | 	svga.rotate(256, 256, -23)
131 | 	svgb.rotate(256, 256, 127)
132 | 	box2.setAttribute("d", svga.export())
133 | 	box3.setAttribute("d", svgb.export())
134 | 	window.setTimeout(test8, 1000)
135 | }
136 | 
137 | function test8() {
138 | 	info.innerHTML = "Test 8 - Rotate"
139 | 	var svga = new SVGPath()
140 | 	svga.import(svg.export())
141 | 	var svgb = new SVGPath()
142 | 	svgb.import(svg.export())
143 | 	svga.scale(.35)
144 | 	svga.move(45,45)
145 | 	svga.scale(.67)
146 | 	svga.move(5,5)
147 | 	timeout = window.setInterval(test8interval, 20)
148 | 	function test8interval() {
149 | 		svga.rotate(256,256,1)
150 | 		box2.setAttribute("d", svga.export())
151 | 		svgb.rotate(256,256,-3)
152 | 		box3.setAttribute("d", svgb.export())
153 | 	}
154 | 	window.setTimeout(test9, 5000)
155 | }
156 | 
157 | function test9() {
158 | 	window.clearTimeout(timeout)
159 | 	info.innerHTML = "Test end..."
160 | 	box2.setAttribute("d", "")
161 | 	box3.setAttribute("d", "")
162 | }
163 | 
164 | </script>
165 | </body>
166 | </html>


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