前回の記事では、SVGのコードを“手書き”して、ブラウザー上に円を表⽰するまでを解説しました。しかし、複雑なベクター画像を作成する場合、コードの手書きは不向きです。例えば、ロゴや地図をSVGで作成するといったシチュエーションも十分に考えられます。こういった複雑なベクター画像はコードを⼿で書くのではなく、オーサリングツールを利⽤するといいでしょう。

代表的なSVGのオーサリングツールとしては、Adobe IllustratorやInkscapeがあります。そこで今回はIllustratorで作成したベクター画像をSVGとして出力し、これをDreamweaverで利用する⽅法を解説します。

SVGとIllustrator

Illustratorなどのベクター画像編集ツールは、アンカーポイントとハンドルを操作することでベクター画像を描画することができます。

さらにIllustratorでは、作成したベクター画像をSVGとして出⼒・保存することができます。その⽅法は2種類あり、1つは[Web およびデバイスように保存...]から“SVGとして出⼒”する⽅法、もう1つは、[別名で保存...]あるいは[複製を保存...]から“SVGとして保存”する⽅法です(ただし、グラデーションメッシュなど、Illustratorの⾼度な機能はSVG上では無効となってしまいます)。

[Web およびデバイスように保存...]から“SVGとして出⼒”する⽅法

[Web およびデバイスように保存...]を選ぶと、出⼒形式からSVGを選択することができます。ただし、この⽅法で出⼒するとレイヤーはまとめられてしまい、後からコードとして編集しづらい状態となってしまいます。

[別名で保存...]あるいは[複製を保存...]から“SVGとして保存”する⽅法

[別名で保存...]あるいは[複製を保存...]を選ぶと、保存形式としてSVGを選択することができます。この方法ではIllustrator上のレイヤーはSVGのg要素(グループ)として出力され、コードとしても編集しやすい状態で保存することができます。

[別名で保存...]からSVGを保存する

上記の理由もあり、ここでは[別名で保存...]でSVGファイルを保存してみましょう。SVGとして保存する手順は、メニューから[ファイル]→[別名で保存]→[ファイルの種類からSVGを選択]→[保存]→[OK]という流れです。

保存したSVGはDreamweaverやその他のテキストエディタでそのまま開くことができます。ここではさらにSVGとHTMLを組み合わせる方法を紹介します。もちろん、前回作成したSVGファイルも、ここでの解説と同様にHTMLと組み合わせて扱うことができます。

HTMLとSVGの組み合わせ方法1:SVGを画像としてHTMLに埋め込む

前回の冒頭で、「SVGは画像である」と紹介しました。SVGはPNGやJPEGと同じように、HTML上に画像として埋め込むことができます。画像の埋め込みには、img要素を用います。例えば、次のように埋め込むことができます(9行目)。

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>HTML+SVG 2</title> 6. </head> 7. <body> 8. <p>HTMLのテキストとSVG画像の埋め込み</p> 9. <img src="logo.svg" alt="PixelGrid" width="340" height="80"> 10. </body> 11. </html>

この方法では、SVGが単一の画像として埋め込まれ、PNGやJPEGの扱いと同様に、リンクやマウスオーバー効果を付与することもできます。一方で、SVG画像は拡大しても劣化しないという特性を持ち、企業ロゴなどの“劣化させたくない画像”への利用に特に向いていると言えるでしょう。

HTMLとSVGの組み合わせ方法2:SVGをドキュメントとしてHTMLに混在させる

HTML5では新しい特徴として、SVGのタグをHTML内に混在させることができるようになります。前回では、SVGは画像でありながらXML言語であり、HTMLとよく似ており、タグにより構成されていると紹介しました。このタグを1つのファイルの中に同時に記述することができるのです。例えば、次のように混在可能です(9〜11行目)。

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>HTML+SVG 1</title> 6. </head> 7. <body> 8. <p>HTMLのテキストとSVG要素の混在</p> 9. <svg width="420" height="200"> 10. <path d="M10,100 c20,-100 180,-100 200,0 c20,100 180,100 200,0" fill="none" stroke="#00CCFF" stroke-width="6"></path> 11. </svg> 12. </body> 13. </html>

「SVGを画像としてHTMLに埋め込む」方法では、SVGは“単一の画像”として埋め込まれました。一方、「SVGをドキュメントとしてHTMLに混在させる」方法は、HTMLのタグと同じようにSVGのタグが1つのHTMLソースの中に存在することになります。そのため、SVGの要素に対してCSSで装飾したり、JavaScriptで動かしたりといったことも可能です。

また、「SVGのa要素」を利用すれば、複雑な形のリンク範囲を設定することもできます。例えば、HTMLに混在させたSVGの要素にリンクを設定するのであれば、次のようなコードで実現可能です(9〜11行目)。SVGのa要素は、「XLink」という仕様のhrefを利用するので、少しだけHTMLのa要素と異なります。

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>SVG のリンク</title> 6. </head> 7. <body> 8. <svg width="300" height="280"> 9. <a xlink:href="http://www.adobe.com/"> 10. <polygon fill="#FFFF33" points="150,25 180,110 270,110 200,165 225,250 150,200 80,250 105,165 30,110 120,110"></polygon> 11. </a> 12. </svg> 13. </body> 14. </html>

上記のコードでは、星の形のリンク範囲が設定されます。

また、HTMLにSVGを混在させた上でJavaScriptで動かすには、次のようなコードで実現可能です(12〜24行目)。

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>JS との組み合わせ</title> 6. </head> 7. <body> 8. <svg width="300" height="200"> 9. <circle cx="0" cy="100" r="50" fill="#00CCCC"></circle> 10. </svg> 11. <button onclick="move()">動かす</button> 12. <script> 13. function move(){ 14. var c = document.querySelector('circle'); 15. var x = 0; 16. (function(){ 17. x += 2; 18. c.setAttribute('cx', x); 19. if(x <= 300){ 20. setTimeout(arguments.callee, 1000/32); 21. } 22. })(); 23. }; 24. </script> 25. </body> 26. </html>

SVGの混在によって、HTMLは新たに「斜め」や「曲線」の表現をすることができるのです。この方法は、地図やスライダーなどのUIパーツ、JavaScriptで自動生成する円グラフ/折れ線グラフなどに向いているといえます。

SVGに対応した環境

最後になりましたが、付録としてSVGに対応しているブラウザーについて以下にまとめます。

 

画像として埋め込み

ドキュメントとして埋め込み
(インラインSVG)

Internet Explorer

9+

9+

Firefox

1.5+

4+

Opera

8+

11.6+

Chrome

1+

7+

Safari

3.0+

5.1+

iOS Safari

3.0+

5.0+

Android

3+

3+

おわりに

SVGはある程度の図形であればタグを手書きやプログラムにより記述することができますが、複雑な図形を描くには、Illustratorなどのツールを利用するといいでしょう。そして、用意したSVGファイルは、画像として利用することもできますし、タグをそのまま利用することもできます。これによりHTMLの表現は拡張されることになります。つまり、CSSやJavaScriptだけでは難しかった表現であっても、ここにSVGが加わることにより可能になるかもしれません。

2回にわたり、SVGの基本を紹介してきました。今後、“HTML5”でのページ構築を行うとき、表現の選択肢の1つとしてSVGを利用してみるのもよいでしょう。ぜひ、今回紹介した内容を応用し、今までになかった表現に挑戦してみてください。

関連記事