SVG Fallbacks Guide

Es gibt einige großartige Tests von Modernizr, die wir uns ansehen können. Ihre beste Wahl für Inline-SVG, extrahiert in eine Funktion, ist diese:

function supportsSvg() {
  var div = document.createElement('div');
  div.innerHTML = '<svg/>';
  return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
};

Dies testet, ob der HTML-Parser (der zum Parsen von an innerHTML gesendeten Inhalten verwendet wird) korrekt ein SVG-Element generieren kann, indem er im Grunde ein Element erstellt, SVG injiziert und den Namespace testet.

Wie bei <object> wird ein Browser, der <svg> nicht erkennt, einfach Ihr SVG-Markup ignorieren und dessen Inhalt als HTML behandeln. Aber so einfach ist das nicht. Bei <object> wissen Browser, die das Objekt *unterstützen*, dass sie den Kindinhalt ignorieren sollen. Bei Inline-SVG gibt es keine solche integrierte Fallback-Lösung. Es gibt jedoch ein paar Workarounds, die Sie verwenden können.

Sie *können* reinen Text in Ihren Inline-SVG-Code einfügen, und er wird von jedem Browser, der SVG unterstützt, ignoriert, da SVG-Text in einem <text>-Element enthalten sein muss. Sie können sogar Hyperlinks innerhalb dieses Textes einfügen.

<svg viewBox="-20 -20 40 40">

  <!--Text Fallback-->
  I'm sorry, your browser does not support

  <circle fill="limegreen" r="19" />
  <path stroke="forestgreen" fill="none" stroke-width="6"
        d="M-12,3 L-3,10 11,-12" />
  <text dy="0.35em" text-anchor="middle" font-weight="bold"
        font-size="18px" font-family="sans-serif"
        fill="indigo">SVG</text>

  <!--Fallback with links-->
  Please upgrade to a <a href="http://browsehappy.com/?locale=en">modern browser</a>.

</svg>

Zu beachtende Punkte

• Der SVG-Text (das Wort "SVG" in dieser Demo) wird Teil des Fallback-Textes. Wir werden gleich besprechen, wie man das vermeidet.
• Der SVG-<title>-Text wird nicht Teil des Fallback-Textes. Das liegt daran, dass Browser ohne SVG dies als ungültiges zweites HTML-Titels-Element interpretieren und es ignorieren.

Sie können keine anderen HTML-Inhalte innerhalb von Inline-SVG einfügen: Wenn der HTML-Parser in einem modernen Browser auf ein HTML-Tag stößt, geht er davon aus, dass Sie vergessen haben, Ihr <svg>-Tag zu schließen, und schließt es für Sie. Das bedeutet, (a) Ihr SVG ist beschädigt und (b) Ihr Fallback-Text ist in modernen Browsern sichtbar. Der einzige Grund, warum Sie Links (<a>-Tags) verwenden können, ist, dass sie gültige Tags in SVG sind, aber nichts selbst zeichnen.

Ein weiterer Ansatz hier wäre, mit HTML-Text zu beginnen und diesen durch Inline-SVG zu ersetzen, sobald Sie mit JavaScript erkennen, dass er unterstützt wird. Stellen Sie sich einen "Like"-Button in HTML vor:

<button aria-label="Like">
  <span class="inline-svg" data-xlink="#icon-heart">♥</span> Like
</button>

Der Span mit dem ♥ ist dort der Fallback. Das data-Attribut ist das, was wir für einen Fallback verwenden werden, in diesem Fall ein <svg>/<use>-Element.

if (supportsSvg()) { // see test above
  var inlineSvgs = document.querySelectorAll('span.inline-svg');

  for(i = 0; i < inlineSvgs.length; i++) {
    var span = inlineSvgs[i];
    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var svg = document.createElementNS(svgns, "svg");
    var use = document.createElementNS(svgns, "use");

    // Prepare the <use> element
    use.setAttributeNS(xlinkns, 'xlink:href', span.getAttribute('data-xlink') );

    // Append it
    svg.appendChild(use);

    // Prepare the SVG
    svg.setAttribute('class', "inline-svg");

    // Set a title if necessary.
    if (span.getAttribute('title')) {
      svg.setAttribute('title', span.getAttribute('title'));
    }

    // Inject the SVG
    span.parentNode.insertBefore(svg, span);

    // Remove fallback
    span.remove();
  }
}

