HTML5でのSVGファイル操作のおさらい

最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した800×600や1024×740といった大きめな画像でも、Retina端末で見るとぼやけてしまうという状況になったのが原因かもしれない。この状況でRetinaディスプレイでも綺麗に見れる高精細な画像を提供しようとすると、今度はファイルサイズが肥大化して、トラフィック側に悪影響が出るというジレンマに悩まされる。それらを解決すべく利用が進んだのがSVG形式のベクター画像だ。
数年前、SVGGirlとかいうコンテンツが流行っていた時は、まだSVG形式のファイルを利用できるブラウザが少なかったんだが、今どきのモダンブラウザは普通の画像ファイルと同じ感じに簡単に取り扱えるようになった。
今後、SVGファイルの取り扱いが増えそうな感じがするので、ここでおさらいしておこうかと思った次第。

SVG形式のファイルをHTMLで表示する方法

  • <IMG> を使う ─ HTMLのIMGタグにSVGファイルを直接指定するやり方。

  • CSSを使う ─ CSSのbackground-imageプロパティで背景画像として指定するやり方。

  • <SVG> タグを使う ─ HTML内に(インラインで)直接SVGタグでベクターパスを指定して描画するやり方。

  • <OBJECT> タグを使う ─ HTMLのOBJECTタグでSVGファイルを埋め込むやり方。

どの表示方法も現在のモダンブラウザで利用可能なので、表示するだけなら、お手軽にIMGタグやCSSを使うのがベストだろう。ただ、マウスオーバー時やクリック時にイベントを拾ってSVG形式のスタイルを変更したい場合などは、各ブラウザで挙動が異なる。

SVG形式ファイルの各ブラウザの対応状況

ブラウザ Chrome Safari Firefox Opera IE11
1. <IMG> で表示
2. CSSで表示(読込み型)
3. CSSで表示(インラインスタイル)
4. インライン<SVG> で表示
5. インライン<SVG> + JavaScript操作
6. <OBJECT> で表示
7. JavaScript埋込型SVG + <OBJECT> × × ×

IMGタグやCSSで表示してしまうと、表示されたSVG形式ファイルに対してJavaScript等で一切操作ができないので、インラインSVGタグとして埋め込むか、イベントハンドラ処理のJavaScriptをSVG(XML文書)内に直接埋め込んだSVGファイルをOBJECTタグで埋め込むかの二択になる。しかし、JavaScript埋め込み型SVGファイルのOBJECTタグでのイベント発動に対応しているのは現時点でChromeとSafariのWebkit系ブラウザだけなので、クロスブラウジングを考えるのならインラインSVGタグ+JavaScriptというセットが無難である。しかし、オレとしては、インラインSVGタグはHTMLの可読性が著しく下がるので避けたいところなんだが…今のところどうにもならない。

ちなみに、JavaScriptでSVGファイルのスタイルを変更する例を下記に紹介しておく。下記、128×128と256×256のサイズのSVG画像はマウスを上に乗せると色が変わるようなJavaScriptを書いてある。

<IMG>
(16×16)
<IMG>
(32×32)
inline style
(64×64)
<SVG>
(128×128)
<OBJECT>
(256×256)

上記の例のソース部は、

SVGファイル内に画像自体のイベントは全て埋め込んでおいて、HTML側ではOBJECTタグで呼び出すだけでその画像に対してのイベントは考えなくていいという、今どきで言うと「Web Components」的なやり方がすごく気に入っているので、ぜひ他のブラウザもこのやり方ができるようにしてもらいたいものだ。

Currently comments (2)

  1. こんにちは。
    今SVGについて調べていて、こちらの記事にたどり着きました。
    とても参考になります。ありがとうございます。

    ところで、インラインSVGの画像表示だけ、自分の環境では見えない状態でした。
    使ったブラウザは、投稿時点のChrome最新版です。

    生成されたソースを見たところ、
    <svg〜略>

    <polygon〜略>
    <path〜略>
    <polygon〜略>

    という構成になっていて、の中に要素が入って無いから表示されないのかなと思い、
    試しにsvgの中に入れなおしたら、本来の大きさに沿った感じの画像が表示されました。
    ただイベント周りは動きませんでした。

    1. コメントありがとうございます。
      久しぶりに見たら、私のブラウザでも<svg>タグのバージョンだけ見えなくなっていました。このサイトの他のプラグインの影響か何かで、いつの間にか、<svg>タグ内の xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" の属性値が除去されてしまったのが原因と思われます。もう一度、上記の属性を付与して見たのですが、WordPress側なのかプラグインなのかに該当属性のみ消されてしまい、うまくいかなかったです…orz

      <svg>タグを直接書く場合は、xmlの名前空間の属性値が必須になるので、これが削除されてしまうような環境では、ブラウザ側への表示ができないというようです。私も勉強になりました(笑)

Leave a Reply

Your email address will not be published.