画像をＳＶＧで書くには

ＳＶＧとは何か
ＳＶＧのインストール
ＳＶＧの書き方

XML宣言
線を引くには
矩形を描くには
円・楕円を描くには
図形の回転、拡大、移動のしかた
文字表示のしかた
フィルタ効果のつけ
HTML文書の中へ表示させる方法

Webページ作成でのグラフィックデータは従来ビットマップデータ（ラスターデータ）でしたが、これをベクターデータでしかもWebブラウザで表示する為の規格ということで W3C によって標準化が進められ、2001年9月5日に勧告「Scalable Vector Graphics (SVG)」発表されたものが SVG です。SVGは XML によって記述されるマークアップ言語でOSのプラットフォームに依存しません。従来印刷物などの校正用データは、メールに添付することが多かったと思いますが、たとえば、イラストレーターのデータは双方のパソコンに入っていなければメールで受け取っても見ることが出来ません。そこで、pdfなどに変換して添付すればイラストレーターが無くとも adobe readerで見ることは出来ます。しかし、PDFを古いイラストレーター（バージョン９以下）などでは、正しく表示されない場合があるのでそのままデータを利用できない事もあります。イラストレーターのデータをラスタライズすれば正確に表現できますが画像データとなるのでファイルサイズも大きくまた、編集するにも一苦労します。svgのデータは、ネットワーク上でのデータのやり取りも画像データと違い、データサイズも小さく（例として下記のサンプル３の画像は4511バイト、これに対しSVGで書いたものはHTMLのヘッダー情報などをあわせても940バイトです）クライアントとの校正や打合せにメールで添付しても従来は何十メガものデータを圧縮したりしていた物が、そのまま添付できるほどコンパクトなデータサイズですから、データ送信のさいにストレスを感じないほどです。なにより SVG はベクトルデータなので拡大縮小しても画質が崩れず、イラストレーター10以降では開いて編集することも出来ます。

また、グラフィックデータをただ表示するだけではなく Adobe 社の Flash （2005年４月19日：アドビシステムズ社がマクロメディア社を買収）のようなアニメーションやフィルターエフェクトなどの効果も表現できます。さきほど「SVGはXMLによって記述されるマークアップ言語」といいましたが、マークアップ言語と言うことはテキストエディタで編集できるのでイラストレータなどのドロー系ソフトがクライアント側に無くともインタネットエクスプローラで表示でき、また、テキストエディタで校正及び編集が出来ると言うことになります。これは更なる仕事の効率アップにつながるのではないでしょうか。

SVG　は従来の Web ページよりも飛躍的に表現力が広がり、複数の XML 文書やアニメーションを定義する XML または、SMIL　や　Mathml　の組み合わせなどにより、より質の高いWeb環境が期待できそうです。

こうして見ると良い事ばかりのようですが、しかし、残念ながら　SVG　の画像は今のところ、そのままではインタネットエクスプローラ（IE6まで）に表示する機能が無いので見ることが出来ません。そこでIE6でSVGを表示するためにSVG Viewerというプラグインソフトをインストールする必要があります。以下にインストール方法及び簡単なsvg画像データの作成方法を紹介いたします。

〔top〕

２．ＳＶＧのインストール

まず、もっとも普及しているといわれているAdobe社のＳＶＧサイトにアクセスし

プルダウンメニューの「サポート」から「ダウンロード」をクリックします

開いたページの下のほうに　ＳＶＧ　Ｖｉｅｗｅｒ　と書いてあるところをクリックします。

ここでは、Ｗｉｎｄｏｗｓ用　Version3.0　（10月8日現在）を選択します。

下のほうに「ビューワ（日本語版）」とありますので、自分のＯＳにあわせてクリックします。

保存しますか？と聞いてくるので、ここでは保存先をデスクトップに新しいフォルダを作り保存することにします。

ダウンロードが開始されます。

デスクトップの新しいフォルダにダウンロードした自己解凍ソフト、SVG View.exe　がありますので、これをダブルクリックします。

このファイルを実行しますか？と聞いてくるので実行をクリックします。

セットアップが開始されます。

SVG　ビューワが正しくインストールされたかどうか確認したい場合は、ダウンロードページのプラグインの動作確認には、ここをクリックのところをクリックしてください

上のように時計が表示されればＯＫです。なお、初めてビューワを起動すると使用許諾契約書が出ますので同意するをクリックしてください。

以上でプラグインの設定は完了です。

〔top〕

３．ＳＶＧの書き方

◆ XML宣言