Sie *können* HTML-Textformatierungsmarkups verwenden, ohne das SVG zu ruinieren, indem Sie sie innerhalb von SVG-<desc> (Description)-Tags einfügen, die Inhalte aus anderen Namespaces zulassen.

<svg viewBox="-20 -20 40 40">

  <desc>
    <p class="warning">
        Fallback text.
    </p>
  </desc>

  <!-- ... SVG content ... -->

</svg>

Zu beachtende Punkte

• Der Hauptzweck des <desc>-Tags ist die Bereitstellung einer alternativen Textbeschreibung. Stellen Sie sicher, dass der Inhalt des Tags für einen Screenreader sinnvoll ist.
• Damit <desc> von Barrierefreiheits-Technologien in allen Browsern erkannt wird, sollte es am Anfang des SVG stehen, direkt nach dem <title>.
• Sie *sollten* auch ein SVG-<metadata>-Tag verwenden können, um beliebige beliebige Markup-Elemente einzufügen, ohne das SVG oder seinen Alternativtext zu beeinträchtigen. Dies funktioniert jedoch nicht in den getesteten Browsern (sie fügen implizite </svg>-End-Tags ein).
• Der SVG-Textinhalt wird immer noch in den Fallback-Text aufgenommen.

Sie *könnten* sogar ein <img>-Tag mit einem Fallback-Bild innerhalb des <desc> einfügen, und es würde in den alten Browsern korrekt angezeigt, ohne Ihr SVG in den neuen Browsern zu beeinträchtigen. **Tun Sie das nicht!** Obwohl moderne Browser das Fallback-Bild nicht *anzeigen*, laden sie es *herunter*, und wir versuchen immer, doppelte Downloads zu vermeiden.

Eine Möglichkeit für einen Inline-<svg>-Fallback ist das Setzen eines Hintergrundbildes, das nur verwendet wird, wenn der Browser Inline-<svg> nicht unterstützt. Verwenden Sie also den obigen Test, um sich eine Klasse für die Arbeit zu geben:

if (!supportsSvg()) {
  document.documentElemement.classList.add("no-svg");
  <em>// or even .className += " no-svg"; for deeper support</em>
}

Sagen wir, Sie verwenden Inline-SVG wie diese:

<button>
  <svg class="icon icon-key">
    <use xlink:href="#icon-key"></use>
  </svg>
  Sign In
</button>

Sie könnten diese neue Klasse verwenden, um bei Bedarf ein Hintergrundbild anzuwenden:

html.no-svg .icon-key {
  background: url(fallback-key.png) no-repeat;
}

Demo

Sie müssen das PNG selbst erstellen und dimensionieren. Hier gibt es einen Leitfaden auf CSS-Tricks zur Verwendung von Grunticon, um all dies zu automatisieren.

Für die tiefste mögliche Unterstützung würden Sie den <svg> in einen <div> einwickeln und den Hintergrund darauf anwenden, so dass auch wenn der Browser das SVG-Element vollständig ablehnt, der Fallback auf dem bekannten <div>-Element weiterhin funktioniert.

Dies haben wir oben im Abschnitt "Der <image>-Trick" für Inline-<img>-Fallbacks behandelt, aber da dies wirklich Inline-SVG verwendet, behandeln wir es hier detaillierter. Um ein Bild-Fallback in SVG ohne zusätzliche Downloads zu erhalten, benötigen Sie eine Möglichkeit, ein Bild einzufügen:

• Das alte Browser als gültiges HTML erkennen
• Das der HTML5-Parser innerhalb von <svg> zulässt
• Das moderne Browser *nicht* als herunterzuladendes Bild interpretieren.

