Fix blurry SVG rendering in Firefox

* use `object` elements instead of `img`s
  to display poster images.
* Current versions of Firefox render very large
  SVG images blurry when they are embedded
  as img elements. Embedding them as objects
  fixes this.

js/editor/index.js

@@ -130,9 +130,9 @@ export function notFound() {
   return h("div", "Unwritten tale…");
 }
 
-function poster(url) {
-  return h("img.poster", {
-    attrs: { src: url },
+function poster(url, type) {
+  return h("object.poster", {
+    attrs: { data: url, type },
   });
 }
 
@@ -239,7 +239,7 @@ let navigator = (tale, transformMatrix, cameraPosition, activeSlide) => {
       },
     },
     [
-      poster(`/editor/${tale.slug}/${tale["file-path"]}`),
+      poster(`/editor/${tale.slug}/${tale["file-path"]}`, tale.fileType),
       layer(
         {
           on: {

js/presenter/index.js

@@ -40,9 +40,10 @@ export let presenter = tale => {
           },
         },
       },
-      h("img", {
+      h("object", {
         attrs: {
-          src: `/editor/${tale.slug}/${tale["file-path"]}`,
+          data: `/editor/${tale.slug}/${tale["file-path"]}`,
+          type: tale.fileType,
         },
       }),
     ),