diff -r 625ac8b8bb87 -r a0caf91c8374 src_js/iconolab-bundle/src/components/editor/Canvas.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Tue Feb 21 15:34:27 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Tue Feb 21 16:04:20 2017 +0100
@@ -98,6 +98,39 @@
                 this.reset();
                 if (!this.annotation) { return; }
                 this.loadAnnotation();
+            },
+            scale: function(scale) {
+                var factor = 0;
+                if (scale > 1) {
+                    factor = scale - 1;
+                }
+
+                var center = this.getCenter();
+
+                var viewBoxW = this.imgMinSize - (this.imgMinSize * factor);
+                var viewBoxH = viewBoxW;
+
+                const viewBoxPrev = this.viewBox.slice();
+                const viewBoxNew = [
+                    center.x - viewBoxW / 2,
+                    center.y - viewBoxH / 2,
+                    viewBoxW,
+                    viewBoxH
+                ];
+
+                this.$refs.rect.hideTooltip();
+                Snap.animate(
+                    viewBoxPrev, viewBoxNew,
+                    (viewBox) => this.paper.attr({ "viewBox": viewBox }),
+                    350, mina.easeinout,
+                    () => {
+                        this.viewBox = viewBoxNew;
+                        this.$refs.rect.showTooltip();
+                        if (scale === 1) {
+                            this.resetZoom();
+                        }
+                    }
+                );
             }
         },
         mounted() {
@@ -202,66 +235,12 @@
             },
 
             zoomIn: function() {
-
-                if ( this.scale === 9) { this.scale--; return; }
-
-                var center = this.getCenter();
-                var scaleFactor = this.zoomFactor * this.scale;
-
-                var viewBoxW = this.imgMinSize - (this.imgMinSize * scaleFactor);
-                var viewBoxH = viewBoxW;
-
-                const viewBoxPrev = this.viewBox.slice(0);
-
-                this.viewBox[0] = center.x - viewBoxW / 2;
-                this.viewBox[1] = center.y - viewBoxH / 2;
-                this.viewBox[2] = viewBoxW;
-                this.viewBox[3] = viewBoxH;
-
-                this.scale++;
-
-                // this.paper.attr({ "viewBox": this.viewBox });
-
-                this.$refs.rect.hideTooltip();
-                Snap.animate(
-                    viewBoxPrev, this.viewBox,
-                    (viewBox) => this.paper.attr({ "viewBox": viewBox }),
-                    300, mina.easeinout,
-                    () => this.$refs.rect.showTooltip()
-                );
+                this.scale = this.scale + (1 * this.zoomFactor);
             },
 
             zoomOut: function() {
-
-                if (this.scale === 1) { this.resetZoom(); return; }
-
-                var center = this.getCenter();
-                var scaleFactor = this.zoomFactor * (this.scale - 1);
-
-                var viewBoxW = this.imgMinSize - (this.imgMinSize * scaleFactor);
-                var viewBoxH = viewBoxW;
-
-                var topX = center.x - viewBoxW / 2;
-                var topY = center.y - viewBoxH / 2;
-
-                const viewBoxPrev = this.viewBox.slice(0);
-
-                this.viewBox[0] = topX; //deal with X and Y
-                this.viewBox[1] = topY;
-                this.viewBox[2] = viewBoxW;
-                this.viewBox[3] = viewBoxH;
-
-                this.scale--;
-
-                // this.paper.attr({ "viewBox": this.viewBox });
-
-                this.$refs.rect.hideTooltip();
-                Snap.animate(
-                    viewBoxPrev, this.viewBox,
-                    (viewBox) => this.paper.attr({ "viewBox": viewBox }),
-                    300, mina.easeinout,
-                    () => this.$refs.rect.showTooltip()
-                );
+                if (this.scale === 1) { return; }
+                this.scale = this.scale - (1 * this.zoomFactor);
             },
 
             zoomOffset: function() {