【SVG入門】SVGでベクターグラフィックス【その２】

こんにちは iijmyaです。

今回も引き続きSVGについてです。

前回、SVGが扱うベクターグラフィックスやビットマップグラフィックスについてお話ししましたが、
(【SVG入門】SVGでベクターグラフィックス【その１】 - シアトルコンサルティング サービス開発ブログ)
今回は実際にSVGを使ってみます。

=============================== 目　次 ===============================

1．ベクターグラフィックスとビットマップグラフィックス(前回)
2．SVGの使用シーン(前回)
3．SVGを使ってみる

====================================================================

3．SVGを使ってみる

SVGは、既にFirefox,Safari,Chromeなどのブラウザがサポートしており、
IEに関してもフィルタやアニメーション,フォント以外ではあるものの、IE9以上がサポートをしています。

SVGをブラウザで表示する場合、外部SVGファイルを読み込む方法と、直接SVGをHTMLに埋め込む方法があります。

(1) 外部SVGファイルを読み込む方法

SVGファイルはAdobeのIllustratorやMicrosoftのOffice Visio、オープンソースソフトのInkscapeなどの画像編集ソフトを利用することによって出力することが出来ます。
ブラウザ上でペイントのように描画してSVGを出力できる「SVG-edit」というのもありました。

■ objectタグを使用する

HTML内にobjectタグを挿入し、type属性に"image/svg+xml"を、data属性に表示したいSVGファイルのURLを指定します。
この方法はSVGをサポートしているブラウザとの互換性も良く、JavaScriptによる制御も可能です。

<object type="image/svg+xml" data="sample.svg"></object>

■ imgタグを使用する

通常の画像と同じくimgタグのsrc属性でSVGファイルを指定することで表示することが出来ます。
ただし、この方法だと最新ブラウザのみでしか動作せず、かつ、JavaScriptによる制御が出来ないデメリットもあります。

<img src="sample.svg">

(2) 直接SVGをHTMLに埋め込む方法

■ svgタグを使用する

HTML5をサポートした最新ブラウザであれば、直接HTMLにSVGを埋め込むことが出来ます。

<svg>
  <!-- 円 -->
  <circle cx="100" cy="100" r="50" fill="#f65" />
  <!-- 四角 -->
  <rect x="120" y="120" width="100" height="100" fill="#56f" />
</svg>

上記コードのように、svgタグの中にcircleタグやrectタグを指定することで、図形を描画することが出来ます。

(3) 応用: JavaScriptを使用してSVGを制御する

これは応用になりますが、SVGに対してJavaScriptを用いて制御を行うことも出来ます。
以下は、図をクリックすると色が変わるサンプルです。

<svg>
  <circle id="circle" cx="100" cy="100" r="50" fill="#f65" />
</svg>

<!-- jQuery使用 -->
<script type="text/javascript">
  !function() {
    $("#circle").on("click", function() {
      $(this).attr("fill", "#56f");
    });
  }();
</script>

いかがでしたでしょうか。
今回は実際にブラウザでSVGを表示する方法について紹介しました。