WordPress 中的内联 SVG 后备答案

【问题标题】：Inline SVG fallback in WordPressWordPress 中的内联 SVG 后备
【发布时间】：2016-01-14 00:32:03
【问题描述】：

我正在构建一个带有选项面板的 WordPress 主题。在选项面板中，管理员可以上传一个图标，该图标将出现在页脚中。

上传图标时，管理员会将 SVG 和 PNG 版本上传到媒体上传器（例如 icon.svg 和 icon.png）。

我在前端显示这个图标是这样的：

<nav>
<?php if( have_rows('footer_icons', 'option') ): ?>
    <ul>
    <?php while( have_rows('footer_icons', 'option') ): the_row();
        // Vars
        $icon = get_sub_field('icon');
    ?>
        <li>
            <img src="<?php echo esc_url($icon); ?>" alt="icon" width="60" height="60">
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>
</nav>

如果浏览器不支持 SVG，有没有办法检测和显示内联 png 后备 (icon.png)？我知道 Modernizr 提供 SVG 检测，但我看不出它会提供这种级别的支持。

【问题讨论】：

你试过使用modernizr吗？应该像检查支持和交换 src 属性一样简单。

标签： javascript wordpress svg

【解决方案1】：

我会质疑这是否有必要。全球浏览器对 img 标签中使用 SVG 的支持率超过 96%。来源：http://caniuse.com/#feat=svg-img

如果绝对必要，将 PNG URL 作为数据属性添加到 img 标记，并将源设置为 SVG 文件。如果不支持 SVG 图像，则加载 Modernizr 并使用其特征检测将图像的源替换为 PNG URL。

示例标记（假设 $png_icon 已设置）：

<img src="<?php echo esc_url( $icon ); ?>" data-png-src="<?php echo esc_url( $png_icon ); ?>" alt="icon" width="60" height="60">

进一步阅读：

https://modernizr.com/docs

http://callmenick.com/post/svg-fallback-with-png（示例 #4）

【讨论】：

【解决方案2】：

由于您确实在 <img> 标记中显示 svg，而不是像问题标题所建议的那样内联，因此最简单的方法是使用 onerror 事件处理程序：

<img src="https://dl.dropboxusercontent.com/s/b7qcju9ubmdtigj/ball.svg" 
	onerror="this.src='https://dl.dropboxusercontent.com/s/gd7vo53yfrmaqx4/ball.png'"/>

【讨论】：