さて、SVG　が見れるようになったところで早速　SVG　を作ってみましょう。SVG　は　XML　文書や　HTML　と同じマークアップ言語ですからテキストエディタで書くことができます。まず、SVG　は　XML　で記述した画像データなので最初に　XML　宣言をしなければなりません。その後で基本となる以下の要素を指定します。

要素機　能

text 指定した位置にテキストを描画します

line 2点を指定してその間に直線を描画します

rect 始点と縦横の大きさを指定して矩形を描画します。角を丸めることもできます

circle 中心点と半径を指定して円を描画します

ellipse 中心点と縦横それぞれの半径を指定して楕円を描画します

polyline いくつかの点を指定して連続線を描画します

polygon いくつかの点を指定して連続線による閉じた図形を描画します

要素	機　能
text	指定した位置にテキストを描画します
line	2点を指定してその間に直線を描画します
rect	始点と縦横の大きさを指定して矩形を描画します。角を丸めることもできます
circle	中心点と半径を指定して円を描画します
ellipse	中心点と縦横それぞれの半径を指定して楕円を描画します
polyline	いくつかの点を指定して連続線を描画します
polygon	いくつかの点を指定して連続線による閉じた図形を描画します

これらの基本要素に、スタイル属性（style）や変換属性（transform）を加えることでさまざまな形が表現できます。アニメーション属性を加えて図形にアニメーション効果を持たせることもできます。

SVG の書き方

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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"------　②ここから
[
<!ENTITY alphabet "font-family:'Verdana';">　------　③
<!ENTITY nihongo "font-family:'MS Mincho';"> ------　④
<!ENTITY string "fill:black;font-size:25;">　------　⑤

]> ------　②ここまで

①文字コードの encoding 属性は　UTF　を指定してください（ユニコードにしないと日本語が文字化けして表示されませんUTF-8あるいはUTF-16）。
②文字などを表示する場合は実体参照を　DTD　により定義します。
③④⑤よく使うフォントの種類やサイズを実体参照として記述しておきます。
⑥　width=　幅が　400px　で高さ=　height　が300px　の領域が　SVG　のビューポートとして原点を左上に、Ｘ軸を右向きに、Ｙ軸を下向きにとった初期座標系が表示されます。ブラウザで開くと左上が座標（０，０）で横幅が（４００，０）、高さが左上から下に（０，３００）で右下の座標（４００，３００）となりこの領域に表示されます。

〔top〕

◆ 線を引くには

