SVG 回退指南

有一些来自 Modernizr 的很棒的测试，我们可以看看。您在内联 SVG 中提取到函数的最佳选择是这个

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

这测试了 HTML 解析器（用于解析发送到 innerHTML 的内容）是否可以正确生成 SVG 元素，基本上是通过创建元素，注入 SVG 并测试命名空间。

与<object>一样，不支持<svg>的浏览器会忽略您的 SVG 标记，并将它的内容视为 HTML。但这并不简单。使用<object>，支持对象的浏览器将知道忽略子内容。对于内联 SVG，没有这样的内置回退。但是，您可以使用一些解决方法。

您可以在内联 SVG 代码中包含纯文本，并且任何支持 SVG 的浏览器都会忽略它，因为 SVG 文本必须包含在<text>元素中。您甚至可以在该文本中包含超链接。

<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>

注意事项

• SVG 文本（本演示中的“SVG”一词）成为回退文本的一部分。我们稍后将讨论如何避免这种情况。
• SVG<title>文本不会成为回退文本的一部分。这是因为不支持 SVG 的浏览器将此解释为无效的第二个 HTML 标题元素，并忽略它。

您不能在内联 SVG 中包含任何其他 HTML 内容：当现代浏览器中的 HTML 解析器遇到 HTML 标记时，它会假设您忘记关闭<svg>标记，并为您关闭它。这意味着 (a) 您的 SVG 已损坏，并且 (b) 您的回退文本在现代浏览器中可见。您可以使用链接 (<a>标记) 的唯一原因是，它们在 SVG 中是有效的标记，但不会自行绘制任何内容。

另一种方法是从 HTML 文本开始，并在使用 JavaScript 检测到它支持的情况下将其替换为内联 SVG。想象一下 HTML 中的“喜欢”按钮

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

带有 ♥ 的跨度是那里的回退。数据属性是我们将在回退中使用的属性，在本例中是<svg>/<use>元素。

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();
  }
}

您可以使用 HTML 文本格式标记，而不会破坏 SVG，方法是在 SVG<desc>（描述）标记内包含它，这些标记允许来自其他命名空间的内容。

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

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

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

</svg>

注意事项

• <desc>标记的主要目的是提供替代文本描述。确保标记的内容对屏幕阅读器有意义。
• 为了让<desc>在所有浏览器上被辅助技术识别，它应该位于 SVG 的顶部，紧随<title>之后。
• 您应该还可以使用 SVG<metadata>标记来包含所有类型的任意标记，而不会影响 SVG 或它的替代文本。但是，这在测试过的浏览器中不起作用（它们插入隐式</svg>结束标记）。
• SVG 文本内容仍然包含在回退文本中。

您可以甚至在<desc>中包含带有回退图像的<img>标记，它将在旧浏览器中正确显示，而不会破坏新浏览器中的 SVG。不要这样做！虽然现代浏览器不会显示回退图像，但它们确实会下载它，我们总是试图避免双重下载。

内联<svg>回退的一种可能性是设置一个仅在浏览器不支持内联<svg>时使用的背景图像。因此，使用上面的测试，您可以给自己一个可以使用的类

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

然后假设您正在使用一些像这样的内联 SVG

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

您可以使用该新类在需要时应用背景图像

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

演示

您将必须自己创建 PNG 并调整大小。这里有一篇关于使用 Grunticon 自动执行所有这些操作的CSS-Tricks 的介绍文章。

为了获得最深层的支持，您将<svg>包装在<div>中，并将背景应用于它，因此即使浏览器完全拒绝 SVG 元素，回退仍然可以在已知的<div>元素上工作。

我们在上面的“<image>技巧”部分中介绍了内联回退，但由于这实际上是使用内联 SVG，所以让我们在这里详细介绍。要在 SVG 中获得图像回退，无需额外下载，您需要一种包含图像的方法

• 旧浏览器会将其识别为有效的 HTML
• HTML 5 解析器将在<svg>内允许
• 现代浏览器不会将其解释为要下载的图像。

可能看起来很奇怪，但 SVG<image>元素实现了这个目的。SVG<image>元素用于在 SVG内嵌入其他图像文件。但是，在 HTML 中，每个测试过的浏览器都将<image>识别为<img>的非标准同义词。在 SVG 中，您使用xlink:href属性指定图像文件的 URL。在 HTML 中，您使用src属性指定它。

因此，在大多数浏览器中，在内联 SVG 中包含带有src属性（指向您的回退图像）的<image>标记就足够了：旧浏览器将下载回退，新浏览器不会。除了Internet Explorer，它即使不显示回退图像也会下载它。解决方法是在元素上放置一个空xlink:href属性。IE 开发者工具仍然显示它请求回退，但它几乎立即中止（在 IE11 或 IE10/IE9 模拟模式下 < 1ms），在下载任何内容之前。它看起来像这样

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

现在要解决那个剩余的回退问题：转储到屏幕上的 SVG 文本。它在某种程度上破坏了我们完美的回退图像替换。我们可以使用 CSS 来帮助我们解决这个问题，但这并不直接。我们不能使用简单的svg text { display: none; }，因为这会破坏 SVG 图形。您可以使用检测 JavaScript 来设置类，这些类将根据需要隐藏或显示文本。但即使这样，您也会被 IE8 对无法识别的标记的非标准方法所阻碍：它们始终被视为没有子内容的空 void 标记。如果您想将它们视为可样式化的容器，则需要调整HTML5 Shiv代码以包含所有 SVG 标记。

一个不使用 JavaScript 的选项是将所有 SVG 图形代码（除了回退<image>）包装在<a>元素中。如果没有超链接目标，SVG 中的<a>元素的行为与<g>分组元素完全相同，因此对您的 SVG 代码没有影响。由于 IE8 将<a>识别为有效的容器元素，因此应用于它的任何样式都将应用于它内部的所有文本。

因此，技巧是应用样式以隐藏 HTML 链接的内容，但对 SVG 组没有影响。绝对定位和隐藏溢出可以解决这个问题

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

SVG for Everybody是一个用于内联 SVG 回退的 JavaScript 库。它的方法是从最现代的内联 SVG 开始：通过<use>引用的内联 SVG，指向外部文件中定义的符号。

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

如果支持，它将什么也不做。在 IE 的情况下，它使用 Ajax 请求 spritemap 并注入它，使其在现代 IE 中工作，而通常它无法工作。在不支持 SVG 的浏览器的情况下，它可以帮助您注入 PNG。

它唯一的缺点是它执行的 UA 测试不太准确。您可能最好使用 Ajax 请求 SVG并始终注入它，这将带来良好的支持和浏览器缓存。