So seltsam es auch erscheinen mag, das SVG-<image>-Element erfüllt diesen Zweck. Das SVG-<image>-Element wird verwendet, um andere Bilddateien *innerhalb* von SVG einzubetten. Innerhalb von HTML erkennt jedoch jeder getestete Browser <image> als nicht standardmäßiges Synonym für <img>. In SVG geben Sie die URL der Bilddatei mit dem Attribut xlink:href an. In HTML geben Sie sie mit dem Attribut src an.

In den meisten Browsern reicht es daher aus, ein <image>-Tag mit einem src-Attribut (das auf Ihr Fallback-Bild zeigt) innerhalb Ihres Inline-SVG einzufügen: Die alten Browser laden das Fallback herunter, die neuen Browser nicht. *Außer* bei Internet Explorer, der das Fallback-Bild auch dann herunterlädt, wenn er es nicht anzeigt. Die Lösung besteht darin, dem Element ein leeres xlink:href-Attribut zu geben. Die IE-Entwicklertools zeigen immer noch an, dass es das Fallback *anfordert*, aber es wird fast sofort abgebrochen (<1ms im IE11 oder im Emulationsmodus IE10/IE9), bevor etwas heruntergeladen wird. Es sieht so aus:

<svg viewBox="-20 -20 40 40">
  <!-- SVG code snipped -->
  <image src="fallback.png" xlink:href="" />
</svg>

Nun zur Lösung des letzten Fallback-Problems: des Textes aus dem SVG, der auf den Bildschirm ausgegeben wird. Das ruiniert unsere perfekte Bild-Fallback-Ersetzung irgendwie. Wir können CSS verwenden, um das zu beheben, aber es ist nicht einfach. Wir können kein einfaches svg text { display: none; } verwenden, weil das die SVG-Grafik ruinieren würde. Sie könnten die Erkennungs-JavaScript verwenden, um Klassen zu setzen, die den Text entsprechend ein- oder ausblenden. Aber selbst dann werden Sie durch IE8s nicht standardmäßige Herangehensweise an nicht erkannte Tags ausgebremst: Sie werden immer als leere Void-Tags ohne Kindinhalt behandelt. Sie müssen den Code HTML5 Shiv anpassen, um alle SVG-Tags einzuschließen, wenn Sie sie als stilbare Container behandeln möchten.

Eine JavaScript-freie Option ist, Ihren gesamten SVG-Grafikcode (außer dem Fallback-<image>) in ein <a>-Element zu verpacken. Ohne Hyperlink-Ziel verhält sich ein <a>-Element in SVG genau wie ein <g>-Gruppierungselement, sodass Ihr SVG-Code keinen Schaden nimmt. Und da IE8 <a> als gültiges Containerelement erkennt, werden alle darauf angewendeten Stile auf den gesamten Text darin angewendet.

Der Trick besteht also darin, Stile anzuwenden, die den Inhalt eines HTML-Links ausblenden, aber keine Auswirkung auf eine SVG-Gruppe haben. Absolute Positionierung und überlaufende Elemente machen den Trick:

.hide-on-fallback {
  display: block;
  position: absolute;
  left: -100%;
  height: 0;
  width: 0;
  overflow: hidden;
}

SVG for Everybody ist ebenfalls eine JavaScript-Bibliothek für Inline-SVG-Fallbacks. Ihr Ansatz ist es, mit dem modernstmöglichen Inline-SVG zu beginnen: Inline-SVG, das über <use> referenziert wird und auf Symbole verweist, die in einer externen Datei definiert sind.

<svg role="img" title="CodePen">
  <use xlink:href="spritemap.svg#codepen"></use>
</svg>

Wenn dies unterstützt wird, tut es nichts. Im Fall von IE lädt es die Spritemap per Ajax nach und fügt sie ein, wodurch sie im modernen IE funktioniert, wo dies normalerweise nicht funktioniert. Im Fall von nicht-SVG-unterstützenden Browsern hilft es Ihnen, ein PNG einzufügen.

Der einzige Nachteil ist, dass der UA-Test, den es durchführt, nicht sehr genau ist. Sie können wahrscheinlich besser das SVG per Ajax abrufen und es ständig einfügen, was für gute Unterstützung und Browser-Caching sorgt.