diff --git a/src/acbf/AcbfPage.cpp b/src/acbf/AcbfPage.cpp
--- a/src/acbf/AcbfPage.cpp
+++ b/src/acbf/AcbfPage.cpp
@@ -372,8 +372,13 @@
     for (int i=0; i<d->frames.size(); i++) {
         QStringList framePoints;
         for (int p=0; p< frame(i)->pointCount(); p++) {
-            framePoints.append(QString("%1,%2").arg(frame(i)->point(p).x()).arg(frame(i)->point(p).y()));
+            QString pathType = "L";
+            if (p==0) {
+                pathType = "M";
+            }
+            framePoints.append(QString("%1 %2 %3").arg(pathType).arg(frame(i)->point(p).x()).arg(frame(i)->point(p).y()));
         }
+        framePoints.append(QString("z"));
         frameList.append(framePoints.join(" "));
     }
     return frameList;
@@ -439,8 +444,13 @@
     for (int i=0; i<d->jumps.size(); i++) {
         QStringList points;
         for (int p=0; p< jump(i)->pointCount(); p++) {
-            points.append(QString("%1,%2").arg(jump(i)->point(p).x()).arg(jump(i)->point(p).y()));
+            QString pathType = "L";
+            if (p==0) {
+                pathType = "M";
+            }
+            points.append(QString("%1 %2 %3").arg(pathType).arg(jump(i)->point(p).x()).arg(jump(i)->point(p).y()));
         }
+        points.append(QString("z"));
         jumpList.append(points.join(" "));
     }
     return jumpList;
diff --git a/src/acbf/AcbfTextarea.h b/src/acbf/AcbfTextarea.h
--- a/src/acbf/AcbfTextarea.h
+++ b/src/acbf/AcbfTextarea.h
@@ -43,6 +43,7 @@
     Q_OBJECT
     Q_PROPERTY(QString bgcolor READ bgcolor WRITE setBgcolor NOTIFY bgcolorChanged)
     Q_PROPERTY(int pointCount READ pointCount NOTIFY pointCountChanged)
+    Q_PROPERTY(QString pointSVG READ pointSVG NOTIFY pointCountChanged)
     Q_PROPERTY(QRect bounds READ bounds NOTIFY boundsChanged)
     Q_PROPERTY(int textRotation READ textRotation WRITE setTextRotation NOTIFY textRotationChanged)
     Q_PROPERTY(QString type READ type WRITE setType NOTIFY typeChanged)
@@ -114,6 +115,12 @@
      * @brief fires when the point counts changes.
      */
     Q_SIGNAL void pointCountChanged();
+
+    /**
+     * @brief pointString
+     * @return a string describing the 'd' attribute of an SVG path.
+     */
+    QString pointSVG();
     /**
      * @brief convenience function to get the ractangle of the points.
      * @return the bounds of the frame.
diff --git a/src/acbf/AcbfTextarea.cpp b/src/acbf/AcbfTextarea.cpp
--- a/src/acbf/AcbfTextarea.cpp
+++ b/src/acbf/AcbfTextarea.cpp
@@ -192,6 +192,20 @@
     return d->points.size();
 }
 
+QString Textarea::pointSVG()
+{
+    QStringList points;
+    for (int p=0; p< pointCount(); p++) {
+        QString pathType = "L";
+        if (p==0) {
+            pathType = "M";
+        }
+        points.append(QString("%1 %2 %3").arg(pathType).arg(point(p).x()).arg(point(p).y()));
+    }
+    points.append(QString("z"));
+    return points.join(" ");
+}
+
 QRect Textarea::bounds() const
 {
     // Would use QPolygon here, but that requires including QTGUI.
diff --git a/src/creator/qml/BookPage.qml b/src/creator/qml/BookPage.qml
--- a/src/creator/qml/BookPage.qml
+++ b/src/creator/qml/BookPage.qml
@@ -22,6 +22,7 @@
 import QtQuick 2.2
 
 import org.kde.kirigami 2.1 as Kirigami
+import QtQuick.Shapes 1.12 as Shapes
 /**
  * Page that holds an image to edit the frames on.
  */
