paper 0.12.20 → 0.14.0

package/dist/paper-core.js

@@ -1,5 +1,5 @@
 /*!
- * Paper.js v0.12.20 - The Swiss Army Knife of Vector Graphics Scripting.
+ * Paper.js v0.14.0 - The Swiss Army Knife of Vector Graphics Scripting.
  * http://paperjs.org/
  *
  * Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
@@ -9,7 +9,7 @@
  *
  * All rights reserved.
  *
- * Date: Sun Oct 18 17:04:58 2026 +0200
+ * Date: Tue Oct 20 01:20:31 2026 +0200
  *
  ***
  *
@@ -36,6 +36,9 @@ self = self || require('./node/self.js');
 var window = self.window,
 	document = self.document;
 
+if (window && !document.createElement('canvas').getContext('2d'))
+	window = null;
+
 var Base = new function() {
 	var hidden = /^(statics|enumerable|beans|preserve)$/,
 		array = [],
@@ -777,7 +780,8 @@ var PaperScope = Base.extend({
 			applyMatrix: true,
 			insertItems: true,
 			handleSize: 4,
-			hitTolerance: 0
+			hitTolerance: 0,
+			scaleStrokes: false
 		});
 		this.project = null;
 		this.projects = [];
@@ -821,7 +825,7 @@ var PaperScope = Base.extend({
 		}
 	},
 
-	version: "0.12.20",
+	version: "0.14.0",
 
 	getView: function() {
 		var project = this.project;
@@ -845,9 +849,10 @@ var PaperScope = Base.extend({
 				}
 			});
 		});
-		for (var key in this)
-			if (!/^_/.test(key) && this[key])
+		for (var key in this) {
+			if (!/^_/.test(key) && this[key] && !(key in scope))
 				scope[key] = this[key];
+		}
 	},
 
 	setup: function(element) {
@@ -924,6 +929,10 @@ var PaperScopeItem = Base.extend(Emitter, {
 		return this._scope[this._reference] === this;
 	},
 
+	getScope: function() {
+		return this._scope;
+	},
+
 	remove: function() {
 		if (this._index == null)
 			return false;
@@ -1646,6 +1655,16 @@ var Point = Base.extend({
 		);
 	},
 
+	clamp: function() {
+		var args = arguments,
+			min = Point.read(args),
+			max = Point.read(args);
+		return new Point(
+			Numerical.clamp(this.x, min.x, max.x),
+			Numerical.clamp(this.y, min.y, max.y)
+		);
+	},
+
 	statics: {
 		min: function() {
 			var args = arguments,
@@ -1927,10 +1946,11 @@ var Rectangle = Base.extend({
 						arg0.width || 0, arg0.height || 0);
 				read = 1;
 			} else if (arg0.from === undefined && arg0.to === undefined) {
-				this._set(0, 0, 0, 0);
-				if (Base.readSupported(args, this)) {
+				var builder = new RectangleBuilder();
+				if (Base.readSupported(args, builder)) {
 					read = 1;
 				}
+				this._set(builder.x, builder.y, builder.width, builder.height);
 			}
 		}
 		if (read === undefined) {
@@ -2025,24 +2045,10 @@ var Rectangle = Base.extend({
 		return new ctor(this.width, this.height, this, 'setSize');
 	},
 
-	_fw: 1,
-	_fh: 1,
-
 	setSize: function() {
-		var size = Size.read(arguments),
-			sx = this._sx,
-			sy = this._sy,
-			w = size.width,
-			h = size.height;
-		if (sx) {
-			this.x += (this.width - w) * sx;
-		}
-		if (sy) {
-			this.y += (this.height - h) * sy;
-		}
-		this.width = w;
-		this.height = h;
-		this._fw = this._fh = 1;
+		var size = Size.read(arguments);
+		this.width = size.width;
+		this.height = size.height;
 	},
 
 	getLeft: function() {
@@ -2050,12 +2056,8 @@ var Rectangle = Base.extend({
 	},
 
 	setLeft: function(left) {
-		if (!this._fw) {
-			var amount = left - this.x;
-			this.width -= this._sx === 0.5 ? amount * 2 : amount;
-		}
+		this.width -= left - this.x;
 		this.x = left;
-		this._sx = this._fw = 0;
 	},
 
 	getTop: function() {
@@ -2063,12 +2065,8 @@ var Rectangle = Base.extend({
 	},
 
 	setTop: function(top) {
-		if (!this._fh) {
-			var amount = top - this.y;
-			this.height -= this._sy === 0.5 ? amount * 2 : amount;
-		}
+		this.height -= top - this.y;
 		this.y = top;
-		this._sy = this._fh = 0;
 	},
 
 	getRight: function() {
@@ -2076,13 +2074,7 @@ var Rectangle = Base.extend({
 	},
 
 	setRight: function(right) {
-		if (!this._fw) {
-			var amount = right - this.x;
-			this.width = this._sx === 0.5 ? amount * 2 : amount;
-		}
-		this.x = right - this.width;
-		this._sx = 1;
-		this._fw = 0;
+		this.width = right - this.x;
 	},
 
 	getBottom: function() {
@@ -2090,13 +2082,7 @@ var Rectangle = Base.extend({
 	},
 
 	setBottom: function(bottom) {
-		if (!this._fh) {
-			var amount = bottom - this.y;
-			this.height = this._sy === 0.5 ? amount * 2 : amount;
-		}
-		this.y = bottom - this.height;
-		this._sy = 1;
-		this._fh = 0;
+		this.height = bottom - this.y;
 	},
 
 	getCenterX: function() {
@@ -2104,16 +2090,7 @@ var Rectangle = Base.extend({
 	},
 
 	setCenterX: function(x) {
-		if (this._fw || this._sx === 0.5) {
-			this.x = x - this.width / 2;
-		} else {
-			if (this._sx) {
-				this.x += (x - this.x) * 2 * this._sx;
-			}
-			this.width = (x - this.x) * 2;
-		}
-		this._sx = 0.5;
-		this._fw = 0;
+		this.x = x - this.width / 2;
 	},
 
 	getCenterY: function() {
@@ -2121,16 +2098,7 @@ var Rectangle = Base.extend({
 	},
 
 	setCenterY: function(y) {
-		if (this._fh || this._sy === 0.5) {
-			this.y = y - this.height / 2;
-		} else {
-			if (this._sy) {
-				this.y += (y - this.y) * 2 * this._sy;
-			}
-			this.height = (y - this.y) * 2;
-		}
-		this._sy = 0.5;
-		this._fh = 0;
+		this.y = y - this.height / 2;
 	},
 
 	getCenter: function(_dontLink) {
@@ -2316,6 +2284,94 @@ new function() {
 	);
 });
 
+var RectangleBuilder = Rectangle.extend({
+	beans: true,
+
+	_fw: 1,
+	_fh: 1,
+
+	setSize: function() {
+		var size = Size.read(arguments),
+			sx = this._sx,
+			sy = this._sy,
+			w = size.width,
+			h = size.height;
+		if (sx) {
+			this.x += (this.width - w) * sx;
+		}
+		if (sy) {
+			this.y += (this.height - h) * sy;
+		}
+		this.width = w;
+		this.height = h;
+		this._fw = this._fh = 1;
+	},
+
+	setLeft: function(left) {
+		if (!this._fw) {
+			var amount = left - this.x;
+			this.width -= this._sx === 0.5 ? amount * 2 : amount;
+		}
+		this.x = left;
+		this._sx = this._fw = 0;
+	},
+
+	setTop: function(top) {
+		if (!this._fh) {
+			var amount = top - this.y;
+			this.height -= this._sy === 0.5 ? amount * 2 : amount;
+		}
+		this.y = top;
+		this._sy = this._fh = 0;
+	},
+
+	setRight: function(right) {
+		if (!this._fw) {
+			var amount = right - this.x;
+			this.width = this._sx === 0.5 ? amount * 2 : amount;
+		}
+		this.x = right - this.width;
+		this._sx = 1;
+		this._fw = 0;
+	},
+
+	setBottom: function(bottom) {
+		if (!this._fh) {
+			var amount = bottom - this.y;
+			this.height = this._sy === 0.5 ? amount * 2 : amount;
+		}
+		this.y = bottom - this.height;
+		this._sy = 1;
+		this._fh = 0;
+	},
+
+	setCenterX: function(x) {
+		if (this._fw || this._sx === 0.5) {
+			this.x = x - this.width / 2;
+		} else {
+			if (this._sx) {
+				this.x += (x - this.x) * 2 * this._sx;
+			}
+			this.width = (x - this.x) * 2;
+		}
+		this._sx = 0.5;
+		this._fw = 0;
+	},
+
+	setCenterY: function(y) {
+		if (this._fh || this._sy === 0.5) {
+			this.y = y - this.height / 2;
+		} else {
+			if (this._sy) {
+				this.y += (y - this.y) * 2 * this._sy;
+			}
+			this.height = (y - this.y) * 2;
+		}
+		this._sy = 0.5;
+		this._fh = 0;
+	}
+});
+
 var Matrix = Base.extend({
 	_class: 'Matrix',
 
@@ -2593,6 +2649,10 @@ var Matrix = Base.extend({
 		return det && !isNaN(det) && isFinite(this._tx) && isFinite(this._ty);
 	},
 
+	_getMeanScale: function() {
+		return Math.sqrt(Math.abs(this._a * this._d - this._b * this._c));
+	},
+
 	isSingular: function() {
 		return !this.isInvertible();
 	},
@@ -2867,8 +2927,10 @@ var Line = Base.extend({
 					: vy === 0 ? (vx < 0 ? y - py : py - y)
 					: ((x - px) * vy - (y - py) * vx) / (
 						vy > vx
-							? vy * Math.sqrt(1 + (vx * vx) / (vy * vy))
-							: vx * Math.sqrt(1 + (vy * vy) / (vx * vx))
+							? Math.abs(vy)
+								* Math.sqrt(1 + (vx * vx) / (vy * vy))
+							: Math.abs(vx)
+								* Math.sqrt(1 + (vy * vy) / (vx * vx))
 					);
 		},
 
@@ -2879,6 +2941,48 @@ var Line = Base.extend({
 	}
 });
 
+var ChangeFlag = {
+	APPEARANCE: 0x1,
+
+	CHILDREN: 0x2,
+
+	INSERTION: 0x4,
+
+	GEOMETRY: 0x8,
+
+	MATRIX: 0x10,
+
+	SEGMENTS: 0x20,
+
+	STROKE: 0x40,
+
+	STYLE: 0x80,
+
+	ATTRIBUTE: 0x100,
+
+	CONTENT: 0x200,
+
+	PIXELS: 0x400,
+
+	CLIPPING: 0x800,
+
+	VIEW: 0x1000
+};
+
+var Change = {
+	CHILDREN: ChangeFlag.CHILDREN | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	INSERTION: ChangeFlag.INSERTION | ChangeFlag.APPEARANCE,
+	GEOMETRY: ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	MATRIX: ChangeFlag.MATRIX | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	SEGMENTS: ChangeFlag.SEGMENTS | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	STROKE: ChangeFlag.STROKE | ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
+	STYLE: ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
+	ATTRIBUTE: ChangeFlag.ATTRIBUTE | ChangeFlag.APPEARANCE,
+	CONTENT: ChangeFlag.CONTENT | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	PIXELS: ChangeFlag.PIXELS | ChangeFlag.APPEARANCE,
+	VIEW: ChangeFlag.VIEW | ChangeFlag.APPEARANCE
+};
+
 var Project = PaperScopeItem.extend({
 	_class: 'Project',
 	_list: 'projects',
@@ -2912,7 +3016,7 @@ var Project = PaperScopeItem.extend({
 			}
 		}
 		var changes = this._changes;
-		if (changes && item) {
+		if (changes && item && item.isInserted()) {
 			var changesById = this._changesById,
 				id = item._id,
 				entry = changesById[id];
@@ -2924,6 +3028,26 @@ var Project = PaperScopeItem.extend({
 		}
 	},
 
+	getTrackChanges: function() {
+		return !!this._changes;
+	},
+
+	setTrackChanges: function(trackChanges) {
+		if (!this._changes ^ !trackChanges) {
+			this._changes = trackChanges ? [] : null;
+			this._changesById = trackChanges ? {} : null;
+		}
+	},
+
+	takeChanges: function() {
+		var changes = this._changes;
+		if (changes) {
+			this._changes = [];
+			this._changesById = {};
+		}
+		return changes || null;
+	},
+
 	clear: function() {
 		var children = this._children;
 		for (var i = children.length - 1; i >= 0; i--)
@@ -3005,10 +3129,10 @@ var Project = PaperScopeItem.extend({
 		return items;
 	},
 
-	_updateSelection: function(item) {
+	_updateSelection: function(item, remove) {
 		var id = item._id,
 			selectionItems = this._selectionItems;
-		if (item._selection) {
+		if (item._selection && !remove && item.isInserted()) {
 			if (selectionItems[id] !== item) {
 				this._selectionCount++;
 				selectionItems[id] = item;
@@ -3117,7 +3241,7 @@ var Project = PaperScopeItem.extend({
 
 		if (this._selectionCount > 0) {
 			ctx.save();
-			ctx.strokeWidth = 1;
+			ctx.lineWidth = 1;
 			var items = this._selectionItems,
 				size = this._scope.settings.handleSize,
 				version = this._updateVersion;
@@ -3180,11 +3304,13 @@ new function() {
 		function(name) {
 			this._events[name] = {
 				install: function(type) {
-					this.getView()._countItemEvent(type, 1);
+					if (this.isInserted())
+						this.getView()._countItemEvent(type, 1);
 				},
 
 				uninstall: function(type) {
-					this.getView()._countItemEvent(type, -1);
+					if (this.isInserted())
+						this.getView()._countItemEvent(type, -1);
 				}
 			};
 		}, {
@@ -3217,6 +3343,10 @@ new function() {
 			matrix = this._matrix = new Matrix(),
 			project = hasProps && props.project || paper.project,
 			settings = paper.settings;
+		if (!project) {
+			throw new Error('Unable to create an item without a project. '
+					+ 'Call paper.setup() or create a Project first.');
+		}
 		this._id = internal ? null : UID.get();
 		this._parent = this._index = null;
 		this._applyMatrix = this._canApplyMatrix && settings.applyMatrix;
@@ -3493,8 +3623,8 @@ new function() {
 				bounds = this.getBounds();
 			}
 			matrix.scale(
-					bounds.width !== 0 ? rect.width / bounds.width : 0,
-					bounds.height !== 0 ? rect.height / bounds.height : 0);
+					bounds.width !== 0 ? rect.width / bounds.width : 1,
+					bounds.height !== 0 ? rect.height / bounds.height : 1);
 		}
 		center = bounds.getCenter();
 		matrix.translate(-center.x, -center.y);
@@ -3518,14 +3648,18 @@ new function() {
 	},
 
 	_getCachedBounds: function(matrix, options, noInternal) {
-		matrix = matrix && matrix._orNullIfIdentity();
 		var internal = options.internal && !noInternal,
 			cacheItem = options.cacheItem,
-			_matrix = internal ? null : this._matrix._orNullIfIdentity(),
-			cacheKey = cacheItem && (!matrix || matrix.equals(_matrix))
+			_matrix = internal ? null : this._matrix._orNullIfIdentity();
+		matrix = matrix ? matrix._orNullIfIdentity() : _matrix;
+		var cacheKey = cacheItem && (matrix ? matrix.equals(_matrix) : !_matrix)
 				&& this._getBoundsCacheKey(options, internal),
+			isIntermediate = cacheKey && cacheItem !== this
+					&& (this._children || this._definition),
 			bounds = this._bounds;
 		Item._updateBoundsCache(this._parent || this._symbol, cacheItem);
+		if (isIntermediate)
+			Item._updateBoundsCache(this, cacheItem);
 		if (cacheKey && bounds && cacheKey in bounds) {
 			var cached = bounds[cacheKey];
 			return {
@@ -3533,7 +3667,9 @@ new function() {
 				nonscaling: cached.nonscaling
 			};
 		}
-		var res = this._getBounds(matrix || _matrix, options),
+		var res = this._getBounds(matrix, isIntermediate
+				? Base.set({}, options, { cacheItem: this })
+				: options),
 			rect = res.rect || res,
 			style = this._style,
 			nonscaling = res.nonscaling || style.hasStroke()
@@ -3697,27 +3833,14 @@ new function() {
 	},
 
 	getGlobalMatrix: function(_dontClone) {
-		var matrix = this._globalMatrix;
-		if (matrix) {
-			var parent = this._parent;
-			var parents = [];
-			while (parent) {
-				if (!parent._globalMatrix) {
-					matrix = null;
-					for (var i = 0, l = parents.length; i < l; i++) {
-						parents[i]._globalMatrix = null;
-					}
-					break;
-				}
-				parents.push(parent);
-				parent = parent._parent;
-			}
-		}
-		if (!matrix) {
+		var parent = this._parent,
+			parentMatrix = parent && parent.getGlobalMatrix(true),
+			matrix = this._globalMatrix;
+		if (!matrix || this._parentGlobalMatrix !== parentMatrix) {
 			matrix = this._globalMatrix = this._matrix.clone();
-			var parent = this._parent;
-			if (parent)
-				matrix.prepend(parent.getGlobalMatrix(true));
+			if (parentMatrix)
+				matrix.prepend(parentMatrix);
+			this._parentGlobalMatrix = parentMatrix;
 		}
 		return _dontClone ? matrix : matrix.clone();
 	},
@@ -3744,13 +3867,10 @@ new function() {
 
 	_setProject: function(project, installEvents) {
 		if (this._project !== project) {
-			if (this._project)
-				this._installEvents(false);
 			this._project = project;
 			var children = this._children;
 			for (var i = 0, l = children && children.length; i < l; i++)
 				children[i]._setProject(project);
-			installEvents = true;
 		}
 		if (installEvents)
 			this._installEvents(true);
@@ -3760,8 +3880,14 @@ new function() {
 		return this._project._view;
 	},
 
+	getScope: function() {
+		return this._project._scope;
+	},
+
 	_installEvents: function _installEvents(install) {
 		_installEvents.base.call(this, install);
+		if (this._selection)
+			this._project._updateSelection(this, !install);
 		var children = this._children;
 		for (var i = 0, l = children && children.length; i < l; i++)
 			children[i]._installEvents(install);
@@ -3849,7 +3975,8 @@ new function() {
 		var copy = new this.constructor(Item.NO_INSERT),
 			children = this._children,
 			insert = Base.pick(options ? options.insert : undefined,
-					options === undefined || options === true),
+					typeof options === 'boolean' ? options
+						: paper.settings.insertItems),
 			deep = Base.pick(options ? options.deep : undefined, true);
 		if (children)
 			copy.copyAttributes(this);
@@ -3937,7 +4064,7 @@ new function() {
 				.translate(topLeft.add(boundsSize.divide(2)))
 				.scale(1 / scale)
 		);
-		if (insert === undefined || insert) {
+		if (Base.pick(insert, paper.settings.insertItems)) {
 			raster.insertAbove(this);
 		}
 		return raster;
@@ -3970,6 +4097,7 @@ new function() {
 	_asPathItem: function() {
 		return new Path.Rectangle({
 			rectangle: this.getInternalBounds(),
+			applyMatrix: false,
 			matrix: this._matrix,
 			insert: false,
 		});
@@ -4028,20 +4156,22 @@ new function() {
 
 	_hitTest: function(point, options, parentViewMatrix) {
 		if (this._locked || !this._visible || this._guide && !options.guides
-				|| this.isEmpty()) {
+				|| !this._shell && this.isEmpty()) {
 			return null;
 		}
 
 		var matrix = this._matrix,
+			pointMatrix = parentViewMatrix ? matrix : this.getGlobalMatrix(),
 			viewMatrix = parentViewMatrix
 					? parentViewMatrix.appended(matrix)
-					: this.getGlobalMatrix().prepend(this.getView()._matrix),
+					: pointMatrix.prepended(this.getView()._matrix),
 			tolerance = Math.max(options.tolerance, 1e-12),
 			tolerancePadding = options._tolerancePadding = new Size(
-					Path._getStrokePadding(tolerance,
-						matrix._shiftless().invert()));
-		point = matrix._inverseTransform(point);
-		if (!point || !this._children &&
+					Path._getStrokePadding(tolerance, viewMatrix
+						.prepended(this.getView()._matrix.inverted())
+						._shiftless().invert()));
+		point = pointMatrix._inverseTransform(point);
+		if (!point || (this._shell || !this._children) &&
 			!this.getBounds({ internal: true, stroke: true, handle: true })
 				.expand(tolerancePadding.multiply(2))._containsPoint(point)) {
 			return null;
@@ -4057,10 +4187,21 @@ new function() {
 			res;
 
 		function filter(hit) {
+			if (Array.isArray(hit)) {
+				var first = null;
+				for (var i = 0, l = hit.length; i < l; i++) {
+					var res = filter(hit[i]);
+					first = first || res;
+				}
+				return first;
+			}
 			if (hit && match && !match(hit))
 				hit = null;
-			if (hit && options.all)
+			if (hit && options.all) {
+				if (hit.point)
+					hit.point = that.getGlobalMatrix().transform(hit.point);
 				options.all.push(hit);
+			}
 			return hit;
 		}
 
@@ -4104,14 +4245,14 @@ new function() {
 							: viewMatrix._shiftless().invert()))
 				|| null;
 		}
-		if (res && res.point) {
-			res.point = matrix.transform(res.point);
+		if (res && res.point && !options.all) {
+			res.point = pointMatrix.transform(res.point);
 		}
 		return res;
 	},
 
 	_hitTestSelf: function(point, options) {
-		if (options.fill && this.hasFill() && this._contains(point))
+		if (options.fill && this.getFillColor() && this._contains(point))
 			return new HitResult('fill', this);
 	},
 
@@ -4185,7 +4326,7 @@ new function() {
 					rect = bounds && Rectangle.read([bounds]);
 				param = {
 					items: [],
-					recursive: obj && obj.recursive !== false,
+					recursive: !obj || obj.recursive !== false,
 					inside: !!inside,
 					overlapping: !!overlapping,
 					rect: rect,
@@ -4234,6 +4375,19 @@ new function() {
 }, {
 
 	importJSON: function(json) {
+		json = typeof json === 'string' ? JSON.parse(json) : json;
+		var props = json && json[0] === this._class && json[1];
+		if (Base.isPlainObject(props)) {
+			var item = new this.constructor(Item.NO_INSERT),
+				fields = Base.set({}, this._serializeFields,
+					this instanceof Group ? null : this._style._defaults),
+				defaults = {};
+			for (var key in fields) {
+				if (!(key in props) && !Base.equals(this[key], item[key]))
+					defaults[key] = item[key];
+			}
+			this.set(defaults);
+		}
 		var res = Base.importJSON(json, this);
 		return res !== this ? this.addChild(res) : res;
 	},
@@ -4379,15 +4533,15 @@ new function() {
 		if (owner) {
 			if (this._name)
 				this._removeNamed();
+			this._installEvents(false);
+			if (notifySelf && project._changes)
+				this._changed(5);
 			if (index != null) {
 				if (project._activeLayer === this)
 					project._activeLayer = this.getNextSibling()
 							|| this.getPreviousSibling();
 				Base.splice(owner._children, null, index, 1);
 			}
-			this._installEvents(false);
-			if (notifySelf && project._changes)
-				this._changed(5);
 			if (notifyParent)
 				owner._changed(11, this);
 			this._parent = null;
@@ -4644,30 +4798,46 @@ new function() {
 		return this._matrix._transformPoint(Point.read(arguments));
 	},
 
-	fitBounds: function(rectangle, fill) {
+	fitBounds: function(rectangle, fit) {
 		rectangle = Rectangle.read(arguments);
-		fill = Base.read(arguments);
+		fit = Base.read(arguments);
+		if (fit === true)
+			fit = 'cover';
 		var bounds = this.getBounds(),
-			itemRatio = bounds.height / bounds.width,
-			rectRatio = rectangle.height / rectangle.width,
-			scale = (fill ? itemRatio > rectRatio : itemRatio < rectRatio)
-					? rectangle.width / bounds.width
-					: rectangle.height / bounds.height,
-			newBounds = new Rectangle(new Point(),
-					new Size(bounds.width * scale, bounds.height * scale));
-		newBounds.setCenter(rectangle.getCenter());
-		this.setBounds(newBounds);
+			hor = rectangle.width / bounds.width,
+			ver = rectangle.height / bounds.height,
+			size;
+
+		function isScaling(ratio) {
+			return ratio > 0 && isFinite(ratio);
+		}
+
+		if (fit === 'fill') {
+			size = new Size(
+				isScaling(hor) ? rectangle.width : bounds.width,
+				isScaling(ver) ? rectangle.height : bounds.height);
+		} else {
+			var ratios = [hor, ver].filter(isScaling),
+				scale = !ratios.length ? 1
+					: fit === 'cover' ? Math.max.apply(Math, ratios)
+					: Math.min.apply(Math, ratios);
+			size = bounds.getSize().multiply(scale);
+		}
+		this.setBounds(new Rectangle(new Point(), size)
+				.setCenter(rectangle.getCenter()));
 	}
 }), {
 
-	_setStyles: function(ctx, param, viewMatrix) {
+	_setStyles: function(ctx, param, viewMatrix, strokeMatrix) {
 		var style = this._style,
 			matrix = this._matrix;
 		if (style.hasFill()) {
-			ctx.fillStyle = style.getFillColor().toCanvasStyle(ctx, matrix);
+			ctx.fillStyle = style.getFillColor().toCanvasStyle(ctx, matrix,
+					strokeMatrix);
 		}
 		if (style.hasStroke()) {
-			ctx.strokeStyle = style.getStrokeColor().toCanvasStyle(ctx, matrix);
+			ctx.strokeStyle = style.getStrokeColor().toCanvasStyle(ctx,
+					matrix, strokeMatrix);
 			ctx.lineWidth = style.getStrokeWidth();
 			var strokeJoin = style.getStrokeJoin(),
 				strokeCap = style.getStrokeCap(),
@@ -4712,7 +4882,8 @@ new function() {
 		var matrices = param.matrices,
 			viewMatrix = param.viewMatrix,
 			matrix = this._matrix,
-			globalMatrix = matrices[matrices.length - 1].appended(matrix);
+			parentMatrix = matrices[matrices.length - 1],
+			globalMatrix = parentMatrix.appended(matrix);
 		if (!globalMatrix.isInvertible())
 			return;
 
@@ -4722,13 +4893,14 @@ new function() {
 		matrices.push(globalMatrix);
 		if (param.updateMatrix) {
 			this._globalMatrix = globalMatrix;
+			this._parentGlobalMatrix = this._parent && parentMatrix;
 		}
 
 		var blendMode = this._blendMode,
 			opacity = Numerical.clamp(this._opacity, 0, 1),
 			normalBlend = blendMode === 'normal',
 			nativeBlend = BlendMode.nativeModes[blendMode],
-			direct = normalBlend && opacity === 1
+			direct = normalBlend && opacity === 1 && !this._isolated
 					|| param.dontStart
 					|| param.clip
 					|| (nativeBlend || normalBlend && opacity < 1)
@@ -4736,8 +4908,23 @@ new function() {
 			pixelRatio = param.pixelRatio || 1,
 			mainCtx, itemOffset, prevOffset;
 		if (!direct) {
-			var bounds = this.getStrokeBounds(viewMatrix);
-			if (!bounds.width || !bounds.height) {
+			var bounds = this.getStrokeBounds(viewMatrix),
+				style = this._style;
+			if (style.getShadowColor(true)) {
+				var mx = viewMatrix._shiftless(),
+					blur = mx.transform(
+							new Point(style.getShadowBlur(true), 0)),
+					offset = mx.transform(style.getShadowOffset(true));
+				bounds = bounds.unite(
+					new Rectangle(bounds.getPoint().add(offset),
+						bounds.getSize()).expand(blur.getLength() * 3));
+			}
+			var canvas = ctx.canvas;
+			bounds = bounds.intersect(
+					new Rectangle(new Point(param.offset),
+						new Size(canvas.width, canvas.height)
+							.divide(pixelRatio)));
+			if (bounds.width <= 0 || bounds.height <= 0) {
 				matrices.pop();
 				return;
 			}
@@ -4763,11 +4950,16 @@ new function() {
 		} else if (transform) {
 			ctx.translate(-itemOffset.x, -itemOffset.y);
 		}
-		if (transform) {
-			(direct ? matrix : viewMatrix).applyToContext(ctx);
-		}
 		if (clip) {
-			param.clipItem.draw(ctx, param.extend({ clip: true }));
+			(param.viewMatrix ? param.viewMatrix.appended(parentMatrix)
+					: parentMatrix).applyToContext(ctx);
+			param.clipItem.draw(ctx, param.extend({
+				clip: true,
+				matrices: matrices.slice(0, -1)
+			}));
+			matrix.applyToContext(ctx);
+		} else if (transform) {
+			(direct ? matrix : viewMatrix).applyToContext(ctx);
 		}
 		if (strokeMatrix) {
 			ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
@@ -4811,7 +5003,7 @@ new function() {
 		if (!this._drawSelected)
 			itemSelected = false;
 		if ((itemSelected || boundsSelected || positionSelected)
-				&& this._isUpdated(updateVersion)) {
+				&& this._isUpdated(updateVersion) && this.isInserted()) {
 			var layer,
 				color = this.getSelectedColor(true) || (layer = this.getLayer())
 					&& layer.getSelectedColor(true),
@@ -4924,8 +5116,10 @@ var Group = Item.extend({
 	_selectBounds: false,
 	_selectChildren: true,
 	_serializeFields: {
+		isolated: false,
 		children: []
 	},
+	_isolated: false,
 
 	initialize: function Group(arg) {
 		this._children = [];
@@ -4967,6 +5161,15 @@ var Group = Item.extend({
 			child.setClipMask(clipped);
 	},
 
+	isIsolated: function() {
+		return this._isolated;
+	},
+
+	setIsolated: function(isolated) {
+		this._isolated = !!isolated;
+		this._changed(257);
+	},
+
 	_getBounds: function _getBounds(matrix, options) {
 		var clipItem = this._getClipItem();
 		return clipItem
@@ -4982,10 +5185,21 @@ var Group = Item.extend({
 					clipItem);
 	},
 
+	_hitTestSelf: function(point, options, viewMatrix) {
+		if (options.match || options.class || options.type || options.all) {
+			var res = this._hitTestChildren(point, options.extend({
+				all: null, match: null, class: null, type: null
+			}), viewMatrix);
+			if (res)
+				res.item = this;
+			return res;
+		}
+	},
+
 	_draw: function(ctx, param) {
 		var clip = param.clip,
-			clipItem = !clip && this._getClipItem();
-		param = param.extend({ clipItem: clipItem, clip: false });
+			clipItem = this._getClipItem();
+		param = param.extend({ clipItem: !clip && clipItem, clip: false });
 		if (clip) {
 			ctx.beginPath();
 			param.dontStart = param.dontFinish = true;
@@ -5034,6 +5248,7 @@ var Shape = Item.extend({
 		size: null,
 		radius: null
 	},
+	_prioritize: ['type'],
 
 	initialize: function Shape(props, point) {
 		this._initialize(props, point);
@@ -5131,16 +5346,10 @@ var Shape = Item.extend({
 	},
 
 	toPath: function(insert) {
-		var path = new Path[Base.capitalize(this._type)]({
-			center: new Point(),
-			size: this._size,
-			radius: this._radius,
-			insert: false
-		});
-		path.copyAttributes(this);
+		var path = this._asPathItem();
 		if (paper.settings.applyMatrix)
 			path.setApplyMatrix(true);
-		if (insert === undefined || insert)
+		if (Base.pick(insert, paper.settings.insertItems))
 			path.insertAbove(this);
 		return path;
 	},
@@ -5148,7 +5357,14 @@ var Shape = Item.extend({
 	toShape: '#clone',
 
 	_asPathItem: function() {
-		return this.toPath(false);
+		var path = new Path[Base.capitalize(this._type)]({
+			center: new Point(),
+			size: this._size,
+			radius: this._radius,
+			insert: false
+		});
+		path.copyAttributes(this);
+		return path;
 	},
 
 	_draw: function(ctx, param, viewMatrix, strokeMatrix) {
@@ -5215,7 +5431,7 @@ var Shape = Item.extend({
 			ctx.closePath();
 		}
 		if (!dontPaint && (hasFill || hasStroke)) {
-			this._setStyles(ctx, param, viewMatrix);
+			this._setStyles(ctx, param, viewMatrix, strokeMatrix);
 			if (hasFill) {
 				ctx.fill(style.getFillRule());
 				ctx.shadowColor = 'rgba(0,0,0,0)';
@@ -5230,12 +5446,25 @@ var Shape = Item.extend({
 	},
 
 	_getBounds: function(matrix, options) {
-		var rect = new Rectangle(this._size).setCenter(0, 0),
+		var size = this._size,
+			rect = new Rectangle(size).setCenter(0, 0),
 			style = this._style,
 			strokeWidth = options.stroke && style.hasStroke()
 					&& style.getStrokeWidth();
-		if (matrix)
-			rect = matrix._transformBounds(rect);
+		if (matrix) {
+			if (this._type === 'rectangle') {
+				rect = matrix._transformBounds(rect);
+			} else {
+				var rx = size.width / 2,
+					ry = size.height / 2,
+					dx = Math.sqrt(Math.pow(matrix._a * rx, 2)
+							+ Math.pow(matrix._c * ry, 2)),
+					dy = Math.sqrt(Math.pow(matrix._b * rx, 2)
+							+ Math.pow(matrix._d * ry, 2));
+				rect = new Rectangle(matrix._tx - dx, matrix._ty - dy,
+						2 * dx, 2 * dy);
+			}
+		}
 		return strokeWidth
 				? rect.expand(Path._getStrokePadding(strokeWidth,
 					this._getStrokeMatrix(matrix, options)))
@@ -5285,7 +5514,7 @@ new function() {
 			var hit = false,
 				style = this._style,
 				hitStroke = options.stroke && style.hasStroke(),
-				hitFill = options.fill && style.hasFill();
+				hitFill = options.fill && !!style.getFillColor();
 			if (hitStroke || hitFill) {
 				var type = this._type,
 					radius = this._radius,
@@ -5375,6 +5604,7 @@ var Raster = Item.extend({
 	_boundsOptions: { stroke: false, handle: false },
 	_serializeFields: {
 		crossOrigin: null,
+		size: new Size(),
 		source: null
 	},
 	_prioritize: ['crossOrigin'],
@@ -5524,6 +5754,14 @@ var Raster = Item.extend({
 		}
 	},
 
+	set: function set(props, exclude) {
+		if (props && props.source && props.size) {
+			this._size = new Size(props.size);
+			exclude = Base.set({ size: true }, exclude);
+		}
+		return set.base.call(this, props, exclude);
+	},
+
 	_setImage: function(image) {
 		if (this._canvas)
 			CanvasProvider.release(this._canvas);
@@ -5536,9 +5774,11 @@ var Raster = Item.extend({
 			this._canvas = null;
 			this._loaded = !!(image && image.src && image.complete);
 		}
-		this._size = new Size(
-				image ? image.naturalWidth || image.width : 0,
-				image ? image.naturalHeight || image.height : 0);
+		this._size = image && !this._loaded
+				? this._size || new Size()
+				: new Size(
+					image ? image.naturalWidth || image.width : 0,
+					image ? image.naturalHeight || image.height : 0);
 		this._context = null;
 		this._changed(1033);
 	},
@@ -5777,7 +6017,12 @@ var Raster = Item.extend({
 
 	_draw: function(ctx, param, viewMatrix) {
 		var element = this.getElement();
-		if (element && element.width > 0 && element.height > 0) {
+		if (param.dontFinish || param.clip) {
+			var rect = this.getInternalBounds();
+			if (!param.dontStart)
+				ctx.beginPath();
+			ctx.rect(rect.x, rect.y, rect.width, rect.height);
+		} else if (element && element.width > 0 && element.height > 0) {
 			ctx.globalAlpha = Numerical.clamp(this._opacity, 0, 1);
 
 			this._setStyles(ctx, param, viewMatrix);
@@ -5846,7 +6091,9 @@ var SymbolItem = Item.extend({
 	},
 
 	_hitTestSelf: function(point, options, viewMatrix) {
-		var opts = options.extend({ all: false });
+		var opts = options.extend({
+			all: false, match: null, class: null, type: null
+		});
 		var res = this._definition._item._hitTest(point, opts, viewMatrix);
 		if (res)
 			res.item = this;
@@ -5854,7 +6101,7 @@ var SymbolItem = Item.extend({
 	},
 
 	_draw: function(ctx, param) {
-		this._definition._item.draw(ctx, param);
+		this._definition._item.draw(ctx, param.extend({ updateMatrix: false }));
 	}
 
 });
@@ -6886,7 +7133,7 @@ statics: {
 		}
 	}
 }}, Base.each(
-	['getBounds', 'getStrokeBounds', 'getHandleBounds'],
+	['getBounds', 'getStrokeBounds'],
 	function(name) {
 		this[name] = function() {
 			if (!this._bounds)
@@ -6901,6 +7148,15 @@ statics: {
 	},
 {
 
+	getHandleBounds: function() {
+		var v = this.getValues(),
+			x1 = Math.min(v[0], v[2], v[4], v[6]),
+			y1 = Math.min(v[1], v[3], v[5], v[7]),
+			x2 = Math.max(v[0], v[2], v[4], v[6]),
+			y2 = Math.max(v[1], v[3], v[5], v[7]);
+		return new Rectangle(x1, y1, x2 - x1, y2 - y1);
+	},
+
 }), Base.each({
 	isStraight: function(p1, h1, h2, p2) {
 		if (h1.isZero() && h2.isZero()) {
@@ -7693,8 +7949,8 @@ new function() {
 			den = 2 * ax * ty - 2 * ay * tx,
 			times = [];
 		if (Math.abs(den) < Numerical.CURVETIME_EPSILON) {
-			var num = ax * cy - ay * cx,
-				den = ax * by - ay * bx;
+			var num = cx * ty - cy * tx,
+				den = bx * ty - by * tx;
 			if (den != 0) {
 				var t = -num / den;
 				if (t >= 0 && t <= 1) times.push(t);
@@ -8097,6 +8353,15 @@ var PathItem = Item.extend({
 	initialize: function PathItem() {
 	},
 
+	_scaleStroke: function(matrix) {
+		var style = this._style;
+		if (this._project._scope.settings.scaleStrokes
+				&& style.getStrokeScaling()) {
+			style.setStrokeWidth(style.getStrokeWidth()
+					* matrix._getMeanScale());
+		}
+	},
+
 	statics: {
 		create: function(arg) {
 			var data,
@@ -8143,7 +8408,12 @@ var PathItem = Item.extend({
 			previous,
 			control,
 			current = new Point(),
-			start = new Point();
+			start = new Point(),
+			number = '([+-]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][+-]?\\d+)?)',
+			numbers = new RegExp(number, 'g'),
+			flag = '([01])',
+			arcs = new RegExp([number, number, number, flag, flag, number,
+					number].join('[\\s,]*'), 'g');
 
 		function getCoord(index, coord) {
 			var val = +coords[index];
@@ -8165,7 +8435,7 @@ var PathItem = Item.extend({
 			var part = parts[i],
 				command = part[0],
 				lower = command.toLowerCase();
-			coords = part.match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);
+			coords = part.match(numbers);
 			var length = coords && coords.length;
 			relative = command === lower;
 			if (previous === 'z' && !/[mz]/.test(lower))
@@ -8230,10 +8500,10 @@ var PathItem = Item.extend({
 				}
 				break;
 			case 'a':
-				for (var j = 0; j < length; j += 7) {
-					this.arcTo(current = getPoint(j + 5),
-							new Size(+coords[j], +coords[j + 1]),
-							+coords[j + 2], +coords[j + 4], +coords[j + 3]);
+				while (coords = arcs.exec(part)) {
+					this.arcTo(current = getPoint(6),
+							new Size(+coords[1], +coords[2]),
+							+coords[3], +coords[5], +coords[4]);
 				}
 				break;
 			case 'z':
@@ -8560,6 +8830,7 @@ var Path = PathItem.extend({
 			coords = new Array(6);
 		for (var i = 0, l = segments.length; i < l; i++)
 			segments[i]._transformCoordinates(matrix, coords, true);
+		this._scaleStroke(matrix);
 		return true;
 	},
 
@@ -8667,6 +8938,9 @@ var Path = PathItem.extend({
 	removeSegments: function(start, end, _includeCurves) {
 		start = start || 0;
 		end = Base.pick(end, this._segments.length);
+		if (start > end && this._closed)
+			return this.removeSegments(start).concat(
+					this.removeSegments(0, end));
 		var segments = this._segments,
 			curves = this._curves,
 			count = segments.length,
@@ -8795,7 +9069,7 @@ var Path = PathItem.extend({
 			time = 0;
 		}
 		var curves = this.getCurves();
-		if (index >= 0 && index < curves.length) {
+		if (loc && index < curves.length) {
 			if (time >= tMin) {
 				curves[index++].divideAtTime(time);
 			}
@@ -9107,7 +9381,7 @@ var Path = PathItem.extend({
 			shape.copyAttributes(this, true);
 			shape._matrix.prepend(this._matrix);
 			shape.rotate(topCenter.subtract(center).getAngle() + 90);
-			if (insert === undefined || insert)
+			if (Base.pick(insert, paper.settings.insertItems))
 				shape.insertAbove(this);
 			return shape;
 		}
@@ -9187,8 +9461,9 @@ var Path = PathItem.extend({
 			strokePadding = tolerancePadding,
 			join, cap, miterLimit,
 			area, loc, res,
+			hits = options.all && [],
 			hitStroke = options.stroke && style.hasStroke(),
-			hitFill = options.fill && style.hasFill(),
+			hitFill = options.fill && !!style.getFillColor(),
 			hitCurves = options.curves,
 			strokeRadius = hitStroke
 					? style.getStrokeWidth() / 2
@@ -9216,10 +9491,13 @@ var Path = PathItem.extend({
 				if (pt !== anchor)
 					pt = pt.add(anchor);
 				if (isCloseEnough(pt, strokePadding)) {
-					return new HitResult(name, that, {
+					var hit = new HitResult(name, that, {
 						segment: seg,
 						point: pt
 					});
+					if (!hits)
+						return hit;
+					hits.push(hit);
 				}
 			}
 		}
@@ -9248,7 +9526,7 @@ var Path = PathItem.extend({
 						Path._addBevelJoin(segment, join, strokeRadius,
 							   miterLimit, null, strokeMatrix, addToArea, true);
 					}
-				} else if (cap === 'square') {
+				} else {
 					Path._addSquareCap(segment, cap, strokeRadius, null,
 							strokeMatrix, addToArea, true);
 				}
@@ -9293,7 +9571,7 @@ var Path = PathItem.extend({
 				}
 			}
 		}
-		return !loc && hitFill && this._contains(point)
+		res = !loc && hitFill && this._contains(point)
 				|| loc && !hitStroke && !hitCurves
 					? new HitResult('fill', this)
 					: loc
@@ -9302,6 +9580,16 @@ var Path = PathItem.extend({
 							point: loc.getPoint()
 						})
 						: null;
+		if (hits) {
+			hits.sort(function(hit1, hit2) {
+				return hit1.point.getDistance(point)
+						- hit2.point.getDistance(point);
+			});
+			if (res)
+				hits.push(res);
+			return hits;
+		}
+		return res;
 	}
 
 }, Base.each(Curve._evaluateMethods,
@@ -9501,7 +9789,7 @@ new function() {
 			}
 
 			if (!dontPaint && (hasFill || hasStroke)) {
-				this._setStyles(ctx, param, viewMatrix);
+				this._setStyles(ctx, param, viewMatrix, strokeMatrix);
 				if (hasFill) {
 					ctx.fill(style.getFillRule());
 					ctx.shadowColor = 'rgba(0,0,0,0)';
@@ -9881,18 +10169,12 @@ statics: {
 	_getStrokePadding: function(radius, matrix) {
 		if (!matrix)
 			return [radius, radius];
-		var hor = new Point(radius, 0).transform(matrix),
-			ver = new Point(0, radius).transform(matrix),
-			phi = hor.getAngleInRadians(),
-			a = hor.getLength(),
-			b = ver.getLength();
-		var sin = Math.sin(phi),
-			cos = Math.cos(phi),
-			tan = Math.tan(phi),
-			tx = Math.atan2(b * tan, a),
-			ty = Math.atan2(b, tan * a);
-		return [Math.abs(a * Math.cos(tx) * cos + b * Math.sin(tx) * sin),
-				Math.abs(b * Math.sin(ty) * cos + a * Math.cos(ty) * sin)];
+		var a = matrix._a,
+			b = matrix._b,
+			c = matrix._c,
+			d = matrix._d;
+		return [radius * Math.sqrt(a * a + c * c),
+				radius * Math.sqrt(b * b + d * d)];
 	},
 
 	_addBevelJoin: function(segment, join, radius, miterLimit, matrix,
@@ -9900,44 +10182,42 @@ statics: {
 		var curve2 = segment.getCurve(),
 			curve1 = curve2.getPrevious(),
 			point = curve2.getPoint1().transform(matrix),
-			normal1 = curve1.getNormalAtTime(1).multiply(radius)
-				.transform(strokeMatrix),
-			normal2 = curve2.getNormalAtTime(0).multiply(radius)
-				.transform(strokeMatrix),
-				angle = normal1.getDirectedAngle(normal2);
+			normal1 = curve1.getNormalAtTime(1).multiply(radius),
+			normal2 = curve2.getNormalAtTime(0).multiply(radius),
+			angle = normal1.getDirectedAngle(normal2);
 		if (angle < 0 || angle >= 180) {
 			normal1 = normal1.negate();
 			normal2 = normal2.negate();
 		}
 		if (isArea)
 			addPoint(point);
-		addPoint(point.add(normal1));
+		addPoint(point.add(normal1.transform(strokeMatrix)));
 		if (join === 'miter') {
-			var corner = new Line(point.add(normal1),
+			var corner = new Line(normal1,
 					new Point(-normal1.y, normal1.x), true
-				).intersect(new Line(point.add(normal2),
+				).intersect(new Line(normal2,
 					new Point(-normal2.y, normal2.x), true
 				), true);
-			if (corner && point.getDistance(corner) <= miterLimit * radius) {
-				addPoint(corner);
+			if (corner && corner.getLength() <= miterLimit * radius) {
+				addPoint(point.add(corner.transform(strokeMatrix)));
 			}
 		}
-		addPoint(point.add(normal2));
+		addPoint(point.add(normal2.transform(strokeMatrix)));
 	},
 
 	_addSquareCap: function(segment, cap, radius, matrix, strokeMatrix,
 			addPoint, isArea) {
 		var point = segment._point.transform(matrix),
 			loc = segment.getLocation(),
-			normal = loc.getNormal()
-					.multiply(loc.getTime() === 0 ? radius : -radius)
-					.transform(strokeMatrix);
+			vector = loc.getNormal()
+					.multiply(loc.getTime() === 0 ? radius : -radius),
+			normal = vector.transform(strokeMatrix);
 		if (cap === 'square') {
 			if (isArea) {
 				addPoint(point.subtract(normal));
 				addPoint(point.add(normal));
 			}
-			point = point.add(normal.rotate(-90));
+			point = point.add(vector.rotate(-90).transform(strokeMatrix));
 		}
 		addPoint(point.add(normal));
 		addPoint(point.subtract(normal));
@@ -9999,14 +10279,14 @@ Path.inject({ statics: new function() {
 
 	function createPath(segments, closed, args) {
 		var props = Base.getNamed(args),
-			path = new Path(props && (
-				props.insert == true ? Item.INSERT
-				: props.insert == false ? Item.NO_INSERT
-				: null
-			));
+			path = new Path(props && {
+				insert: props.insert,
+				project: props.project,
+				parent: props.parent
+			});
 		path._add(segments);
 		path._closed = closed;
-		return path.set(props, Item.INSERT);
+		return path.set(props, { insert: true, project: true, parent: true });
 	}
 
 	function createEllipse(center, radius, args) {
@@ -10101,10 +10381,9 @@ Path.inject({ statics: new function() {
 				center = Point.readNamed(args, 'center'),
 				sides = Base.readNamed(args, 'sides'),
 				radius = Base.readNamed(args, 'radius'),
-				step = 360 / sides,
-				three = sides % 3 === 0,
-				vector = new Point(0, three ? -radius : radius),
-				offset = three ? -1 : 0.5,
+				step = -360 / sides,
+				offset = sides % 2 ? 0 : -0.5,
+				vector = new Point(0, -radius),
 				segments = new Array(sides);
 			for (var i = 0; i < sides; i++)
 				segments[i] = new Segment(center.add(
@@ -10148,6 +10427,11 @@ var CompoundPath = PathItem.extend({
 		}
 	},
 
+	_transformContent: function _transformContent(matrix) {
+		this._scaleStroke(matrix);
+		return _transformContent.base.apply(this, arguments);
+	},
+
 	insertChildren: function insertChildren(index, items) {
 		var list = items,
 			first = list[0];
@@ -10275,7 +10559,7 @@ var CompoundPath = PathItem.extend({
 			children[i].draw(ctx, param, strokeMatrix);
 
 		if (!param.clip) {
-			this._setStyles(ctx, param, viewMatrix);
+			this._setStyles(ctx, param, viewMatrix, strokeMatrix);
 			var style = this._style;
 			if (style.hasFill()) {
 				ctx.fill(style.getFillRule());
@@ -10388,7 +10672,7 @@ PathItem.inject(new function() {
 		var result = new CompoundPath(Item.NO_INSERT);
 		result.addChildren(paths, true);
 		result = result.reduce({ simplify: simplify });
-		if (!(options && options.insert == false)) {
+		if (Base.pick(options && options.insert, paper.settings.insertItems)) {
 			result.insertAbove(path2 && path1.isSibling(path2)
 					&& path1.getIndex() < path2.getIndex() ? path2 : path1);
 		}
@@ -10403,7 +10687,7 @@ PathItem.inject(new function() {
 	function traceBoolean(path1, path2, operation, options) {
 		if (options && (options.trace == false || options.stroke) &&
 				/^(subtract|intersect)$/.test(operation))
-			return splitBoolean(path1, path2, operation);
+			return splitBoolean(path1, path2, operation, options);
 		var _path1 = preparePath(path1, true),
 			_path2 = path2 && path1 !== path2 && preparePath(path2, true),
 			operator = operators[operation];
@@ -10483,7 +10767,7 @@ PathItem.inject(new function() {
 		return createResult(paths, true, path1, path2, options);
 	}
 
-	function splitBoolean(path1, path2, operation) {
+	function splitBoolean(path1, path2, operation, options) {
 		var _path1 = preparePath(path1),
 			_path2 = preparePath(path2),
 			crossings = _path1.getIntersections(_path2, filterIntersection),
@@ -10510,7 +10794,7 @@ PathItem.inject(new function() {
 			}
 		}
 		addPath(_path1);
-		return createResult(paths, false, path1, path2);
+		return createResult(paths, false, path1, path2, options);
 	}
 
 	function linkIntersections(from, to) {
@@ -11097,7 +11381,7 @@ PathItem.inject(new function() {
 
 		divide: function(path, options) {
 			return options && (options.trace == false || options.stroke)
-					? splitBoolean(this, path, 'divide')
+					? splitBoolean(this, path, 'divide', options)
 					: createResult([
 						this.subtract(path, options),
 						this.intersect(path, options)
@@ -11565,7 +11849,7 @@ var TextItem = Item.extend({
 	_serializeFields: {
 		content: null
 	},
-	_boundsOptions: { stroke: false, handle: false },
+	_boundsOptions: { handle: false },
 
 	initialize: function TextItem(arg) {
 		this._content = '';
@@ -11622,27 +11906,43 @@ var PointText = TextItem.extend({
 	},
 
 	_draw: function(ctx, param, viewMatrix) {
-		if (!this._content)
-			return;
-		this._setStyles(ctx, param, viewMatrix);
-		var lines = this._lines,
-			style = this._style,
-			hasFill = style.hasFill(),
-			hasStroke = style.hasStroke(),
-			leading = style.getLeading(),
-			shadowColor = ctx.shadowColor;
-		ctx.font = style.getFontStyle();
-		ctx.textAlign = style.getJustification();
-		for (var i = 0, l = lines.length; i < l; i++) {
-			ctx.shadowColor = shadowColor;
-			var line = lines[i];
-			if (hasFill) {
-				ctx.fillText(line, 0, 0);
-				ctx.shadowColor = 'rgba(0,0,0,0)';
+		if (param.dontFinish || param.clip) {
+			var rect = this.getInternalBounds();
+			if (!param.dontStart)
+				ctx.beginPath();
+			ctx.rect(rect.x, rect.y, rect.width, rect.height);
+		} else if (this._content) {
+			this._setStyles(ctx, param, viewMatrix);
+			var lines = this._lines,
+				style = this._style,
+				hasFill = style.hasFill(),
+				hasStroke = style.hasStroke(),
+				leading = style.getLeading(),
+				shadowColor = ctx.shadowColor;
+			if (hasStroke && !style.getStrokeScaling()) {
+				var scale = viewMatrix._getMeanScale();
+				ctx.lineWidth /= scale;
+				if ('setLineDash' in ctx) {
+					ctx.setLineDash(ctx.getLineDash().map(function(dash) {
+						return dash / scale;
+					}));
+					ctx.lineDashOffset /= scale;
+				}
+			}
+			ctx.font = style.getFontStyle();
+			ctx.textAlign = style.getJustification();
+			ctx.letterSpacing = style.getTrackingStyle();
+			for (var i = 0, l = lines.length; i < l; i++) {
+				ctx.shadowColor = shadowColor;
+				var line = lines[i];
+				if (hasFill) {
+					ctx.fillText(line, 0, 0);
+					ctx.shadowColor = 'rgba(0,0,0,0)';
+				}
+				if (hasStroke)
+					ctx.strokeText(line, 0, 0);
+				ctx.translate(0, leading);
 			}
-			if (hasStroke)
-				ctx.strokeText(line, 0, 0);
-			ctx.translate(0, leading);
 		}
 	},
 
@@ -11652,14 +11952,28 @@ var PointText = TextItem.extend({
 			numLines = lines.length,
 			justification = style.getJustification(),
 			leading = style.getLeading(),
-			width = this.getView().getTextWidth(style.getFontStyle(), lines),
+			width = this.getView().getTextWidth(style.getFontStyle(), lines,
+					style.getTrackingStyle()),
 			x = 0;
 		if (justification !== 'left')
 			x -= width / (justification === 'center' ? 2: 1);
 		var rect = new Rectangle(x,
 					numLines ? - 0.75 * leading : 0,
 					width, numLines * leading);
+		if (options.stroke && style.hasStroke())
+			rect = rect.expand(style.getStrokeWidth());
 		return matrix ? matrix._transformBounds(rect, rect) : rect;
+	},
+
+	_hitTestSelf: function(point, options) {
+		if (options.fill && this.getFillColor()) {
+			var bounds = this.getInternalBounds(),
+				closest = point.clamp(bounds.getTopLeft(true),
+						bounds.getBottomRight(true));
+			if (point.subtract(closest).divide(options._tolerancePadding)
+					.getLength() <= 1)
+				return new HitResult('fill', this);
+		}
 	}
 });
 
@@ -11720,13 +12034,14 @@ var Color = Base.extend(new function() {
 		} else {
 			var color = namedColors[string];
 			if (!color) {
-				if (window) {
-					if (!colorCtx) {
-						colorCtx = CanvasProvider.getContext(1, 1, {
-							willReadFrequently: true
-						});
+				if (!colorCtx) {
+					colorCtx = CanvasProvider.getContext(1, 1, {
+						willReadFrequently: true
+					});
+					if (colorCtx)
 						colorCtx.globalCompositeOperation = 'copy';
-					}
+				}
+				if (colorCtx) {
 					colorCtx.fillStyle = 'rgba(0,0,0,0)';
 					colorCtx.fillStyle = string;
 					colorCtx.fillRect(0, 0, 1, 1);
@@ -12133,8 +12448,9 @@ var Color = Base.extend(new function() {
 						+ components.join(',') + ')';
 		},
 
-		toCanvasStyle: function(ctx, matrix) {
-			if (this._canvasStyle)
+		toCanvasStyle: function(ctx, matrix, strokeMatrix) {
+			var isCacheable = !(this._type === 'gradient' && strokeMatrix);
+			if (this._canvasStyle && isCacheable)
 				return this._canvasStyle;
 			if (this._type !== 'gradient')
 				return this._canvasStyle = this.toCSS();
@@ -12152,6 +12468,12 @@ var Color = Base.extend(new function() {
 				if (highlight)
 					highlight = inverse._transformPoint(highlight);
 			}
+			if (strokeMatrix) {
+				origin = strokeMatrix._transformPoint(origin);
+				destination = strokeMatrix._transformPoint(destination);
+				if (highlight)
+					highlight = strokeMatrix._transformPoint(highlight);
+			}
 			if (gradient._radial) {
 				var radius = destination.getDistance(origin);
 				if (highlight) {
@@ -12173,7 +12495,9 @@ var Color = Base.extend(new function() {
 						offset == null ? i / (l - 1) : offset,
 						stop._color.toCanvasStyle());
 			}
-			return this._canvasStyle = canvasGradient;
+			if (isCacheable)
+				this._canvasStyle = canvasGradient;
+			return canvasGradient;
 		},
 
 		transform: function(matrix) {
@@ -12437,6 +12761,7 @@ var Style = Base.extend(new function() {
 		fontWeight: 'normal',
 		fontSize: 12,
 		leading: null,
+		tracking: 0,
 		justification: 'left'
 	}),
 	textDefaults = Base.set({}, groupDefaults, {
@@ -12453,6 +12778,7 @@ var Style = Base.extend(new function() {
 		fontSize: 9,
 		font: 9,
 		leading: 9,
+		tracking: 9,
 		justification: 9
 	},
 	item = {
@@ -12497,7 +12823,7 @@ var Style = Base.extend(new function() {
 				var old = this._values[key];
 				if (old !== value) {
 					if (isColor) {
-						if (old) {
+						if (old && old.constructor === Color) {
 							Color._setOwner(old, null);
 							old._canvasStyle = null;
 						}
@@ -12643,6 +12969,10 @@ var Style = Base.extend(new function() {
 				+ this.getFontFamily();
 	},
 
+	getTrackingStyle: function() {
+		return this.getTracking() / 1000 + 'em';
+	},
+
 	getFont: '#getFontFamily',
 	setFont: '#setFontFamily',
 
@@ -12719,6 +13049,18 @@ var DomElement = new function() {
 			return DomElement.getBounds(el, true).getSize();
 		},
 
+		getInsets: function(el, start) {
+			var style = DomElement.getStyles(el);
+			function get(side) {
+				return parseFloat(style['padding' + side])
+						+ parseFloat(style['border' + side + 'Width']);
+			}
+			return start
+					? new Size(get('Left'), get('Top'))
+					: new Size(get('Left') + get('Right'),
+						get('Top') + get('Bottom'));
+		},
+
 		isInvisible: function(el) {
 			return DomElement.getSize(el).equals(new Size(0, 0));
 		},
@@ -12777,12 +13119,20 @@ var DomEvent = {
 		}
 	},
 
-	getPoint: function(event) {
-		var pos = event.targetTouches
-				? event.targetTouches.length
-					? event.targetTouches[0]
-					: event.changedTouches[0]
-				: event;
+	getPoint: function(event, target) {
+		function find(touches) {
+			for (var i = 0, l = touches.length; i < l; i++) {
+				if (touches[i].target === target)
+					return touches[i];
+			}
+		}
+
+		var touches = event.targetTouches,
+			pos = event;
+		if (touches) {
+			pos = find(event.touches) || find(event.changedTouches)
+					|| (touches.length ? touches[0] : event.changedTouches[0]);
+		}
 		return new Point(
 			pos.pageX || pos.clientX + document.documentElement.scrollLeft,
 			pos.pageY || pos.clientY + document.documentElement.scrollTop
@@ -12798,8 +13148,9 @@ var DomEvent = {
 	},
 
 	getOffset: function(event, target) {
-		return DomEvent.getPoint(event).subtract(DomElement.getOffset(
-				target || DomEvent.getTarget(event)));
+		target = target || DomEvent.getTarget(event);
+		return DomEvent.getPoint(event, target).subtract(
+				DomElement.getOffset(target));
 	}
 };
 
@@ -12815,8 +13166,12 @@ DomEvent.requestAnimationFrame = new function() {
 		for (var i = 0, l = functions.length; i < l; i++)
 			functions[i]();
 		requested = nativeRequest && callbacks.length;
-		if (requested)
+		if (requested) {
 			nativeRequest(handleCallbacks);
+		} else if (timer && !callbacks.length) {
+			clearInterval(timer);
+			timer = null;
+		}
 	}
 
 	return function(callback) {
@@ -12842,10 +13197,10 @@ var View = Base.extend(Emitter, {
 		}
 
 		function getCanvasSize() {
-			var size = DomElement.getSize(element);
+			var size = new Size(element.offsetWidth, element.offsetHeight);
 			return size.isNaN() || size.isZero()
 					? new Size(getSize('width'), getSize('height'))
-					: size;
+					: size.subtract(DomElement.getInsets(element));
 		}
 
 		var size;
@@ -12958,7 +13313,7 @@ var View = Base.extend(Emitter, {
 			this.requestUpdate();
 	},
 
-	update: function() {
+	update: function(force) {
 	},
 
 	draw: function() {
@@ -12973,7 +13328,8 @@ var View = Base.extend(Emitter, {
 				if (that._animate) {
 					that.requestUpdate();
 					var element = that._element;
-					if ((!DomElement.getPrefixed(document, 'hidden')
+					if (!element
+							|| (!DomElement.getPrefixed(document, 'hidden')
 							|| PaperScope.getAttribute(element, 'keepalive')
 								=== 'true') && DomElement.isInView(element)) {
 						that._handleFrame();
@@ -13046,6 +13402,14 @@ var View = Base.extend(Emitter, {
 		return this._element;
 	},
 
+	getProject: function() {
+		return this._project;
+	},
+
+	getScope: function() {
+		return this._scope;
+	},
+
 	getPixelRatio: function() {
 		return this._pixelRatio;
 	},
@@ -13151,12 +13515,14 @@ var View = Base.extend(Emitter, {
 
 	getZoom: function() {
 		var scaling = this._decompose().scaling;
-		return (scaling.x + scaling.y) / 2;
+		return (Math.abs(scaling.x) + Math.abs(scaling.y)) / 2;
 	},
 
 	setZoom: function(zoom) {
-		this.transform(new Matrix().scale(zoom / this.getZoom(),
-			this.getCenter()));
+		if (zoom > 0 && isFinite(zoom)) {
+			this.transform(new Matrix().scale(zoom / this.getZoom(),
+				this.getCenter()));
+		}
 	},
 
 	getRotation: function() {
@@ -13166,7 +13532,8 @@ var View = Base.extend(Emitter, {
 	setRotation: function(rotation) {
 		var current = this.getRotation();
 		if (current != null && rotation != null) {
-			this.rotate(rotation - current);
+			this._matrix.prepend(new Matrix().rotate(rotation - current,
+					this.projectToView(this.getCenter())));
 		}
 	},
 
@@ -13196,6 +13563,31 @@ var View = Base.extend(Emitter, {
 		this._matrix.append(matrix);
 	},
 
+	fitBounds: function(rectangle, fit) {
+		rectangle = Rectangle.read(arguments);
+		fit = Base.read(arguments);
+		var matrix = this._matrix,
+			size = this._viewSize,
+			bounds = matrix._transformBounds(rectangle),
+			scaleX = new Point(matrix._a, matrix._c).getLength(),
+			scaleY = new Point(matrix._b, matrix._d).getLength(),
+			ratios = [
+				size.width / bounds.width * scaleX,
+				size.height / bounds.height * scaleY
+			].filter(function(ratio) {
+				return ratio > 0 && isFinite(ratio);
+			});
+		this.setCenter(rectangle.getCenter());
+		if (ratios.length) {
+			var amount = fit === 'cover'
+					? Math.max.apply(Math, ratios)
+					: Math.min.apply(Math, ratios);
+			matrix.prepend(new Matrix().scale(
+					new Point(amount / scaleX, amount / scaleY),
+					size.divide(2)));
+		}
+	},
+
 	scrollBy: function() {
 		this.translate(Point.read(arguments).negate());
 	}
@@ -13210,7 +13602,17 @@ var View = Base.extend(Emitter, {
 	},
 
 	getEventPoint: function(event) {
-		return this.viewToProject(DomEvent.getOffset(event, this._element));
+		var element = this._element,
+			offset = DomEvent.getOffset(event, element),
+			size = DomElement.getSize(element);
+		if (!size.isZero()) {
+			var cssSize = new Size(element.offsetWidth, element.offsetHeight);
+			offset = offset.multiply(cssSize.divide(size))
+					.subtract(DomElement.getInsets(element, true))
+					.multiply(this.getViewSize().divide(
+						cssSize.subtract(DomElement.getInsets(element))));
+		}
+		return this.viewToProject(offset);
 	},
 
 }, {
@@ -13228,8 +13630,6 @@ var View = Base.extend(Emitter, {
 	}
 },
 new function() {
-	if (!window)
-		return;
 	var prevFocus,
 		tempFocus,
 		dragging = false,
@@ -13257,92 +13657,87 @@ new function() {
 		view._handleMouseEvent('mousemove', event, point);
 	}
 
-	var navigator = window.navigator,
-		mousedown, mousemove, mouseup;
-	if (navigator.pointerEnabled || navigator.msPointerEnabled) {
-		mousedown = 'pointerdown MSPointerDown';
-		mousemove = 'pointermove MSPointerMove';
-		mouseup = 'pointerup pointercancel MSPointerUp MSPointerCancel';
-	} else {
-		mousedown = 'touchstart';
-		mousemove = 'touchmove';
-		mouseup = 'touchend touchcancel';
-		if (!('ontouchstart' in window && navigator.userAgent.match(
-				/mobile|tablet|ip(ad|hone|od)|android|silk/i))) {
-			mousedown += ' mousedown';
-			mousemove += ' mousemove';
-			mouseup += ' mouseup';
+	var viewEvents = {};
+
+	if (window) {
+		var navigator = window.navigator,
+			mousedown, mousemove, mouseup;
+		if (navigator.pointerEnabled || navigator.msPointerEnabled) {
+			mousedown = 'pointerdown MSPointerDown';
+			mousemove = 'pointermove MSPointerMove';
+			mouseup = 'pointerup pointercancel MSPointerUp MSPointerCancel';
+		} else {
+			mousedown = 'touchstart';
+			mousemove = 'touchmove';
+			mouseup = 'touchend touchcancel';
+			if (!('ontouchstart' in window && navigator.userAgent.match(
+					/mobile|tablet|ip(ad|hone|od)|android|silk/i))) {
+				mousedown += ' mousedown';
+				mousemove += ' mousemove';
+				mouseup += ' mouseup';
+			}
 		}
-	}
 
-	var viewEvents = {},
-		docEvents = {
+		var docEvents = {
 			mouseout: function(event) {
 				var view = View._focused,
 					target = DomEvent.getRelatedTarget(event);
-				if (view && (!target || target.nodeName === 'HTML')) {
-					var offset = DomEvent.getOffset(event, view._element),
-						x = offset.x,
-						abs = Math.abs,
-						ax = abs(x),
-						max = 1 << 25,
-						diff = ax - max;
-					offset.x = abs(diff) < ax ? diff * (x < 0 ? -1 : 1) : x;
-					handleMouseMove(view, event, view.viewToProject(offset));
-				}
+				if (view && (!target || target.nodeName === 'HTML'))
+					handleMouseMove(view, event);
 			},
 
 			scroll: updateFocus
 		};
 
-	viewEvents[mousedown] = function(event) {
-		var view = View._focused = getView(event);
-		if (!dragging) {
-			dragging = true;
-			view._handleMouseEvent('mousedown', event);
-		}
-	};
+		viewEvents[mousedown] = function(event) {
+			var view = View._focused = getView(event);
+			if (!dragging) {
+				dragging = true;
+				view._handleMouseEvent('mousedown', event);
+			}
+		};
 
-	docEvents[mousemove] = function(event) {
-		var view = View._focused;
-		if (!mouseDown) {
-			var target = getView(event);
-			if (target) {
-				if (view !== target) {
-					if (view)
-						handleMouseMove(view, event);
-					if (!prevFocus)
-						prevFocus = view;
-					view = View._focused = tempFocus = target;
-				}
-			} else if (tempFocus && tempFocus === view) {
-				if (prevFocus && !prevFocus.isInserted())
+		docEvents[mousemove] = function(event) {
+			var view = View._focused;
+			if (!mouseDown) {
+				var target = getView(event);
+				if (target) {
+					if (view !== target) {
+						if (view)
+							handleMouseMove(view, event);
+						if (!prevFocus)
+							prevFocus = view;
+						view = View._focused = tempFocus = target;
+					}
+				} else if (tempFocus && tempFocus === view) {
+					if (prevFocus && !prevFocus.isInserted())
+						prevFocus = null;
+					view = View._focused = prevFocus;
 					prevFocus = null;
-				view = View._focused = prevFocus;
-				prevFocus = null;
-				updateFocus();
+					updateFocus();
+				}
 			}
-		}
-		if (view)
-			handleMouseMove(view, event);
-	};
+			if (view)
+				handleMouseMove(view, event);
+		};
 
-	docEvents[mousedown] = function() {
-		mouseDown = true;
-	};
+		docEvents[mousedown] = function() {
+			mouseDown = true;
+		};
 
-	docEvents[mouseup] = function(event) {
-		var view = View._focused;
-		if (view && dragging)
-			view._handleMouseEvent('mouseup', event);
-		mouseDown = dragging = false;
-	};
+		docEvents[mouseup] = function(event) {
+			var view = View._focused;
+			if (view && dragging)
+				view._handleMouseEvent('mouseup', event);
+			mouseDown = dragging = false;
+		};
 
-	DomEvent.add(document, docEvents);
+		DomEvent.add(document, docEvents);
 
-	DomEvent.add(window, {
-		load: updateFocus
-	});
+		DomEvent.add(window, {
+			load: updateFocus
+		});
+	}
 
 	var called = false,
 		prevented = false,
@@ -13408,9 +13803,27 @@ new function() {
 					point, prevPoint));
 	}
 
+	function createEvent(type, options) {
+		if (options.modifiers)
+			Key.modifiers.set(options.modifiers);
+		return {
+			type: type,
+			timeStamp: options.timeStamp != null ? options.timeStamp
+					: Date.now(),
+			button: options.button || 0,
+			cancelable: true,
+			defaultPrevented: false,
+			preventDefault: function() {
+				this.defaultPrevented = true;
+			},
+			stopPropagation: function() {}
+		};
+	}
+
 	var itemEventsMap = {
 		mousedown: {
 			mousedown: 1,
+			mouseup: 1,
 			mousedrag: 1,
 			click: 1,
 			doubleclick: 1
@@ -13432,6 +13845,28 @@ new function() {
 	return {
 		_viewEvents: viewEvents,
 
+		dispatchMouseEvent: function(type, point, options) {
+			if (!/^mouse(down|move|up)$/.test(type))
+				throw new Error('Unknown mouse event type: \'' + type + '\'.');
+			var event = createEvent(type, options || {});
+			if (type === 'mousedown') {
+				View._focused = this;
+				mouseDown = dragging = true;
+			}
+			this._handleMouseEvent(type, event, new Point(point));
+			if (type === 'mouseup')
+				mouseDown = dragging = false;
+			return event.defaultPrevented;
+		},
+
+		dispatchKeyEvent: function(type, key, options) {
+			if (!/^key(down|up)$/.test(type))
+				throw new Error('Unknown key event type: \'' + type + '\'.');
+			options = options || {};
+			Key._handleKey(type === 'keydown', key, options.character,
+					createEvent(type, options), this);
+		},
+
 		_handleMouseEvent: function(type, event, point) {
 			var itemEvents = this._itemEvents,
 				hitItems = itemEvents.native[type],
@@ -13444,12 +13879,37 @@ new function() {
 						|| tool && tool.responds(type);
 			}
 
+			function needsUp(hitItem) {
+				if (view.responds('mouseup')
+						|| tool && tool.responds('mouseup'))
+					return true;
+				for (var item = hitItem; item; item = item._parent) {
+					for (var key in itemEventsMap.mouseup) {
+						if (item.responds(key))
+							return true;
+					}
+				}
+				return false;
+			}
+
+			if (event.shiftKey !== undefined) {
+				Key.modifiers.set({
+					shift: event.shiftKey,
+					control: event.ctrlKey,
+					alt: event.altKey,
+					meta: event.metaKey
+				});
+			}
 			if (nativeMove && dragging && responds('mousedrag'))
 				type = 'mousedrag';
 			if (!point)
 				point = this.getEventPoint(event);
 
-			var inView = this.getBounds().contains(point),
+			var target = DomEvent.getTarget(event),
+				isCovered = nativeMove && !dragging && target
+						&& target.nodeType === 1
+						&& !target.contains(this._element),
+				inView = !isCovered && this.getBounds().contains(point),
 				hit = hitItems && inView && view._project.hitTest(point, {
 					tolerance: 0,
 					fill: true,
@@ -13484,9 +13944,12 @@ new function() {
 			if (mouse.down && inView || mouse.up && downPoint) {
 				emitMouseEvents(this, hitItem, type, event, point, downPoint);
 				if (mouse.down) {
-					dblClick = hitItem === clickItem
-						&& (Date.now() - clickTime < 300);
+					var time = Date.now();
+					dblClick = !dblClick && hitItem === clickItem
+						&& time - clickTime < 300
+						&& point.getDistance(downPoint) < 3;
 					downItem = clickItem = hitItem;
+					clickTime = time;
 					if (!prevented && hitItem) {
 						var item = hitItem;
 						while (item && !item.responds('mousedrag'))
@@ -13497,10 +13960,8 @@ new function() {
 					downPoint = point;
 				} else if (mouse.up) {
 					if (!prevented && hitItem === downItem) {
-						clickTime = Date.now();
 						emitMouseEvents(this, hitItem, dblClick ? 'doubleclick'
 								: 'click', event, point, downPoint);
-						dblClick = false;
 					}
 					downItem = dragItem = null;
 				}
@@ -13515,7 +13976,7 @@ new function() {
 
 			if (
 				event.cancelable !== false
-				&& (called && !mouse.move || mouse.down && responds('mouseup'))
+				&& (called && !mouse.move || mouse.down && needsUp(hitItem))
 			) {
 				event.preventDefault();
 			}
@@ -13534,11 +13995,9 @@ new function() {
 				}
 			}
 
-			if (this.isVisible()) {
-				emit(this);
-				if (tool && tool.responds(type))
-					emit(tool);
-			}
+			emit(this);
+			if (tool && tool.responds(type))
+				emit(tool);
 		},
 
 		_countItemEvent: function(type, sign) {
@@ -13596,16 +14055,20 @@ var CanvasView = View.extend({
 	},
 
 	_setElementSize: function _setElementSize(width, height) {
-		var pixelRatio = this._pixelRatio;
+		var pixelRatio = this._pixelRatio,
+			element = this._element;
 		_setElementSize.base.call(this, width * pixelRatio, height * pixelRatio);
+		if (!PaperScope.hasAttribute(element, 'resize')) {
+			var style = element.style,
+				insets = DomElement.getStyles(element).boxSizing
+					=== 'border-box'
+						? DomElement.getInsets(element)
+						: new Size();
+			style.width = (width + insets.width) + 'px';
+			style.height = (height + insets.height) + 'px';
+		}
 		if (pixelRatio !== 1) {
-			var element = this._element,
-				ctx = this._context;
-			if (!PaperScope.hasAttribute(element, 'resize')) {
-				var style = element.style;
-				style.width = width + 'px';
-				style.height = height + 'px';
-			}
+			var ctx = this._context;
 			ctx.restore();
 			ctx.save();
 			ctx.scale(pixelRatio, pixelRatio);
@@ -13631,19 +14094,22 @@ var CanvasView = View.extend({
 		return pixels;
 	},
 
-	getTextWidth: function(font, lines) {
+	getTextWidth: function(font, lines, letterSpacing) {
 		var ctx = this._context,
 			prevFont = ctx.font,
+			prevLetterSpacing = ctx.letterSpacing,
 			width = 0;
 		ctx.font = font;
+		ctx.letterSpacing = letterSpacing;
 		for (var i = 0, l = lines.length; i < l; i++)
 			width = Math.max(width, ctx.measureText(lines[i]).width);
 		ctx.font = prevFont;
+		ctx.letterSpacing = prevLetterSpacing;
 		return width;
 	},
 
-	update: function() {
-		if (!this._needsUpdate)
+	update: function(force) {
+		if (!this._needsUpdate && !force)
 			return false;
 		var project = this._project,
 			ctx = this._context,
@@ -13714,6 +14180,7 @@ var Key = new function() {
 	var keyLookup = {
 			'\t': 'tab',
 			' ': 'space',
+			'\xA0': 'space',
 			'\b': 'backspace',
 			'\x7f': 'delete',
 			'Spacebar': 'space',
@@ -13767,10 +14234,16 @@ var Key = new function() {
 				(key.length > 1 ? Base.hyphenate(key) : key.toLowerCase());
 	}
 
-	function handleKey(down, key, character, event) {
-		var type = down ? 'keydown' : 'keyup',
-			view = View._focused,
-			name;
+	function handleKey(down, key, character, event, view) {
+		if (!view) {
+			View.updateFocus();
+			view = View._focused;
+			if (view && !view.isVisible())
+				view = null;
+		}
+		if (character == null)
+			character = down ? key.length > 1 ? '' : key : charMap[key] || '';
+		var name;
 		keyMap[key] = down;
 		if (down) {
 			charMap[key] = character;
@@ -13786,7 +14259,7 @@ var Key = new function() {
 				} else {
 					for (var k in metaFixMap) {
 						if (k in charMap)
-							handleKey(false, k, metaFixMap[k], event);
+							handleKey(false, k, metaFixMap[k], event, view);
 					}
 					metaFixMap = null;
 				}
@@ -13802,11 +14275,9 @@ var Key = new function() {
 
 	DomEvent.add(document, {
 		keydown: function(event) {
-			var key = getKey(event),
-				agent = paper && paper.agent;
-			if (key.length > 1 || agent && (agent.chrome && (event.altKey
-						|| agent.mac && event.metaKey
-						|| !agent.mac && event.ctrlKey))) {
+			var key = getKey(event);
+			if (key.length > 1 || event.ctrlKey || event.altKey
+					|| event.metaKey) {
 				handleKey(true, key,
 						charLookup[key] || (key.length > 1 ? '' : key), event);
 			} else {
@@ -13843,6 +14314,8 @@ var Key = new function() {
 	});
 
 	return {
+		_handleKey: handleKey,
+
 		modifiers: modifiers,
 
 		isDown: function(key) {
@@ -14009,6 +14482,14 @@ var Tool = PaperScopeItem.extend({
 		}
 	},
 
+	getEventInterval: function() {
+		return this._eventInterval;
+	},
+
+	setEventInterval: function(interval) {
+		this._eventInterval = interval;
+	},
+
 	getFixedDistance: function() {
 		return this._minDistance == this._maxDistance
 			? this._minDistance : null;
@@ -14065,7 +14546,24 @@ var Tool = PaperScopeItem.extend({
 		if (mouse.down) {
 			update();
 			emit();
+			if (this._eventInterval > 0) {
+				clearInterval(this._timer);
+				this._timer = setInterval(function() {
+					if (tool.isActive()) {
+						paper = tool._scope;
+						tool._lastPoint = tool._point;
+						tool._moveCount++;
+						if (tool.responds('mousedrag')) {
+							tool.emit('mousedrag',
+									new ToolEvent(tool, 'mousedrag', event));
+						}
+					} else {
+						clearInterval(tool._timer);
+					}
+				}, this._eventInterval);
+			}
 		} else if (mouse.up) {
+			clearInterval(this._timer);
 			update(null, this._maxDistance);
 			emit();
 		} else if (responds) {
@@ -14140,6 +14638,48 @@ var Tween = Base.extend(Emitter, {
 				return t < 0.5
 					? 16 * t * t * t * t * t
 					: 1 + 16 * (--t) * t * t * t * t;
+			},
+
+			easeInSine: function(t) {
+				return 1 - Math.cos(t * Math.PI / 2);
+			},
+
+			easeOutSine: function(t) {
+				return Math.sin(t * Math.PI / 2);
+			},
+
+			easeInOutSine: function(t) {
+				return (1 - Math.cos(t * Math.PI)) / 2;
+			},
+
+			easeInExpo: function(t) {
+				return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+			},
+
+			easeOutExpo: function(t) {
+				return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+			},
+
+			easeInOutExpo: function(t) {
+				return t === 0 || t === 1
+					? t
+					: t < 0.5
+						? Math.pow(2, 20 * t - 10) / 2
+						: 1 - Math.pow(2, 10 - 20 * t) / 2;
+			},
+
+			easeInCirc: function(t) {
+				return 1 - Math.sqrt(1 - t * t);
+			},
+
+			easeOutCirc: function(t) {
+				return Math.sqrt(1 - (--t) * t);
+			},
+
+			easeInOutCirc: function(t) {
+				return t < 0.5
+					? (1 - Math.sqrt(1 - 4 * t * t)) / 2
+					: (1 + Math.sqrt(1 - 4 * (--t) * t)) / 2;
 			}
 		})
 	},
@@ -14360,7 +14900,7 @@ var CanvasProvider = Base.exports.CanvasProvider = {
 	canvases: [],
 
 	getCanvas: function(width, height, options) {
-		if (!window)
+		if (!window && !self.OffscreenCanvas)
 			return null;
 		var canvas,
 			clear = true;
@@ -14371,7 +14911,9 @@ var CanvasProvider = Base.exports.CanvasProvider = {
 		if (this.canvases.length) {
 			canvas = this.canvases.pop();
 		} else {
-			canvas = document.createElement('canvas');
+			canvas = window
+					? document.createElement('canvas')
+					: new self.OffscreenCanvas(width, height);
 			clear = false;
 		}
 		var ctx = canvas.getContext('2d', options || {});
@@ -14398,8 +14940,9 @@ var CanvasProvider = Base.exports.CanvasProvider = {
 	release: function(obj) {
 		var canvas = obj && obj.canvas ? obj.canvas : obj;
 		if (canvas && canvas.getContext) {
-			canvas.getContext('2d').restore();
-			this.canvases.push(canvas);
+			canvas.width = canvas.height = 0;
+			if (this.canvases.length < 8)
+				this.canvases.push(canvas);
 		}
 	}
 };
@@ -14575,6 +15118,12 @@ var BlendMode = new function() {
 			db = (bb + sb) / 2;
 		},
 
+		'pin-light': function() {
+			dr = sr < 128 ? min(br, 2 * sr) : max(br, 2 * sr - 255);
+			dg = sg < 128 ? min(bg, 2 * sg) : max(bg, 2 * sg - 255);
+			db = sb < 128 ? min(bb, 2 * sb) : max(bb, 2 * sb - 255);
+		},
+
 		negation: function() {
 			dr = 255 - abs(255 - sr - br);
 			dg = 255 - abs(255 - sg - bg);
@@ -14673,7 +15222,8 @@ var SvgElement = new function() {
 	function get(node, name) {
 		var namespace = attributeNamespace[name],
 			value = namespace
-				? node.getAttributeNS(namespace, name)
+				? node.getAttribute(name)
+					|| node.getAttributeNS(namespace, name)
 				: node.getAttribute(name);
 		return value === 'null' ? null : value;
 	}
@@ -14724,8 +15274,9 @@ var SvgStyles = Base.each({
 	dashArray: ['stroke-dasharray', 'array'],
 	dashOffset: ['stroke-dashoffset', 'number'],
 	fontFamily: ['font-family', 'string'],
-	fontWeight: ['font-weight', 'string'],
+	fontWeight: ['font-weight', 'font'],
 	fontSize: ['font-size', 'number'],
+	tracking: ['letter-spacing', 'tracking'],
 	justification: ['text-anchor', 'lookup', {
 		left: 'start',
 		center: 'middle',
@@ -14751,7 +15302,8 @@ var SvgStyles = Base.each({
 }, {});
 
 new function() {
-	var formatter;
+	var formatter,
+		parentStyles;
 
 	function getTransform(matrix, coordinates, center) {
 		var attrs = new Base(),
@@ -14800,34 +15352,72 @@ new function() {
 		var node = SvgElement.create('g', attrs, formatter);
 		for (var i = 0, l = children.length; i < l; i++) {
 			var child = children[i];
-			var childNode = exportSVG(child, options);
-			if (childNode) {
-				if (child.isClipMask()) {
-					var clip = SvgElement.create('clipPath');
-					clip.appendChild(childNode);
-					setDefinition(child, clip, 'clip');
-					SvgElement.set(node, {
-						'clip-path': 'url(#' + clip.id + ')'
-					});
-				} else {
+			if (child.isClipMask()) {
+				var clip = exportClip(child, options);
+				setDefinition(child, clip, 'clip', options);
+				SvgElement.set(node, {
+					'clip-path': 'url(#' + clip.id + ')'
+				});
+			} else {
+				var childNode = exportSVG(child, options);
+				if (childNode)
 					node.appendChild(childNode);
-				}
 			}
 		}
 		return node;
 	}
 
+	function exportClip(item, options) {
+		var clip = SvgElement.create('clipPath');
+
+		function addItem(item) {
+			if (item instanceof Group) {
+				var children = item._children;
+				for (var i = 0, l = children.length; i < l; i++) {
+					if (!children[i]._clipMask)
+						addItem(children[i]);
+				}
+			} else {
+				var node = exportSVG(item, options);
+				if (node)
+					clip.appendChild(node);
+			}
+		}
+
+		if (item instanceof Group) {
+			item = item.clone({ insert: false });
+			item.matrix.apply(true, true);
+		}
+		addItem(item);
+		return clip;
+	}
+
 	function exportRaster(item, options) {
 		var attrs = getTransform(item._matrix, true),
 			size = item.getSize(),
-			image = item.getImage();
+			image = item.getImage(),
+			href = options.embedImages == false && image && image.src
+				|| item.toDataURL();
 		attrs.x -= size.width / 2;
 		attrs.y -= size.height / 2;
-		attrs.width = size.width;
-		attrs.height = size.height;
-		attrs.href = options.embedImages == false && image && image.src
-				|| item.toDataURL();
-		return SvgElement.create('image', attrs, formatter);
+		if (options.reuseImages) {
+			var node = getDefinition(href, 'image');
+			if (!node) {
+				node = SvgElement.create('image', {
+					width: size.width,
+					height: size.height,
+					href: href
+				}, formatter);
+				setDefinition(href, node, 'image', options);
+			}
+			attrs.href = '#' + node.id;
+			return SvgElement.create('use', attrs, formatter);
+		} else {
+			attrs.width = size.width;
+			attrs.height = size.height;
+			attrs.href = href;
+			return SvgElement.create('image', attrs, formatter);
+		}
 	}
 
 	function exportPath(item, options) {
@@ -14913,7 +15503,7 @@ new function() {
 				viewBox: formatter.rectangle(bounds)
 			});
 			node.appendChild(exportSVG(definitionItem, options));
-			setDefinition(definition, node, 'symbol');
+			setDefinition(definition, node, 'symbol', options);
 		}
 		attrs.href = '#' + node.id;
 		attrs.x += bounds.x;
@@ -14924,7 +15514,7 @@ new function() {
 		return SvgElement.create('use', attrs, formatter);
 	}
 
-	function exportGradient(color) {
+	function exportGradient(color, options) {
 		var gradientNode = getDefinition(color, 'color');
 		if (!gradientNode) {
 			var gradient = color.getGradient(),
@@ -14970,15 +15560,28 @@ new function() {
 				gradientNode.appendChild(
 						SvgElement.create('stop', attrs, formatter));
 			}
-			setDefinition(color, gradientNode, 'color');
+			setDefinition(color, gradientNode, 'color', options);
 		}
 		return 'url(#' + gradientNode.id + ')';
 	}
 
 	function exportText(item) {
-		var node = SvgElement.create('text', getTransform(item._matrix, true),
-				formatter);
-		node.textContent = item._content;
+		var attrs = getTransform(item._matrix, true),
+			node = SvgElement.create('text', attrs, formatter),
+			lines = item._lines;
+		if (lines.length > 1) {
+			var leading = item._style.getLeading();
+			for (var i = 0, l = lines.length; i < l; i++) {
+				var span = SvgElement.create('tspan', {
+					x: attrs.x,
+					y: attrs.y + i * leading
+				}, formatter);
+				span.textContent = lines[i];
+				node.appendChild(span);
+			}
+		} else {
+			node.textContent = item._content;
+		}
 		return node;
 	}
 
@@ -14993,9 +15596,18 @@ new function() {
 		PointText: exportText
 	};
 
+	var cssBlendModes = Base.each(['normal', 'multiply', 'screen', 'overlay',
+			'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
+			'soft-light', 'difference', 'exclusion', 'hue', 'saturation',
+			'color', 'luminosity'], function(mode) {
+		this[mode] = true;
+	}, {});
+
 	function applyStyle(item, node, options, isRoot) {
 		var attrs = {},
 			parent = !isRoot && item.getParent(),
+			parentStyle = parent && (parentStyles[parent._id] =
+					parentStyles[parent._id] || {}),
 			style = [];
 
 		if (item._name != null)
@@ -15005,24 +15617,39 @@ new function() {
 			var get = entry.get,
 				type = entry.type,
 				value = item[get]();
-			if (entry.exportFilter
+			if (parent && !(get in parentStyle))
+				parentStyle[get] = parent[get]();
+			if (value !== undefined && (entry.exportFilter
 					? entry.exportFilter(item, value)
 					: options.reduceAttributes == false
-						|| !parent || !Base.equals(parent[get](), value)) {
+						|| !parent || !Base.equals(parentStyle[get], value))) {
 				if (type === 'color' && value != null) {
 					var alpha = value.getAlpha();
 					if (alpha < 1)
 						attrs[entry.attribute + '-opacity'] = alpha;
 				}
 				if (type === 'style') {
-					style.push(entry.attribute + ': ' + value);
+					if (cssBlendModes[value]) {
+						style.push(entry.attribute + ': ' + value);
+					} else {
+						attrs['data-paper-blend-mode'] = value;
+					}
+				} else if (type === 'font') {
+					var font = ('' + value).match(
+							/^(.*?)\s*\b(italic|oblique)\b\s*(.*)$/i);
+					attrs[entry.attribute] = font
+							? (font[1] + ' ' + font[3]).trim() || 'normal'
+							: value;
+					if (font)
+						attrs['font-style'] = font[2].toLowerCase();
 				} else {
 					attrs[entry.attribute] = value == null ? 'none'
 							: type === 'color' ? value.gradient
-								? exportGradient(value, item)
+								? exportGradient(value, options)
 								: value.toCSS(true)
 							: type === 'array' ? value.join(',')
 							: type === 'lookup' ? entry.toSVG[value]
+							: type === 'tracking' ? value && value / 1000 + 'em'
 							: value;
 				}
 			}
@@ -15044,16 +15671,20 @@ new function() {
 	function getDefinition(item, type) {
 		if (!definitions)
 			definitions = { ids: {}, svgs: {} };
-		return item && definitions.svgs[type + '-'
-				+ (item._id || item.__id || (item.__id = UID.get('svg')))];
+		return item && definitions.svgs[getDefinitionKey(item, type)];
 	}
 
-	function setDefinition(item, node, type) {
+	function setDefinition(item, node, type, options) {
 		if (!definitions)
 			getDefinition();
 		var typeId = definitions.ids[type] = (definitions.ids[type] || 0) + 1;
-		node.id = type + '-' + typeId;
-		definitions.svgs[type + '-' + (item._id || item.__id)] = node;
+		node.id = (options.idPrefix || '') + type + '-' + typeId;
+		definitions.svgs[getDefinitionKey(item, type)] = node;
+	}
+
+	function getDefinitionKey(item, type) {
+		return type + '-' + (typeof item === 'string' ? item
+				: item._id || item.__id || (item.__id = UID.get('svg')));
 	}
 
 	function exportDefinitions(node, options) {
@@ -15074,6 +15705,7 @@ new function() {
 			}
 			definitions = null;
 		}
+		parentStyles = null;
 		return options.asString
 				? new self.XMLSerializer().serializeToString(svg)
 				: svg;
@@ -15097,6 +15729,7 @@ new function() {
 		if (!options)
 			options = {};
 		formatter = new Formatter(options.precision);
+		parentStyles = {};
 		return options;
 	}
 
@@ -15149,7 +15782,14 @@ new function() {
 new function() {
 
 	var definitions = {},
-		rootSize;
+		rootSize,
+		units = { 'in': 96, pt: 96 / 72, pc: 96 / 6, cm: 96 / 2.54,
+			mm: 96 / 25.4 };
+
+	function parseLength(value) {
+		var unit = /(in|pt|pc|cm|mm)\s*$/.exec(value);
+		return parseFloat(value) * (unit ? units[unit[1]] : 1);
+	}
 
 	function getValue(node, name, isString, allowNull, allowPercent,
 			defaultValue) {
@@ -15160,7 +15800,7 @@ new function() {
 					: isString ? '' : 0
 				: isString
 					? value
-					: parseFloat(value);
+					: parseLength(value);
 		return /%\s*$/.test(value)
 			? (res / 100) * (allowPercent ? 1
 				: rootSize[/x|^width/.test(name) ? 'width' : 'height'])
@@ -15181,12 +15821,12 @@ new function() {
 				: new Size(w, h);
 	}
 
-	function convertValue(value, type, lookup) {
+	function convertValue(value, type, lookup, options) {
 		return value === 'none' ? null
-				: type === 'number' ? parseFloat(value)
+				: type === 'number' ? parseLength(value)
 				: type === 'array' ?
-					value ? value.split(/[\s,]+/g).map(parseFloat) : []
-				: type === 'color' ? getDefinition(value) || value
+					value ? value.split(/[\s,]+/g).map(parseLength) : []
+				: type === 'color' ? getDefinition(value, options) || value
 				: type === 'lookup' ? lookup[value]
 				: value;
 	}
@@ -15198,11 +15838,17 @@ new function() {
 			item = new Group(),
 			project = item._project,
 			currentStyle = project._currentStyle,
+			parentSize = rootSize,
 			children = [];
 		if (!isClip && !isDefs) {
-			item = applyAttributes(item, node, isRoot);
+			item = applyAttributes(item, node, options, isRoot);
 			project._currentStyle = item._style.clone();
 		}
+		if (type === 'svg' && !isRoot) {
+			rootSize = new Size(
+					getValue(node, 'width', false, false, false, '100%'),
+					getValue(node, 'height', false, false, false, '100%'));
+		}
 		if (isRoot) {
 			var defs = node.querySelectorAll('defs');
 			for (var i = 0, l = defs.length; i < l; i++) {
@@ -15220,8 +15866,9 @@ new function() {
 		}
 		item.addChildren(children);
 		if (isClip)
-			item = applyAttributes(item.reduce(), node, isRoot);
+			item = applyAttributes(item.reduce(), node, options, isRoot);
 		project._currentStyle = currentStyle;
+		rootSize = parentSize;
 		if (isClip || isDefs) {
 			item.remove();
 			item = null;
@@ -15247,12 +15894,13 @@ new function() {
 		return PathItem.create(node.getAttribute('d'));
 	}
 
-	function importGradient(node, type) {
+	function importGradient(node, type, options) {
 		var id = (getValue(node, 'href', true) || '').substring(1),
+			definition = getDefinitionById(id, options),
 			radial = type === 'radialgradient',
 			gradient;
-		if (id) {
-			gradient = definitions[id].getGradient();
+		if (definition) {
+			gradient = definition.getGradient();
 			if (gradient._radial ^ radial) {
 				gradient = gradient.clone();
 				gradient._radial = radial;
@@ -15263,7 +15911,8 @@ new function() {
 			for (var i = 0, l = nodes.length; i < l; i++) {
 				var child = nodes[i];
 				if (child.nodeType === 1)
-					stops.push(applyAttributes(new GradientStop(), child));
+					stops.push(applyAttributes(new GradientStop(), child,
+							options));
 			}
 			gradient = new Gradient(stops, radial);
 		}
@@ -15283,7 +15932,8 @@ new function() {
 				'100%', '0%');
 		}
 		var color = applyAttributes(
-				new Color(gradient, origin, destination, highlight), node);
+				new Color(gradient, origin, destination, highlight), node,
+				options);
 		color._scaleToBounds = scaleToBounds;
 		return null;
 	}
@@ -15306,13 +15956,30 @@ new function() {
 		lineargradient: importGradient,
 		radialgradient: importGradient,
 
-		image: function (node) {
-			var raster = new Raster(getValue(node, 'href', true));
+		image: function (node, type, options) {
+			var raster = new Raster({
+					crossOrigin: options.crossOrigin,
+					source: getValue(node, 'href', true)
+				}),
+				align = /none|x(Min|Mid|Max)Y(Min|Mid|Max)/.exec(
+						getValue(node, 'preserveAspectRatio', true))
+						|| [null, 'Mid', 'Mid'];
 			raster.on('load', function() {
-				var size = getSize(node);
-				this.setSize(size);
-				var center = getPoint(node).add(size.divide(2));
-				this._matrix.append(new Matrix().translate(center));
+				var imageSize = this.getSize(),
+					size = getSize(node, null, null, true) || imageSize,
+					point = getPoint(node);
+				if (align[0] !== 'none') {
+					var factors = { Min: 0, Mid: 0.5, Max: 1 },
+						fitted = imageSize.multiply(Math.min(
+							size.width / imageSize.width,
+							size.height / imageSize.height));
+					point = point.add(size.subtract(fitted).multiply(
+							[factors[align[1]], factors[align[2]]]));
+					size = fitted;
+				}
+				var center = point.add(size.divide(2));
+				this._matrix.append(new Matrix().translate(center)
+						.scale(size.divide(imageSize)));
 			});
 			return raster;
 		},
@@ -15324,13 +15991,17 @@ new function() {
 
 		defs: importGroup,
 
-		use: function(node) {
+		use: function(node, type, options) {
 			var id = (getValue(node, 'href', true) || '').substring(1),
-				definition = definitions[id],
+				definition = getDefinitionById(id, options),
 				point = getPoint(node);
 			return definition
 					? definition instanceof SymbolDefinition
 						? definition.place(point)
+						: definition instanceof Raster
+							? importNode(getSandbox().ownerDocument
+								.getElementById(id), options, false)
+								.translate(point)
 						: definition.clone().translate(point)
 					: null;
 		},
@@ -15349,11 +16020,16 @@ new function() {
 		},
 
 		rect: function(node) {
+			var rx = getValue(node, 'rx', false, true),
+				ry = getValue(node, 'ry', false, true);
 			return new Shape.Rectangle(new Rectangle(
 						getPoint(node),
 						getSize(node)
-					), getSize(node, 'rx', 'ry'));
-			},
+					), new Size(
+						rx == null ? ry || 0 : rx,
+						ry == null ? rx || 0 : ry
+					));
+		},
 
 		line: function(node) {
 			return new Path.Line(
@@ -15363,8 +16039,14 @@ new function() {
 
 		text: function(node) {
 			var text = new PointText(getPoint(node).add(
-					getPoint(node, 'dx', 'dy')));
-			text.setContent(node.textContent.trim() || '');
+					getPoint(node, 'dx', 'dy'))),
+				lines = Base.each(node.childNodes, function(child) {
+					if (/^tspan$/i.test(child.nodeName)
+							&& child.hasAttribute('y'))
+						this.push(child.textContent.trim());
+				}, []);
+			text.setContent(lines.length > 1 ? lines.join('\n')
+					: node.textContent.trim());
 			return text;
 		},
 
@@ -15418,9 +16100,11 @@ new function() {
 	}
 
 	var attributes = Base.set(Base.each(SvgStyles, function(entry) {
-		this[entry.attribute] = function(item, value) {
+		this[entry.attribute] = function(item, value, name, node, styles,
+				options) {
 			if (item[entry.set]) {
-				item[entry.set](convertValue(value, entry.type, entry.fromSVG));
+				item[entry.set](convertValue(value, entry.type, entry.fromSVG,
+						options));
 				if (entry.type === 'color') {
 					var color = item[entry.get]();
 					if (color) {
@@ -15437,12 +16121,12 @@ new function() {
 	}, {}), {
 		id: function(item, value) {
 			definitions[value] = item;
-			if (item.setName)
+			if (item.setName && value !== (+value) + '')
 				item.setName(value);
 		},
 
-		'clip-path': function(item, value) {
-			var clip = getDefinition(value);
+		'clip-path': function(item, value, name, node, styles, options) {
+			var clip = getDefinition(value, options);
 			if (clip) {
 				clip = clip.clone();
 				clip.setClipMask(true);
@@ -15470,6 +16154,28 @@ new function() {
 				item.setVisible(value !== null);
 		},
 
+		'data-paper-blend-mode': function(item, value) {
+			if (item.setBlendMode)
+				item.setBlendMode(value);
+		},
+
+		'font-style': function(item, value) {
+			if (item.setFontWeight && /^(italic|oblique)$/.test(value)) {
+				var weight = ('' + item.getFontWeight())
+						.replace(/\s*\b(italic|oblique)\b/gi, '');
+				item.setFontWeight(/^(normal|400)$/.test(weight) ? value
+						: weight + ' ' + value);
+			}
+		},
+
+		'letter-spacing': function(item, value) {
+			if (item.setTracking) {
+				var amount = parseFloat(value) || 0;
+				item.setTracking(1000 * (/em$/.test(value) ? amount
+						: amount / parseFloat(item.getFontSize())));
+			}
+		},
+
 		'stop-color': function(item, value) {
 			if (item.setColor)
 				item.setColor(value);
@@ -15515,12 +16221,13 @@ new function() {
 	});
 
 	function getAttribute(node, name, styles) {
-		var attr = node.attributes[name],
+		var style = Base.camelize(name),
+			value = node.style && node.style[style];
+		if (!value) {
+			var attr = node.attributes[name];
 			value = attr && attr.value;
-		if (!value && node.style) {
-			var style = Base.camelize(name);
-			value = node.style[style];
-			if (!value && styles.node[style] !== styles.parent[style])
+			if (!value && node.style
+					&& styles.node[style] !== styles.parent[style])
 				value = styles.node[style];
 		}
 		return !value ? undefined
@@ -15528,27 +16235,38 @@ new function() {
 				: value;
 	}
 
-	function applyAttributes(item, node, isRoot) {
+	function applyAttributes(item, node, options, isRoot) {
 		var parent = node.parentNode,
 			styles = {
 				node: DomElement.getStyles(node) || {},
 				parent: !isRoot && !/^defs$/i.test(parent.tagName)
 						&& DomElement.getStyles(parent) || {}
 			};
+		if (isRoot && !styles.node.fill && item.setFillColor)
+			item.setFillColor('black');
 		Base.each(attributes, function(apply, name) {
 			var value = getAttribute(node, name, styles);
 			item = value !== undefined
-					&& apply(item, value, name, node, styles) || item;
+					&& apply(item, value, name, node, styles, options) || item;
 		});
 		return item;
 	}
 
-	function getDefinition(value) {
+	function getDefinitionById(id, options) {
+		if (id && !definitions[id]) {
+			var node = getSandbox().ownerDocument.getElementById(id);
+			if (node)
+				importNode(node, options, false);
+		}
+		return definitions[id];
+	}
+
+	function getDefinition(value, options) {
 		var match = value && value.match(/\((?:["'#]*)([^"')]+)/),
 			name = match && match[1],
-			res = name && definitions[window
+			res = name && getDefinitionById(window
 					? name.replace(window.location.href.split('#')[0] + '#', '')
-					: name];
+					: name, options);
 		if (res && res._scaleToBounds) {
 			res = res.clone();
 			res._scaleToBounds = true;
@@ -15594,12 +16312,12 @@ new function() {
 		var settings = paper.settings,
 			applyMatrix = settings.applyMatrix,
 			insertItems = settings.insertItems,
+			importer = importers[type],
 			item;
 		try {
 			settings.applyMatrix = false;
 			settings.insertItems = false;
 			try {
-				var importer = importers[type];
 				item = importer && importer(node, type, options, isRoot)
 						|| null;
 			} finally {
@@ -15607,8 +16325,8 @@ new function() {
 				settings.applyMatrix = applyMatrix;
 			}
 			if (item) {
-				if (isElement && !(item instanceof Group))
-					item = applyAttributes(item, node, isRoot);
+				if (isElement && importer !== importGroup)
+					item = applyAttributes(item, node, options, isRoot);
 				var onImport = options.onImport,
 					data = isElement && node.getAttribute('data-paper-data');
 				if (onImport)
@@ -15726,14 +16444,13 @@ new function() {
 var paper = new (PaperScope.inject(Base.exports, {
 	Base: Base,
 	Numerical: Numerical,
+	ChangeFlag: ChangeFlag,
 	Key: Key,
 	DomEvent: DomEvent,
 	DomElement: DomElement,
 	document: document,
 	window: window,
-	PlacedSymbol: SymbolItem
-}).inject({
-	enumerable: false,
+	PlacedSymbol: SymbolItem,
 	Symbol: SymbolDefinition
 }))();
 
@@ -15748,4 +16465,4 @@ if (typeof define === 'function' && define.amd) {
 }
 
 return paper;
-}.call(this, typeof self === 'object' ? self : null);
+}(typeof self === 'object' ? self : null);