ｓｖｇ要素を紹介します。IE8にも対応【HTML5 実践編】

2015 年 3 月 10 日投稿 view: 7572

タグ：

こんにちは、WEBマーケティング部の杉尾です。

今回は、HTML5のsvg要素についてお話しさせていただきます。

SVGとは？

SVGは『マークアップ言語』であり、『スケーラブルなベクター形式』です。

マークアップ言語というのはHTMLのように、文章の構造や装飾に関する指定を文章とともにテキストファイルに記述するための言語です。

一方、スケーラブルというのは、『拡大縮小可能』というような意味です。
ベクター形式なので、拡大や縮小をしても画像が粗くならないということですね。

つまり、SVGはコードであり、画像でもあります。
ソースコードがあり、それによって画像が描かれています。

より具体的に言うと、SVGは「どこからどこへ線を引く」や「どこを中心に円を描く」というような情報の集合体と言うことができます。

どうやって書くのか？

テキストエディタにコードを書きます。
もしくは、ベクター形式のドローイングツール（illastrator、Inkscapeなど）で画像を描き、svg形式でエクスポートします。

何に使える？

実際に使用が考えられるのは以下の３点です。

・アイコン素材
   Webフォントによるアイコンの表示も増えていますが、ちょっとしたアニメーションを加えたいときにはSVGを使うと表現の幅が広がります。
・ロゴデザイン
   拡大しても画像が粗くなりませんので、会社や組織の顔となるロゴ制作には向いています。
・アニメーション
   css3 Javascriptを加えることで様々な表現ができるようになります。

各ブラウザ対応状況

いつものようにCan I useを見に行きます。

svg要素の各ブラウザ対応状況

主要ブラウザの最新バージョンは全て対応済みですね。

当然ですが、IE8は未対応です。
あと、ここには表示ありませんが、気をつけなければならないのはAndroid2.0系も対応していないということですね。

実際に書いてみる

アニメーションとなると、css3やJavascriptの知識が必要となりますので、今回は割愛します。
また、ドローイングツールによる描画も別記事に譲ります。
あくまでHTML5を使って書けるSVGの説明に留めます。

SVGは見た目こそ画像ですが、XMLでコードを書けます。
svg要素を使って、HTML内に埋め込みます。
XMLはHTMLと似ていますが、少し書き方が違うので気をつけましょう。

【追記】 SVGでは単位を省略すると、pxが指定されたものとして扱うことになっています。
他にptやpc,mm,in,ex,em,% を指定することができます。

描画スペース指定

【参考ソース】

header>
    <div class="header">
        <h1>
            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"></svg>
            Scene Live
        </h1>
        <h2>大阪市にあるシステム制作会社</h2>
    </div>
</header>

デモはコチラ

【解説】
まず、svg要素で画像サイズ、26×26ピクセルに指定します。
すると、その分の画像スペースが描画されます。
（この時点では何もない空間があるだけです）

svg要素のxmlns属性はXMLで求められるので、値を『http://www.w3.org/2000/svg』と指定します。
このsvg要素に囲まれた部分を『名前空間』（ネームスペース）といいます。
（※名前空間名はただの文字列であり、どこかへリンクするわけではありません）

円を描く

弊社のロゴをオレンジの円だと仮定して、描画します。

【参考ソース】

<header>
    <div class="header">
        <h1>
            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26">
                <circle cx="13" cy="13" r="13" fill="#EF7B03" stroke="#000000" />
            </svg>
            Scene Live
        </h1>
        <h2>大阪市にあるシステム制作会社</h2>
    </div>
</header>

こんな感じになります。

svg要素を使ったファイルの画像

デモはコチラ

ここで描いたのは円ですが、その属性値であるcxやcy、rは下図のようになります。

※円の中心点をcxとcyで示しています。基準となるのは左上の原点です。rは半径です。

svgで描画した円の説明

IE8対策

IE8以下のブラウザではsvgタグが認識されないため、上記のソースでは描画スペースも表示されません。

いくつか対応させる方法がある中で、最も効率の良い（と思われる）ものを紹介します。
ソースからどうぞ。

※シンプルにするため、上記ソースから余分なものを全て除いています。

【参考ソース】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGで円を描画3</title>
<style>
.c_orange {
    width: 26px;
    height: 26px;
    background: url('circle_or.png');
}
.fallback {
}
</style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
        <style>
            /*<![CDATA[*/
                .fallback { background: none; background-image: none; display: none; }
            /*]]>*/
        </style>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26">
        <switch>
            <circle cx="13" cy="13" r="13" fill="#EF7B03" />
            <foreignObject>
                <div class="c_orange fallback"></div>
            </foreignObject>
        </switch>
    </svg>
</body>
</html>

【解説】
インラインSVGを使う方法です。

IE8で読み込んだとき、svg要素を認識しないので、foreignObject内のdivのみを表示します。
svg要素を認識しないブラウザはsvg内の要素（この場合はdiv）をsvgの外にあるものとみなします。
よって、上のstyleタグ内で指定した通り、divクラスc_orangeについている装飾を表示します。
（circle_or.pngという代替画像をあらかじめサーバーにアップロードしています。）

一方、モダンブラウザで読み込んだときはsvg要素を認識します。
ですので、まず17行目のsvgを読みます。
19行目から21行目の<![CDATA[ ～ ]]>はxml内でstyleを読み込むときに必要なものです。
また問題を起こす可能性を考え、/**/を使ってコメントアウトをしています。
これが認識されるので、foreignObject内のdivは『display: none』で存在が消されます。

24行目、モダンブラウザはsvg要素を認識するので、26行目circleに指定した画像が表示されます。

25行目 switch要素を用いてIE8以下のブラウザで代替画像を表示する指定をしています。
27行目 foreignObjectはsvg以外の要素を表示したいときに使います。