Adds support for SVG because that's why. Does binary right.

app/assets/javascripts/repo/repo_binary_viewer.vue

@@ -7,7 +7,18 @@ const RepoBinaryViewer = {
 
   computed: {
     pngBlobWithDataURI() {
+      if(this.binaryTypes.png){
         return `data:image/png;base64,${this.blobRaw}`;  
+      }
+      return '';
+      
+    },
+
+    svgBlobWithDataURI() {
+      if(this.binaryTypes.svg){
+        return `data:image/svg+xml;utf8,${this.blobRaw}`;
+      }
+      return '';
     },
   },
 
@@ -20,29 +31,24 @@ const RepoBinaryViewer = {
       Store.binaryLoaded = true;
     },
 
-    isMarkdown() {
-      return this.activeFile.extension === 'md';
-    },
+    getBinaryType() {
+      if(this.binaryTypes.hasOwnProperty(this.activeFile.extension)) {
+        return this.activeFile.extension;
+      }
+      return 'unknown';
+    }
   },
 
   watch: {
     blobRaw() {
-      if (this.isMarkdown()) {
-        this.binaryTypes.markdown = true;
+      Store.resetBinaryTypes();
+      if (RepoHelper.isKindaBinary()) {
         this.activeFile.raw = false;
         // counts as binaryish so we use the binary viewer in this case.
         this.binary = true;
-        return;
       }
       if (!this.binary) return;
-      switch (this.binaryMimeType) {
-        case 'image/png':
-          this.binaryTypes.png = true;
-          break;
-        default:
-          RepoHelper.loadingError();
-          break;
-      }
+      this.binaryTypes[this.getBinaryType()] = true;
     },
   },
 };
@@ -53,6 +59,10 @@ export default RepoBinaryViewer;
 <template>
 <div id="binary-viewer" v-if="binary && !activeFile.raw">
   <img v-show="binaryTypes.png && binaryLoaded" @error="errored" @load="loaded" :src="pngBlobWithDataURI" :alt="activeFile.name"/>
+  <img v-show="binaryTypes.svg" @error="errored" @load="loaded" :src="svgBlobWithDataURI" :alt="activeFile.name"/>
   <div v-if="binaryTypes.markdown" v-html="activeFile.html"></div>
+  <div class="binary-unknown" v-if="binaryTypes.unknown">
+    <span>Binary Unloadable</span>
+  </div>
 </div>
 </template>

app/assets/javascripts/repo/repo_file_buttons.vue

@@ -19,7 +19,7 @@ const RepoFileButtons = {
     },
 
     canPreview() {
-      return this.activeFile.extension === 'md';
+      return Helper.isKindaBinary();
     },
 
     rawFileURL() {

app/assets/javascripts/repo/repo_helper.js

@@ -58,7 +58,7 @@ const RepoHelper = {
 
     file.opened = true;
     file.icon = 'fa-folder-open';
-    RepoHelper.toURL(file.url)
+    RepoHelper.toURL(file.url, file.name)
     return file;
   },
 
@@ -66,6 +66,11 @@ const RepoHelper = {
     return url.replace('blob', 'raw');
   },
 
+  isKindaBinary() {
+    const okExts = ['md', 'svg'];
+    return okExts.indexOf(Store.activeFile.extension) > -1;
+  },
+
   getBlameURLFromBlobURL(url) {
     return url.replace('blob', 'blame');
   },
@@ -269,12 +274,16 @@ const RepoHelper = {
     RepoHelper.key = key;
   },
 
-  toURL(url) {
+  toURL(url, title) {
     const history = window.history;
 
     RepoHelper.key = RepoHelper.genKey();
 
     history.pushState({ key: RepoHelper.key }, '', url);
+
+    if(title) {
+      document.title = `${title} · GitLab`;
+    }
   },
 
   loadingError() {

app/assets/javascripts/repo/repo_store.js

@@ -48,7 +48,9 @@ const RepoStore = {
   scrollWidth: 0,
   binaryTypes: {
     png: false,
-    markdown: false,
+    md: false,
+    svg: false,
+    unknown: false,
   },
   loading: {
     tree: false,
@@ -56,6 +58,13 @@ const RepoStore = {
   },
   readOnly: true,
 
+  resetBinaryTypes() {
+    let s = '';
+    for(s in RepoStore.binaryTypes){
+      RepoStore.binaryTypes[s] = false;
+    }
+  },
+
   // mutations
   checkIsCommitable() {
     RepoStore.service.checkCurrentBranchIsCommitable()
@@ -86,11 +95,12 @@ const RepoStore = {
 
     if (file.binary) {
       RepoStore.blobRaw = file.base64;
+      RepoStore.binaryMimeType = file.mime_type;
     } else {
       RepoStore.blobRaw = file.plain;
     }
 
-    if (!file.loading) RepoHelper.toURL(file.url);
+    if (!file.loading) RepoHelper.toURL(file.url, file.name);
     RepoStore.binary = file.binary;
   },
 

app/assets/stylesheets/pages/repo.scss

@@ -140,15 +140,27 @@
     }
 
     #binary-viewer {
-      height: 70vh;
+      height: 80vh;
       overflow: auto;
-      margin-top: 5px;
-      margin-left: 10px;
+      margin: 0;
 
       .blob-viewer {
         padding-top: 20px;
         padding-left: 20px;
       }
+
+      .binary-unknown {
+        text-align: center;
+        padding-top: 100px;
+        background: #FAFAFA;
+        height: 100%;
+        text-shadow: 0px 7px #DDDDDD, 0 9px #CCCCCC,0 11px #FFF, 0 13px #000;
+        font-size: 17px;
+        font-weight: 900;
+        span {
+          display: block;
+        }
+      }
     }
   }