zumen

画像をSVGで書くには

  1. SVGとは何か
  2. SVGのインストール
  3. SVGの書き方

1.SVGとは何か

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

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

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

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

2.SVGのインストール

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

adobe_svg

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

ダウンロード-1

開いたページの下のほうに SVG Viewer と書いてあるところをクリックします。

SVGViewer-2

ここでは、Windows用 Version3.0 (10月8日現在)を選択します。

viewer-windows-1

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

ビューワ日本語版-1

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

保存

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

保存開始

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

インストール開始

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

インストール実行

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

セットアップ

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

動作確認

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

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

要素機 能
text 指定した位置にテキストを描画します
line2点を指定してその間に直線を描画します
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"------ Aここから
[
<!ENTITY alphabet "font-family:'Verdana';"> ------ B
<!ENTITY nihongo "font-family:'MS Mincho';"> ------ C
<!ENTITY string "fill:black;font-size:25;"> ------ D

]> ------ Aここまで

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">

--------------------- Eここに書きます

</svg>

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

線を引くには line 要素をつかい始点となるx座標とy座標を設定し終点となるx座標とy座標を記述します。 style 属性を指定することで線の色、太さ、線種を定義できます。始点のx座標とy座標が(30,30)で終点のx座標とy座標が(350,30)の線を引くには
<line x1="30" y1="30" x2="350" y2="30" />
と書きます。
線の色や太さを設定するにはstyleで指定します。stroke:#0000ff で色を青に、stroke-width:5 で線の太さを5ピクセルにするには
<line x1="60" y1="60" x2="350" y2="60" 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」を指定すると、このように表示されます。
line
adobe SVG Viewerを入れてある方はこちらをどうぞ。ブラウザで表示されます。
サンプルその1

四角形を書くには rect 要素を使います
rect要素は座標軸に平行な矩形を定義する。属性 rx と ry に適切な値を与えて矩形の角を丸めることもできる。
<rect x="50" y="50" width="250" height="100" />
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>
rect
サンプルその2

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



円は circle 要素を使い円の中心の座標と半径を設定します。cxで中心点のx座標cyで中心点のy座標を定義しで半径を指定します
<circle cx="200" cy="150" r="100" style="fill:#66ffff;" />
楕円 ellipse は、円と同じようにcxで中心点のx座標cyで中心点の座標を定義しますが半径の指定でrx,ryそれぞれに座標を設定します
<ellipse cx="300" cy="175" rx="50" ry="30" style="fill:green;" />
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>
rect
サンプルその3
fill プロパティは与えられたグラフィック要素の内部への塗りを定めるもので、塗られる領域は図形の外形線の内側になります。

属性定義値と機能
cx円・ 楕円の中心のX座標
cy円・ 楕円の中心のY座標
r円の半径
rx楕円の中心のX座標
ry楕円の中心のY座標





各要素に transform 属性を指定すると拡大、移動、回転などができるようになります。四角形のサンプルその2を色を赤にかえ形を変形してみましょう。
<rect transform="scale(0.5,1.5)" x="50" y="50" width="250" height="100" style="fill:red;" />
transform 属性を使い変形の種類にscaleを使うことでxが元の0.5倍、yが元の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>
rect
サンプルその4
<rect transform="rotate(15)" x="50" y="50" width="250" height="100" style="fill:red;" />
変形の種類にrotateを使うことで長方形が15度だけ傾きました(3時の方向から時計回り)。
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>
rect
サンプルその5

文字を表示させるには実体参照を定義しましょう。よく使うフォントの種類や文字色、サイズの定義をしておけばいちいち設定しなくて済みます(3.1のところのBCD参照)。フォントの種類には&alphabet;&nihongo;を定義します。文字の色はstringfillで設定し、サイズはfont-sizeで設定します。
<text x="50" y="50" style="&nihongo;"> おはよう! </text />
文字色をオレンジ、フォントの種類をMS明朝、サイズを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>
text
サンプルその6


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

属性定義

  • filterUnits
  • 属性 x, y, width, height に対する座標系を定義します。
  • 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 の効果を示す5つのテキスト文字列: 
        基準となるフィルタのかかっていないテキスト文字列, 
        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>
text
サンプルその7

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

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

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


〔top〕

参考文献

Copyright (c) 2005 logo touhokuzumen.com All rights reserved.