線を引くには　line　要素をつかい始点となるｘ座標とｙ座標を設定し終点となるｘ座標とｙ座標を記述します。 style　属性を指定することで線の色、太さ、線種を定義できます。始点のｘ座標とｙ座標が(３０，３０）で終点のｘ座標とｙ座標が(３５０，３０）の線を引くには

と書きます。
線の色や太さを設定するにはstyleで指定します。stroke:#0000ff で色を青に、stroke-width:5 で線の太さを５ピクセルにするには

と書き、文字コードを UTF-8 あるいは UTF-16 で指定し、ファイル名を「line」拡張子は「.svg」として保存してください。

line.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
 
<line x1="30" y1="30" x2="350" y2="30" 
		style="stroke:#000000;stroke-width:3;" />

<line x1="30" y1="60" x2="350" y2="60" 
		style="stroke:#0000ff;stroke-width:5;" />

</svg>

出来上がったファイルをインターネットエクスプローラにドラックアンドペーストするかマウスの右クリックで「アプリケーションから開く」にし「Internet Explorer」を指定すると、このように表示されます。

adobe SVG Viewerを入れてある方はこちらをどうぞ。ブラウザで表示されます。
（サンプルその１）

〔top〕

◆ 矩形を描くには

四角形を書くには　rect　要素を使います
rect要素は座標軸に平行な矩形を定義する。属性 rx と ry に適切な値を与えて矩形の角を丸めることもできる。

x に横位置を指定しｙに縦位置、width　で幅を height で高さを指定します。黒い四角が表示されました。styleで色や線種などを指定しない場合は、デフォルトの色が黒に設定されます。

rect.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  
<rect x="50" y="50" width="250" height="100" />

</svg>

（サンプルその２）

属性定義値と機能

x 描画領域である座標0,0からのＸ座標

ｙ描画領域である座標0,0からのＹ座標

width 矩形の幅

height 矩形の高さ

rx 矩形の角を丸めるのに用いられる楕円のＸ軸半径の長さ

ry 矩形の角を丸めるのに用いられる楕円のＹ軸半径の長さ


属性定義	値と機能
x	描画領域である座標0,0からのＸ座標
ｙ	描画領域である座標0,0からのＹ座標
width	矩形の幅
height	矩形の高さ
rx	矩形の角を丸めるのに用いられる楕円のＸ軸半径の長さ
ry	矩形の角を丸めるのに用いられる楕円のＹ軸半径の長さ

〔top〕

◆円・楕円を描くには

円は　circle　要素を使い円の中心の座標と半径を設定します。ｃｘで中心点のx座標ｃｙで中心点のｙ座標を定義しｒで半径を指定します

楕円　ellipse　は、円と同じようにｃｘで中心点のx座標ｃｙで中心点のｙ座標を定義しますが半径の指定でrx,ryそれぞれに座標を設定します

circle-ellipse.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
 
<circle cx="100" cy="75" r="50" style="fill:#66ffff;" />

<ellipse cx="300" cy="175" rx="50" ry="30" style="fill:green;" />

</svg>

（サンプルその３）
＊fill プロパティは与えられたグラフィック要素の内部への塗りを定めるもので、塗られる領域は図形の外形線の内側になります。

属性定義値と機能

cx 円・楕円の中心のＸ座標

cｙ円・楕円の中心のＹ座標

r 円の半径

rx 楕円の中心のＸ座標

ry 楕円の中心のＹ座標


属性定義	値と機能
cx	円・楕円の中心のＸ座標
cｙ	円・楕円の中心のＹ座標
r	円の半径
rx	楕円の中心のＸ座標
ry	楕円の中心のＹ座標

〔top〕

◆ 図形の回転、拡大縮小のしかた

各要素に　transform　属性を指定すると拡大、移動、回転などができるようになります。四角形のサンプルその２を色を赤にかえ形を変形してみましょう。

transform　属性を使い変形の種類にscaleを使うことでxが元の0.5倍、ｙが元の1.5になり長方形が正方形、それからstyle設定でfill（塗り）を赤に設定しました。色の指定は、16進数でも可。

transform_rect.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
 
<rect transform="scale(0.5,1.5)" x="50" y="50" 
		width="250" height="100" style="fill:red;" /> 

</svg>

（サンプルその４）

変形の種類にrotateを使うことで長方形が１５度だけ傾きました（３時の方向から時計回り）。

transform_rect-rotate.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
 
<rect transform="rotate(15)" x="50" y="50" 
		width="250" height="100" style="fill:red;" />

</svg>

（サンプルその５）

〔top〕

◆ 文字表示のしかた

文字を表示させるには実体参照を定義しましょう。よく使うフォントの種類や文字色、サイズの定義をしておけばいちいち設定しなくて済みます（３．１のところの③④⑤参照）。フォントの種類には&alphabet;や&nihongo;を定義します。文字の色はstringのfillで設定し、サイズはfont-sizeで設定します。

文字色をオレンジ、フォントの種類をＭＳ明朝、サイズを50にしてみました。（ブラウザに表示されたものが画像ファイルだと思う方は文字をドラックして右クリックでコピーをし、メモ帳などにペーストしてみてください。「おはよう！」とコピーされると思います。）

text.svg

<?xml version="1.0" standalone="no"?>

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

[
<!ENTITY alphabet "font-family:'Verdana';">
<!ENTITY nihongo "font-family:'MS Mincho';">
<!ENTITY string "fill:#ff8c00;font-size:50;">
]>
  
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
 
　<g id="text" style="&string;">
  　<text x="50" y="150" style="&nihongo;">
	　おはよう！　
  　</text> 
  </g>
	
</svg>

（サンプルその６）

〔top〕

◆ フィルタ効果のつけ方

filter 要素はフィルタ効果を適用するキャンバスの領域を定義することができ、ラスターを基調とする原始フィルタにおける中間処理用の連続階調画像の解像度を与えることができる。

属性定義

filterUnits
filterUnits="userSpaceOnUse"の場合、 x, y, width, height は 'filter' 要素が参照された利用座標系における値を表します。
filterUnits="objectBoundingBox" の場合、 x, y, width, height は参照している要素の包含矩形に対する比率又はパーセントを表す。
SourceGraphic は filter 要素への元の入力となるグラフィック要素を表現します。
values の内容は type 属性の値に依存しvalues は5x4行列を構成します。
type = "matrix | saturate | hueRotate | luminanceToAlpha"
行列演算の種類を指示する。キーワード matrix は 5x4 行列の全ての成分に値が与えられることを意味する。他のキーワードはよく用いられる色の演算を完全な行列を指定せずに与えるための便法です。

transfer.svg

<?xml version="1.0" standalone="no"?>

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

[
<!ENTITY alphabet "font-family:'Verdana';">
<!ENTITY nihongo "font-family:'MS Mincho';">
<!ENTITY string "fill:#ff8c00;font-size:50;">
]>
  
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

<title>touhokuzumen-feColorMatrix</title>
　<desc> feColorMatrix の効果を示す５つのテキスト文字列： 
        基準となるフィルタのかかっていないテキスト文字列, 
        feColorMatrix matrix の利用,
        feColorMatrix saturate の利用,
        feColorMatrix hueRotate の利用,
        feColorMatrix luminanceToAlpha の利用。</desc>

  
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="700" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset=".85" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"/>
        <feFuncG type="identity"/>
        <feFuncB type="identity"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
    </filter>
   
    <filter id="Linear" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25"/>
        <feFuncG type="linear" slope=".5" intercept="0"/>
        <feFuncB type="linear" slope=".5" intercept=".5"/>
      </feComponentTransfer>
    </filter>
   
  </defs>
 <rect fill="none" stroke="blue"  
        x="1" y="1" width="798" height="398"/>
  <g font-family="Verdana" font-size="55" 
            font-weight="bold" fill="url(#MyGradient)" >
     <!--<rect x="100" y="0" width="600" height="20" />-->
    <text x="100" y="120">Touhokuzumen.com</text>
   <text x="100" y="230" style="&nihongo;">ようこそ東北図面へ！</text>
</svg>

（サンプルその７）

〔top〕

◆ HTML文書の中へ表示させる方法

表示させる SVG のファイルを HTML の embed 要素でくくり src 属性でファイルを指定します。幅と高さを設定したら pluginstage プロパティで SVG ビューワを指定します。

以上の基本要素と属性などのほかに、アニメーション属性を加えて図形をアニメーションさせることで Flash　のような表現も出来ます。しかし、SVG はビューワやブラウザごとに見え方が異なるので、印刷や Web デザインのように統一された色再現や表示が要求されるものにはまだ SVG の高機能性が十分に活かされていないのが現状です。統一された SVG ビューワなどの開発が期待されます。また、SVG は XML と同じマークアップ言語なのでテキストエディタで作成できますが、複雑な図形などを書く場合は記述が非常に複雑になるため、SVGデータを読み込め編集できる　Illustrator 10 などで編集し XML や html へ書き込む方法がいいと思います。また、LinuxなどのUNIX系のOSを使っている方はInkscapeがおすすめです。インストールはFedoraならyumコマンドにて

# yum install inkscape

するだけです。Inkscapeは多機能で高性能なドローソフトです。inkscapeで作ったイラストをsvgで保存したり、svgデータを開いて編集などが出来ます。また、拡張子を.aiで保存すればIllustratorで開いて編集も可能です。

10月10日の読売新聞の朝刊に「新聞週間特集　IT時代のメディア像、読まれるための挑戦」という記事がありました。世界で同時進行する電子メディアの社会への浸透と活字離れが議題となり、日米英の主要４紙の責任者が一堂に会し、現在新聞が直面している活字離れの問題を話し合うものでした。ザ・タイムズ紙はメディアはこの10年間で今まで200年間におきた変化以上のものを携帯電話やインターネットが成し遂げ読者は常にデジタル媒体を使っているとし、ワシントン･ポスト紙は子供向けのページを別に作ったり若者の活字離れ対策に力を入れている。その他の新聞社もいろいろな方法で読者の囲い込みをおこなっているようです。

2011年、現在のテレビの地上波が完全にデジタル化され停波し、その後ネットとマスメディアの融合が始まると考えられ、201X年以前が紙の文化なら201X年以降はデジタル文化になり、一方通行が双方向になるためマスメディアもインターネットも双方向の蓄積型になるそうです。そうなれば益々インターネットの可能性も広がり xml,svg,Mathml,Voicemlなどが今以上に発揮される日も近いのではないでしょうか。

その一端として SVG は現在、webブラウザの中でしか発揮されていないのですが、改良が進めばテレビなどのメディア関係での可能性も更に広がるかもしれません。また、数式を表示する為のMathmlと共に使えばプレゼンテーションなどで大いに成果が上げられそうです。これからの若い世代は、生まれながらにしてデジタルワールドで生活するため、益々活字ばなれが進み携帯電話が新聞・雑誌・本・テレビ・インターネットと何でもこなすモバイルになることでしょう。私たちデジタル関連の企業もWebベージ作成やコンテンツの作成といろいろな方法でこれからの時代に対処し、XML の可能性をもう一度考えなければならないのかもしれません。最後まで、読んでいただきありがとうございました。SVG Viewer をインストールした方は、こちらもご覧頂ければ幸いです。
（サンプル８）

〔top〕

参考文献

Ｗ３Ｃ　Scalable Vector Graphics (SVG) 1.0 Specification
http://www.w3.org/TR/2001/REC-SVG-20010904/