Add fallback for the SVG logo

[stapelberg]

Tor browser in high security mode does not render SVGs.

[stapelberg]

The <object>-based technique described at https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-object works with Tor browser, as per pabs.

[stapelberg]

Published a picture-element based fallback at https://people.debian.org/~stapelberg/fallback/i3.1.en.html and asked for feedback.

The picture element downloads precisely the asset(s) which are actually displayed, whereas the object element will download all assets.

[stapelberg]

Unfortunately, Tor browser does not display a fallback in high-security mode when using the picture element. I’d say it should, but I don’t care about this issue enough to follow up with an upstream bug — if you do, please file one.

Marking this as wontfix for now until someone contributes a working fallback mechanism which does not degrade the experience for the majority of our users whose browsers do support SVG.

For the record, this is what I tried (sorry for the reverse diffs):

--- debian-assets/header.tmpl   2017-01-25 08:56:45.339953730 +0100
+++ /tmp/header.tmpl    2017-01-25 08:36:39.576010493 +0100
@@ -29,7 +29,7 @@
 <div id="header">
    <div id="upperheader">
    <div id="logo">
-  <a href="https://www.debian.org/" title="Debian Home"><picture><source type="image/svg+xml" srcset="/openlogo-50.svg"><img src="/openlogo-50.png" alt="Debian" width="50" height="61"></picture></a>
+  <a href="https://www.debian.org/" title="Debian Home"><img src="/openlogo-50.svg" alt="Debian" width="50" height="61"></a>
   </div>
   <p class="section"><a href="/">MANPAGES</a></p>
   <div id="searchbox">
--- debian-assets/style.css 2017-01-25 09:02:12.207687306 +0100
+++ /tmp/style.css  2017-01-25 09:04:37.197798057 +0100
@@ -43,9 +43,11 @@
    height: 100%;
 }

-#logo picture {
+#logo img {
+   margin-top: 5px;
    position: absolute;
    bottom: 0.3em;
+   overflow: auto;
    border: 0;
 }