HTML5という言葉と共に注目を集め始めている「SVG」。この記事では2回に渡り、SVGの基本から実際にWebページで利用するにはどうすればいいのかまでを、新たにSVGに対応したDreamweaver CS5.5の機能も交えながら解説します。

SVGとは

HTML5と共に、SVGという技術が一部で注目を集めています。SVG自体は新しい技術というわけではなく、2001年に勧告された古い技術です。しかし、最近になり、Internet Explorer 9によるSVGへの正式対応、iOS環境下でFlashは利用できないがSVGは利用できる、HTML5とSVGの相性がとても良いなど、複数の理由が重なりSVGが再注目されるきっかけとなりました。

SVGは「画像」かつ「マークアップ言語」という、他にはない特徴を持っています。

画像としてのSVG

SVGは「特殊な画像」という特徴を持っています。SVGはただの画像ではなく、ベクター画像であり、JPEGやPNGといったラスター画像とは異なります。ベクター画像とラスター画像の差はそれぞれを拡大したときにわかります。

JPEGやPNGなどのラスター画像はピクセルで構成されているため、拡大すると画質が荒くなります。対して、ベクター画像であるSVGは、座標とそれを結ぶ線で構成されているため、拡大しても画質が変化することはありません。Adobe製品でこの違いを表現すれば、Photoshop(ラスター画像)かIllustrator(ベクター画像)かの違いと理解するといいでしょう。

マークアップ言語としてのSVG

また、SVGは「マークアップ言語」という特徴も持っています。SVGはXML言語であり、HTMLとよく似ています。そのため、SVGは画像であるにもかかわらず、テキストエディタで作成や編集ができるのです。

そしてSVGは、Dreamweaver CS5.5で正式に対応され、CS5.5上で作成・編集や表示のプレビューを行うことができます。さっそくDreamweaver CS5.5を使ってSVGファイルを作成してみましょう。

Dreamweaver CS5.5でSVGファイルを作成する

SVGファイルを作成するには任意のテキストエディタを使えばいいのですが、Dreamweaver CS5.5を使っている場合には、より簡単な操作でSVGファイルを作成することができます。

Dreamweaver CS5.5では、[ファイル]>[新規]>[その他]>[SVG]を選ぶと、SVGファイルのテンプレートとなるソースコードが自動的に用意されます。このときSVGのバージョンは、一般的である「SVG 1.1」を選択しておきましょう。

※Dreamweaver CS5以前やその他のテキストエディタを利用している場合には、次のコードをコピーすることで、この記事と同じ内容を進めることができます。

※SVGはすでに「1.2」というバージョンもありますが、これは機能を絞った仕様であるため、より高度なことを行う場合にはSVG 1.1を選択するのが一般的です。初めてSVG 1.1が勧告されたのは2001年ですが、SVG 1.1 second edition(第二版)として2011年に更新されています。

テンプレートから生成されるソースコード

1. <?xml version="1.0" encoding="UTF-8"?> 2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3. <!--Scalable Vector Graphic--> 4. <svg version="1.1" 5. xmlns="http://www.w3.org/2000/svg" 6. xmlns:xlink="http://www.w3.org/1999/xlink" 7. xmlns:ev="http://www.w3.org/2001/xml-events" 8. baseProfile="full"> 9. </svg>

おそらく多くの読者の方にとって、上記のソースコードはあまり馴染みがないかもしれません。このソースコードはそれぞれ次の意味と働きを持っています。

1. <?xml version="1.0" encoding="UTF-8"?>

SVGはXML言語であるため、XML宣言から開始します。

2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

SVGのDOCTYPE宣言です。バージョンやタグのルールなどが示されています。なお、SVG 1.1のSecond Editionでは不要なので、削除しても問題ありません。

4. <svg version="1.1" 5. xmlns="http://www.w3.org/2000/svg" 6. xmlns:xlink="http://www.w3.org/1999/xlink" 7. xmlns:ev="http://www.w3.org/2001/xml-events" 8. baseProfile="full">

