WordPress Shortcode を SVG Fallbacks で試します

WordPress の記事投稿では、実行を目的とした PHP プログラムコードを含めるために、Shortcode API が用意されています。

この WordPress の short API を試してみるのとあわせて、SVG Fallbacks も試してみたいと思います。

少し古いバージョンのブラウザでは、SVG に対応しないものがあります。このようなブラウザでは、PNG や JPEG などの代替画像イメージを表示させる方法がとられることがあります。これが SVG Fallbacks の代表例のひとつです。

様々な方法が発見されたり、開発されていますが、インライン SVG を利用した方法のひとつに、次のような記述方法があります。

<svg width="320" height="320">
<image xlink:href="a.svg" 
src="a.png" width="320" height="320" />
</svg>

SVG 対応ブラウザでは、xlink:href の SVG ファイルの内容が表示されますが、対応していないブラウザでは、SVG の記述は無視され、image 要素は img タグと解釈されて src の PNG ファイルが表示されます。

だだし、この方法は、SVG に対応している IE9、10、11 で、xlink:href の SVG ファイルと src の PNG ファイルの両方が取り込まれることがわかっています。

この点をふまえて、PHP での IE バージョン判定をもとに、SVG Fallbacks コードを WordPress Shortcode から出力して試してみます。

テーマのための関数（functions.php）に書き加えます。

function get_svg_fallbacks( $atts ) {

  $uah = "";
  if ( isset( $_SERVER["HTTP_USER_AGENT"] ) ):
    $uah = $_SERVER["HTTP_USER_AGENT"];
  endif;

  if(preg_match("/MSIE [5678]/",$uah)):
    $outputhtml =
  '<img width="' . $atts['width']
  . '" height="' . $atts['height']
  . '" src="' . $atts['imgsrc']
  . '" />';
  elseif(preg_match("/Trident\/[567]/",$uah)):
    $outputhtml =
  '<svg width="' . $atts['width']
  . '" height="' . $atts['height']
  . '">'
  . '<image width="' . $atts['width']
  . '" height="' . $atts['height']
  . '" xlink:href="' . $atts['svgsrc']
  . '" />'
  . '</svg>';
  else:
    $outputhtml =
  '<svg width="' . $atts['width']
  . '" height="' . $atts['height']
  . '">'
  . '<image width="' . $atts['width']
  . '" height="' . $atts['height']
  . '" xlink:href="' . $atts['svgsrc']
  . '" src="' . $atts['imgsrc']
  . '" />'
  . '</svg>';
  endif;
  return $outputhtml;
}

add_shortcode('svg_fallbacks',
 'get_svg_fallbacks');

WordPress の投稿記事中に使用します。

[svg_fallbacks
 width="320"
 height="320"
 svgsrc="a.svg"
 imgsrc="a.png"]

表示例です。http://appw.jp/2014/?p=47