@@ -105,20 +106,33 @@
         Repeater {
             model: root.currentPage.framePointStrings
 
+
             Rectangle {
+                x: coverImage.muliplierWidth * root.currentPage.frame(index).bounds.x + coverImage.offsetX;
+                y: coverImage.muliplierHeight * root.currentPage.frame(index).bounds.y + coverImage.offsetY;
                 width: coverImage.muliplierWidth * root.currentPage.frame(index).bounds.width;
                 height: coverImage.muliplierHeight * root.currentPage.frame(index).bounds.height;
-                x: coverImage.muliplierWidth * root.currentPage.frame(index).bounds.x + coverImage.offsetX
-                y: coverImage.muliplierHeight * root.currentPage.frame(index).bounds.y + coverImage.offsetY;
-                border.color: "blue";
                 color: "transparent";
                 opacity: 0.5;
-                border.width: Kirigami.Units.smallSpacing;
-                Rectangle {
-                    anchors.fill: parent;
-                    opacity: 0.4;
-                    color: "blue";
+
+                Shapes.Shape {
+                    transform: Scale{
+                        xScale: coverImage.muliplierWidth;
+                        yScale:coverImage.muliplierHeight;
+                    }
+                    x: -coverImage.muliplierWidth * root.currentPage.frame(index).bounds.x;
+                    y: -coverImage.muliplierHeight * root.currentPage.frame(index).bounds.y;
+
+                    Shapes.ShapePath{
+                        strokeColor: "blue";
+                        fillColor: "#800000FF";
+                        strokeWidth: Kirigami.Units.smallSpacing / coverImage.muliplierWidth;
+                        PathSvg {
+                            path: modelData;
+                        }
+                    }
                 }
+
                 Text {
                     text: index+1;
                     anchors {
@@ -138,14 +152,25 @@
                 height: coverImage.muliplierHeight * root.currentPage.textLayer("").textarea(index).bounds.height;
                 x: coverImage.muliplierWidth * root.currentPage.textLayer("").textarea(index).bounds.x + coverImage.offsetX
                 y: coverImage.muliplierHeight * root.currentPage.textLayer("").textarea(index).bounds.y + coverImage.offsetY;
-                border.color: "red";
                 color: "transparent";
                 opacity: 0.5;
-                border.width: Kirigami.Units.smallSpacing;
-                Rectangle {
-                    anchors.fill: parent;
-                    opacity: 0.4;
-                    color: "red";
+
+                Shapes.Shape {
+                    transform: Scale{
+                        xScale: coverImage.muliplierWidth;
+                        yScale:coverImage.muliplierHeight;
+                    }
+                    x: -coverImage.muliplierWidth * root.currentPage.textLayer("").textarea(index).bounds.x;
+                    y: -coverImage.muliplierHeight * root.currentPage.textLayer("").textarea(index).bounds.y;
+
+                    Shapes.ShapePath{
+                        strokeColor: "red";
+                        fillColor: "#80FF0000";
+                        strokeWidth: Kirigami.Units.smallSpacing / coverImage.muliplierWidth;
+                        PathSvg {
+                            path: root.currentPage.textLayer("").textarea(index).pointSVG;
+                        }
+                    }
                 }
                 Text {
                     text: index+1;
@@ -166,15 +191,27 @@
                 height: coverImage.muliplierHeight * root.currentPage.jump(index).bounds.height;
                 x: coverImage.muliplierWidth * root.currentPage.jump(index).bounds.x + coverImage.offsetX
                 y: coverImage.muliplierHeight * root.currentPage.jump(index).bounds.y + coverImage.offsetY;
-                border.color: "green";
                 color: "transparent";
                 opacity: 0.5;
-                border.width: Kirigami.Units.smallSpacing;
-                Rectangle {
-                    anchors.fill: parent;
-                    opacity: 0.4;
-                    color: "green";
+
+                Shapes.Shape {
+                    transform: Scale{
+                        xScale: coverImage.muliplierWidth;
+                        yScale: coverImage.muliplierHeight;
+                    }
+                    x: -coverImage.muliplierWidth * root.currentPage.jump(index).bounds.x;
+                    y: -coverImage.muliplierHeight * root.currentPage.jump(index).bounds.y;
+
+                    Shapes.ShapePath{
+                        strokeColor: "green";
+                        fillColor: "#8000FF00";
+                        strokeWidth: Kirigami.Units.smallSpacing / coverImage.muliplierWidth;
+                        PathSvg {
+                            path: modelData;
+                        }
+                    }
                 }
+
                 Text {
                     text: index+1;
                     anchors {