少し長いですが、これらはまとめてsvgの開始タグです。HTMLでいう、<html>と同様の意味を持ちます。3つのxmlns属性が宣言されています。それぞれ、 「xmlns="http://www.w3.org/2000/svg"」はSVGを使うための準備、「xmlns:xlink="http://www.w3.org/1999/xlink"」はHTMLでいうhref属性やsrc属性を利用するための準備、「xmlns:ev="http://www.w3.org/2001/xml-events" 」はHTMLでいうonclick属性などのイベント属性を利用するための準備として覚えておけばいいでしょう。

9. </svg>

svgの閉じタグです。HTMLでいう</html>と同等の意味を持ちます。

そして8行目と9行目の間、つまり<svg>と</svg>の間に様々なSVGのタグを記述し、図形を描画していくことになります。以下は、SVGタグの一部です。詳しくは、W3Cの仕様書Scalable Vector Graphics (SVG) 1.1 (Second Edition)をご覧ください。

SVGの主なタグ

要素名 意味
circle <circle cx="100" cy="100" r="50" fill="red"/>
rect 長方形 <rect x="100" y="100" width="200" height="300" fill="#0F0"/>
path ベジェ曲線 <path d="M100,60 Q120,40 150,60" fill="none" stroke="#000"/>
g グルーピング
(≒レイヤー) <g fill="#0000FF"><rect ***/><circle ***/></g>

描画領域と座標


SVGのタグで図形を配置する前に、SVGの座標の考え方も知っておきましょう。SVGは横軸と縦軸で構成されており、これを図で表すと次のようになります。

そして、この座標上に形/横(X)位置/縦(Y)位置を指定しながらSVGのタグを記述していきます。

図形を配置する

最初のステップとして、円を配置してみましょう。円を描くためには<circle/>タグを利用します。<circle/>タグには、主に次の属性を利用します。

<circle/>タグの主な属性

属性名 意味
cx 円の中心の横方向(X)の位置。cxはcenter x座標の意味
cy 円の中心の縦方向(Y)の位置。cyはcenter y座標の意味
r 円の半径の長さ。rはradiusの意味
fill 塗り色
stroke 枠色
stroke-width 枠幅

上記の属性を利用して、中心の縦位置100、横位置200に半径50の円を描くのであれば、次のように記述します。

1. <?xml version="1.0" encoding="UTF-8"?> 2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3. <!--Scalable Vector Graphic--> 4. <svg version="1.1" 5. xmlns="http://www.w3.org/2000/svg" 6. xmlns:xlink="http://www.w3.org/1999/xlink" 7. xmlns:ev="http://www.w3.org/2001/xml-events" 8. baseProfile="full"> 9. <circle cx="100" cy="200" r="50" fill="#0066FF" stroke="#00AAFF" stroke-width="10"></circle> 10. </svg>

9行目ではfill属性やstroke属性なども併せて記述し、塗り色/枠色/枠幅を指定しています。上記のソースコードにより、表示では次の位置に円が配置されることになります。

なお、Dreamweaver CS5.5では、SVGのタグや属性に対するコードヒント機能が用意されています。

なお、作成したファイルの拡張子は「.svg」または「.xml」としておきます。

結果を表示する

先ほど記述した<circle/>タグの表示結果を確認してみましょう。Dreamweaver CS5.5では、ライブビューを利用してSVGの表示結果を確認することができます。これにより、表示を確認しながらソースコードを調整することができるわけです。

もちろん、SVGはブラウザーでも表示することができます。

もしエラーが表示されてしまう場合には、閉じタグや「”」(ダブルクォーテーション)が噛み合っているかを確認しましょう。SVGはXMLであるため、文法エラーにとても敏感なので、タグの記述時には注意が必要です。

配布サンプルには下記のファイルが含まれています。ブラウザーで確認してみてください。

  • demo.svg:今回紹介した円のサンプル。
  • error.svg:閉じタグを忘れてしまった例。ChromeやFirefoxなどではエラーが表示されます。

おわりに

今回は基本ということで、簡単な図形かつ、単体のSVGファイルというとても簡素な内容を紹介しました。しかし、SVGは複雑な図形を描画する能力を持っています。また、SVGは単体としてだけでなく、HTMLと組み合わせてこそ真価を発揮します。次回は、さらに複雑なSVG画像を扱う方法とSVGをHTMLに埋め込む方法を紹介します。

関連記事