（この画像について）

SVG入門

by Akihiko Koga     Ver. 0.80, 12th Aug. 2024 (Update)
9th Aug. 2024 (First)
当サイトは利用状況の分析，サイトの改善のために Google Analyticsを使用しています．
プライバシーポリシーについては，プライバシーポリシーをご参照ください．

計算機（主にソフトウェア）の話題 へ
ホームページトップへ戻る

HTML/SVGの遊び場        
|   |   |  

よくある間違い

HTML 雛型

作成した SVG コードを試すためには，次の 四角内をコピーして， エディタなどで，utf-8 のコードで，拡張子 「.html」で保存し，試したい SVG コードを <body> と </body> の間にペーストして，それを保存して， あなたがお使いのブラウザで表示してください． 

<!doctype html>
<html lang=ja>
  <head>
    <meta http-equiv="content-type" content="text/html: charset=utf8">
    <title> SVG コードの表示</title>
    <style>
    </style>
    <script>
    </script>
  </head>

  <body>

  </body>
</html>

内容

  1. 概略
  2. HTML/SVG のお試し環境の使い方
  3. SVG 始めの一歩
  4. SVGでの図形記述の詳細
  5. foreignObject ... HTML の要素を包み込む
  6. 座標系の変換
  7. Javascript からの利用例例 - 木の描画
  8. 装飾 ... グラディエント, パターン, クリッピング
  9. フィルター
  10. 自動生成の実装の仕方についてのコメント
  11. 参考文献

概略

SVG (Scalable Vector Graphics) は， XMLベースの2次元ベクターイメージ用の画像形式の1つで， HTML で図を記述するのにも使うことができます． SVGの仕様はW3Cによって開発されています． まあ，簡単にいうと，HTML のようにテキストと適当なタグを使って，

これは SVG のサンプルです
こんな感じの図が描けるというものです．ちなみに，この図の SVG コードは 
<svg width=360px height=150px style="background: #ffa;">
    <rect x=50 y=20 width=120 height=40 fill=#f00 />
    <ellipse cx=300 cy=80 rx=60 ry=40 fill=#00f />
    <text x=30 y=100 fill=#080>これは SVG のサンプルです</text>
</svg>
です．rect(angle) （矩形），ellipse （楕円）などの単語が見えますから，なんとなく何が書いてあるかは読めると思います．これを HTML ファイルの中の body タグの中に書くことで，上のような図を表示することができます．

自分のホームページを作成するのに，HTML を（原始的に）直に編集している人は 結構いるのではないかと思いますが（私もそうですが），SVG までは なかなか手がでないという人も多いのではないかと思います（私もそうです）． 図はドキュメントを分かりやすくするので，適切に図を入れることができれば， ホームページの質向上に役立つと思います．それで，ここは，一念発起して 覚えてみようかという気になりました．

ということで，このページは，ほぼ，私が SVG になじんでいきながら， とりあえず，簡単な図は描けるようになって，難しいことはマニュアルなどを 参照すればできるという段階になるという目的でやっているページです．

つまり，私もそれほど詳しくないのですが，まあ，読者にとっても，誰か初心者が何か描けるようになる 過程を見るのは役に立つのではないかと思います．

詳しくないとは言いつつ，今，Javascript も勉強していて，そちらの方で， こういうページに，実際に HTML や CSS のコードを書いて，その場で表示してみると いう技を身に着けましたので，このページもそれを応用して，皆さんも，読んでいきながら，その場で試してみることができるようにしました．

いまは，直接手で SVG コードを書くお話をしていましたが，SVG は手で直接書くという使い方のほかに，プログラムで図を生成するときのターゲット言語として使うという方法があります．そのような応用として，ごく単純な例ですが，このページに リストデータから木を描く機能を設けています． これを最初に使ってみて，出力されたコードがどんなものか見てから，最初に戻って， お試しをしながら，じっくり SVG を勉強するという方法もあります．コードを生成する プログラムを書くにしても，SVG の仕様を知っていないといけないので，どちらにしても 最初からきちんとやっていく必要はあります．

まあ，最初に，木の描画機能を使ってみるにしても，使わないにしても，自分で調べながら書けるようになるまで，短い SVG のコードを試して楽しみながら 学習していきましょう．

目次に戻る

HTML/SVG のお試し環境の使い方

このページでは，実際に SVG を書き， それを表示してみながら勉強しようという方針で書いています． そのためには，SVG のコードを書いて，表示する環境を使うことが必要になります．

このページの右上には，

というボタンが常に同じ位置に表示されているはずです．そのボタンを押すとウィンドウの右下に次のようなダイアログが現れるはずです．

これがそのお試し環境です．下の四角はテキストの入力域になっていて，ここに 入力された HTML/SVG コードが，「適用」ボタンで上の点線の領域に表示されます．

このダイアログはモードレスダイアログですから，表示されていても，このウィンドウの他の部分をマウスで選択することはできます．次のコードをコピー＆ペーストで 入力域に入れて，「適用」を押してみましょう． 

<h2>ようこそ SVG の世界へ</h2>
<h3>ようこそ SVG の世界へ</h3>
<h4>ようこそ SVG の世界へ</h4>
表示は次のようになったはずです．

少しだけ変えて，入力を次のようにしてみましょう． 

<h2 align=center style="background: #f99;">ようこそ SVG の世界へ</h2>
<h3>ようこそ SVG の世界へ</h3>
<h4>ようこそ SVG の世界へ</h4>
こんどは，次のようになっていると思います．

このように，このダイアログは入力域に入力された HTML コードを 上の点線の中に表示します．この例では，普通の HTML の文章を 表示させましたが，SVG も同様に表示できます．でも，もし，あなたが， 普通の HTML も自信がなかったり，あるいは，自信があっても，このように すぐ表示できることが面白と思えば，しばらく，普通の HTML を入力＆表示で 遊んでいると良いと思います．

ダイアログの操作について，少し説明を加えておきます．

ダイアログを消すには，ダイアログの右上の「X」ボタンか，あるいはウィンドウの 右上の「HTML/SVG 遊び場」を押してください．右上の「HTML/SVG 遊び場」は トグルになっていて，表示→非表示→表示と入れ替わります．

次にダイアログの上部に「左上」，「左下」，「右上」，「右下」というボタンがあると 思います．ブラウザのダイアログは，ブラウザのウィンドウからはみ出すことができないので，このお試し環境は，ブラウザのかなりの部分を覆ってしまうと思います． 皆さんはブラウザ上に表示されている文章を読みながら試していると思うので， 重要なところが隠れるのは好ましくない訳です．それで，ダイアログを四隅に移動させるボタンを用意しています．

もしかしたら，皆さんの中には，最近のPCで，画面がとても広く，あまりダイアログが文章を覆ってしまうことを心配しなくて良い人もいるかもしれません．そのような人のために，ダイアログを大きく表示するボタン「大」，もとの大きさに戻すボタン「小」も用意しています．使いやすい方法を模索してみてください．

上のダイアログの画面は，このチュートリアルを書き始めたときの画面です． 場合によっては，ボタンなどが増えている場合もあります．画面ショットは 古いままのものを貼り付けていることもあると思います．画面ショットを 取り直すのは面倒なので，すみませんが，そういう場合はご容赦ください．

目次に戻る

SVG 始めの一歩

SVG の領域作成と矩形の描画

ここでは，まず，SVG がどんなものかを感覚的につかむために，いくつかの 簡単な図形を描く練習をしてみましょう．ここでは，実際にやりながら覚えることを 方針としていますから，ウィンドウの右上の「HTML/SVG 遊び場」のボタンを 押して，実験できる状況を整えてください．

SVG で図形を描くためには，まず，台紙となる SVG の領域を書かなければなりません． それには，例えば 

<svg width=400px height=240px>
</svg>
な風にすればよいのですが，これでは，幅 400px × 高さ 240px の台紙の領域が確保されただけで，色は背景と同じですから，なにも見えません．しばらくは，どこが SVG の領域か 分かった方が良いと思うので，薄い黄色の背景色も付けておきましょう． 
<svg width=400px height=240px style="background: #ffa;">
</svg>
これを入力域に入れて，「適用」ボタンを押すと
このような表示がなされたと思います．この薄い黄色い矩形が SVG の領域です． 薄い黄色の指示は style="background: #ffa;" の部分で，これは CSS の指示です． CSS について詳しくない場合は当面このまま使っていてください．なお，px という単位はブラウザ上の１画素の単位です．他にも pt とか em とかの単位があります．px の場合は省略が可能です．後の方は，私も時々省略していると思います．

また，400px などは，正式にはダブルクォートでくくって "400px" です．これも省略しても認識して くれるみたいです．もしかしたら，ブラウザによったり，認識できないところも あるかもしれないので，うまく行かなかったらダブルクォートでくくるなどの 対応をお願いします．

この <svg> ... </svg> の間の ... の部分に矩形など，図形の記述を することで，この薄黄色の領域に図形が描画されていきます．

では，まず単純な図形として，矩形（長方形）を描いてみます．矩形は英語で rectangle ですので，rect というタグで記述します．次のように入力して「適用」ボタンを押してみましょう． 

<svg width=400px height=240px style="background: #ffa;">
    <rect x=50px y=30px width=100px height=60px />
</svg>
ここで，<rect の最後が /> になっていることに注意してください． SVG では，開きタグと閉じタグを書きます．したがって，正式には 
    <rect x=50px y=30px width=100px height=60px> </rect>
と書かなければなりません．しかし，rect の場合開きタグと閉じタグの間に 書くものはありませんので，いちいち，開き，閉じと書くのは面倒です．こういうときは 開きタグ <rect の後ろを /> と書くことによってタグを閉じることができます．

これを入力して，「適用」ボタンを押したら，薄黄色の領域は次のようになったと思います．

確かに矩形が描かれています．でも，真っ黒ですね．これはデフォルトの筆の色で塗られてしまったわけです．では，この矩形に輪郭を付けてみましょう．次のように入力域に入力して描画してみてください． 
<svg width=400px height=240px style="background: #ffa;">
    <rect x=50px y=30px width=100px height=60px 
     stroke-width=3px stroke=#00f />
</svg>
表示は次のようになったと思います．
stroke-width が線の幅で，stroke が線の色です．

色については，red, blue など予め決まった名前がありますが， #RGB という 形で指定することもできます．R, G, B のところは，赤，緑，青の度合いを 0～f までの 16諧調で表したものです．ここを１６進数二桁にして，0～ff=255 の 256 諧調にすることもできます．red, blue などは読むときは分かりやすいのですが， 私は，どんな色が定義されているかすぐ忘れてしまうので，ここでは，16進数の RGB で記述することが多いと思います．最初は RGB のどんな指定がどんな色になるか 分かりにくいと思いますが，慣れると分かるようになります．RGB のそれぞれの度合いの光を重ね合わせた色を表すと覚えてください．絵具ではなく，光です．絵具では，RGB を混ぜると黒になりますが，光では白になります．このように色を光として重ね合わせる記述体系を加色系の体系と言います． とりあえず，RGB それぞれが，0 か F の場合の８通りの色がどんな色かは表にしておきます．

RGB 各色が 0 か F の時の色の表
No. RGB(16進数) 実際の色 備考
1 #000 　　　　 RGB 全部0 は黒
2 #F00 　　　　 RGB の R で赤
3 #0F0 　　　　 RGB の G で緑
4 #00F 　　　　 RGB の B で青
5 #FF0 　　　　 赤(R) と 緑(G) は黄色
6 #F0F 　　　　 赤(R) と 青(B) は薄紫（ピンクかな？）
7 #0FF 　　　　 緑(G) と 青(B) は空色
8 #FFF 　　　　 赤(R) 緑(G) 青(B) 全部の光で白

この表をしばらく見ていたら，RGB が 0 か F の色はどんな色か，だいたい想像がつくようになると思います．８つあると大変と思うかもしれませんが，当然，#000 は黒で #FFF は白で，RGB のどれか一つだけが，F のものは，その F になっているところの色な訳ですから，実は，二つが F の３つを覚えれば良いだけなんです．

それで，各 RGB が微妙な値の色がどんな色かは，この基本的な場合に帰着させると，なんとなく分かるようになってきます．例えば，#8FF は， #0FF が空色で，さらに赤（R）を足すので，空色が明るくなって，淡い空色になります．

ところで，以上は，RGB の光を足した体系のお話でしたが，それに対して 絵具を混ぜた場合のように，引いていく体系を減色系の体系と言います．

では，矩形の中も，もう少し鮮やかな色で塗ってみましょう． 

<svg width=400px height=240px style="background: #ffa;">
    <rect x=50px y=30px width=100px height=60px 
     stroke-width=3px stroke=#00f fill=#f00 />
</svg>
つぎのように表示されたと思います．
fill が塗る色の指定です．塗らないという指定は，fill を none にすることでできます． 

<svg width=400px height=240px style="background: #ffa;">
    <rect x=50px y=30px width=100px height=60px 
     stroke-width=3px stroke=#00f fill=none />
</svg>

透明の矩形になりました．

また，色には不透明度を指定することができます．それは，fill と stroke それぞれに，fill-opacity と stroke-opacity という 0 （透明）から 1（不透明）の実数値の度合いを指定することでできます． 

<svg width=400px height=200px style="background: #ffa;">

    <rect x=80 y=10 width=30 height=160 stroke-width=1
     stroke=#000 fill=#0f0 />

    <rect x=50px y=30px width=100px height=40px 
     stroke-width=3px stroke=#00f fill=#f00
     fill-opacity=0.3 />

    <rect x=50px y=90px width=100px height=40px 
     stroke-width=3px stroke=#00f fill=#f00 
     fill-opacity=0.8 />
</svg>
ここでは，fill の不透明度だけ 0.3（上） と 0.8（下） に設定しています．

目次に戻る

いろいろな図形の描画

ここまでに，SVG の領域の作り方と矩形の書き方を見てきました．この章の残りでは 矩形のほかのいくつかの図形を描画してみて，SVG でどんな図形が書けるのかの感触をつかむことにしましょう．それぞれの図形については，この後の章で詳しく学習します． 

<svg width=400px height=240px style="background: #ffa;">
    <rect x=50px y=30px width=100px height=60px 
     stroke-width=3px stroke=#00f fill=#f00 />
    <ellipse cx=100px cy=180px rx=60 ry=30
     stroke-width=1px stroke=#000 fill=#0f0 />
    <line x1=100px y1=60px x2=100px y2=180px stroke-width=2px stroke=#000 />
    <text x=160px y=120>お元気ですか？</text>
</svg>
これを「適用」すると次のような表示になります．
お元気ですか？
新たな図形として， だいたい，それぞれの記述の意味は分かると思います．

皆さんの中に，HTML はまったく素人で，ここで SVG の コードの作り方は分かったが，出来たものをどうやって使って よいかわからないという方がいらっしゃっるかもしれません． そういう方は，併せて　HTML も勉強することをお勧めしますが， とりあえず，    を押して，現れたダイアログに書いてある，HTML の雛型を コピーして，エディタなどに貼り付け，utf-8 で，拡張子「.html」で保存します． そして，作成した SVG コードを表示したいときは，その保存した HTML の雛型の <body> と </body> の間にいれて，それを 皆さんがお使いの Web ブラウザで表示してください．これで，作成した SVG のコードが表示できます．

では，この後，SVG で描画できる図形の詳細について勉強していきましょう．

目次に戻る

SVGでの図形記述の詳細

内容

３章の目次に戻る
目次に戻る

foreignObject

SVG は，テキスト系の機能が弱いような気がします．例えば，長いテキストを 幅を指定して，折り返して表示するようなタグがありません．それをやるためには あらかじめ，その幅に収まる長さに文字列を分割して，y座標を変えながら 表示する必要があります．一方，HTML には，div や textarea など，幅を決めればテキストの長さに応じて行を折り返してくれる要素があります．

この機能を利用するためか，SVG には，HTML で表示されるものを取り込む機能として， foreignObject というものがあります．これは， 次のような書式のものです． 

    <foreignObject x=nnn1 y=nnn2 width=nnn3 height=nnn4>
	HTML の要素の記述
    </foreignObject>
指定された矩形領域に指定した HTML 要素を表示してくれます．

試しに，div を使って，長いテキストを SVG で折り返して表示してみましょう． 例えば，次のような HTML の記述を考えます． 

<div style="width:300px;border: 2px solid #000;">
SVG は，テキスト系の機能が弱いような気がします．例えば，長いテキストを 幅を指定して，折り返して表示するようなタグがありません．それをやるためには あらかじめ，その幅に収まる長さに文字列を分割して，y座標を変えながら 表示する必要があります．一方，HTML には，div や textarea など，幅を決めればテキストの長さに応じて行を折り返してくれる要素があります． 
</div>
ブラウザなどによるこの表示は次のようになります．

SVG は，テキスト系の機能が弱いような気がします．例えば，長いテキストを 幅を指定して，折り返して表示するようなタグがありません．それをやるためには あらかじめ，その幅に収まる長さに文字列を分割して，y座標を変えながら 表示する必要があります．一方，HTML には，div や textarea など，幅を決めればテキストの長さに応じて行を折り返してくれる要素があります．

これを foreignObject で包んでみます． 

<svg width=400px height=300 style="background: #ffa;">
<foreignObject x=50 y=10 width=350 height=280>
<div style="width:300px;border: 2px solid #000;">
SVG は，テキスト系の機能が弱いような気がします．例えば，長いテキストを 幅を指定して，折り返して表示するようなタグがありません．それをやるためには あらかじめ，その幅に収まる長さに文字列を分割して，y座標を変えながら 表示する必要があります．一方，HTML には，div や textarea など，幅を決めればテキストの長さに応じて行を折り返してくれる要素があります． 
</div>
</foreignObject>
</svg>
width=400, height=350 の svg の中に，width=35-, height=280 の foreignObject として記述しています．これを表示すると次のようになります．

SVG は，テキスト系の機能が弱いような気がします．例えば，長いテキストを 幅を指定して，折り返して表示するようなタグがありません．それをやるためには あらかじめ，その幅に収まる長さに文字列を分割して，y座標を変えながら 表示する必要があります．一方，HTML には，div や textarea など，幅を決めればテキストの長さに応じて行を折り返してくれる要素があります．

div の中が，svg の中に表示されているのが分かります．

私はこれが推奨される使い方かどうかは自信がないですが，一応， 折り返しなど，SVG のテキスト表示の弱い部分は HTML や CSS の方でカバーして表現することが できそうです．

目次に戻る

座標系の変換

SVG では座標系の変換として

ができます．これらは，それぞれの図形の要素や use の属性として
transform="..."
という形で指定します．それぞれについて書き方と例を示していきます．

変換の対象としての図形は以前 symbol で使った snowman を使います．

snowman はすでに symbol で定義されていますから，use だけで表示できます． 

<svg width=360px height=180px style="background: #ffa;">
  <use xlink:href=#snowman x=10 y=10 />
</svg>

目次に戻る

Javascript からの利用例例 - 木の描画

SVG は直接全部手作業で作成しても良いですが，威力を発揮する使い方として， Javascript などから自動生成する使い方があると思います．

ここでは，そのような手ごろな例として，Javascript のリスト（配列）で 記述した木を SVG に変換する例を紹介します．

仕掛けまで述べると量が嵩張りますので，Javascript のプログラムに入って行くのは 大変なので，ここでは，Javascript のデータからこんなものが生成できるという 例を示すだけにしておきます．プログラマなら「まあ，生成できるよね」と いうことで，自分で作成できるでしょうし，プログラミングを知らない人なら Javascript のプログラムを説明しても分からないでしょうから，ここで， 生成プログラムに入る意味が無いと思うのです．

木を表すJavascript のリストデータを入力して，「生成」を押してください      
フォントサイズ:   箱の背景色： SVG の背景色:
インデント （ x方向の:   y方向:）

SVG による木の表示

生成された SVG コード（HTML に埋め込んでご利用ください）
目次に戻る

装飾

グラディエント（連続的に色を変化させる），パターン（パターンで埋めつくす）， クリッピング（枠の外を消す）があります．

目次に戻る

フィルター

グラフィックスに対する演算を適用することにより，ぼやかしたり，影を付けたり， 光の反射具合を指示することができます．

例をみてみましょう．

SVG Girl SVG Girl

ちょっと，目がちかちかするかもしれません．すみません．

左側は普通にイメージとテキストを表示しているものです．それに対して， 右側はぼやかすフィルターを適用しています．画像だけでなく， テキストにもぼやかすフィルターが適用されていることに注意してください．

次の SVG コードがこの画像のコードです． 

<svg width=400 height=180 style="background-color: #ffb;">

  <filter id=blur1>
    <feGaussianBlur stdDeviation=2 />
  </filter>

  <image xlink:href=pictures/svg-girl07.jpg x=20 y=20 width=100 height=120 />

  <image xlink:href=pictures/svg-girl07.jpg x=220 y=20 width=100 height=120
    filter=url(#blur1) />

    <text x=40 y=165>SVG Girl</text>

    <text x=240 y=165
     filter=url(#blur1)>SVG Girl</text>
</svg>
まず，blur1 という識別子（id）のフィルターを定義しています． この定義は予め SVG に定義されている feGaussianBlur というフィルターの パラメータを設定することによって行っています．このように SVG に 予め定義されているフィルターを原始フィルターと言います．

次に，画像の表示とテキストの表示のときに，この定義されたフィルターを

filter=url(#blur1)
という属性で参照することで，このフィルターを適用しています．

その他の原始フィルターとして，feOffset があります．これは，平行移動するフィルターです．このフィルターを使う時は，フィルター定義の最初に filterUnits=userSpaceOnUse が必要になります．それは，平行移動のフィルターでは，元の図の占める領域の外側に描画がなされるためです．

この SVG コードは次の通りです． 

<svg width=400 height=180 style="background-color: #ffb;">
  <filter id=move1 filterUnits=userSpaceOnUse>
    <feOffset dx=20 dy=10 />
  </filter>

  <image xlink:href=pictures/svg-girl07.jpg x=20 y=20 width=100 height=120 />

  <image xlink:href=pictures/svg-girl07.jpg x=20 y=20 width=100 height=120
    filter=url(#move1) />

</svg>

複数のフィルターを接続することもできます．それには，filter 要素で 接続する要素を複数書きます．それらは，最初に書いてあるほうから適用されていきます．例えば，次のフィルターは，ぼやかしてから移動しています．もとの画像とくみあわせると，面白い効果が得られるでしょう．

Hello World Hello World

この SVG コードは次の通りです． 

<svg width=400 height=80 style="background-color: #ffb;">
  <filter id=blur_and_move1 filterUnits=userSpaceOnUse>
    <feGaussianBlur stdDeviation=2 /> 
    <feOffset dx=20 dy=20 /> 
  </filter>

  <text x=20 y=40 font-size=24px stroke=#f00
    filter=url(#blur_and_move1)>Hello World</text>

  <text x=20 y=40 font-size=24px>Hello World</text>
</svg>

ここでは影を付けるために，１つはぼやかして斜め下に平行移動するフィルターを施した出力，もう一つはそのままの出力の２つを手動で重ねました． これら２つを重ねるフィルターがあれば，この影つけは１つのフィルターで できます．

これは filter の次の３つにより実現できます．

これらを組み合わせることで，入力をぼやかして，右下にずらしてもとの画像（図形）の下に表示する filter を作ってみました．

Hello World

この SVG コードを次に示します． 

<svg width=400 height=240 style="background-color: #ffb;">
  <filter id=blur_and_move2 filterUnits=userSpaceOnUse>
    <feGaussianBlur stdDeviation=2 result=blur2 /> 
    <feOffset dx=20 dy=20 in=blur2 result=kage /> 
    <feMerge>
      <feMergeNode in=kage />
      <feMergeNode in=SourceGraphic />
    </feMerge>
  </filter>

  <text x=20 y=40 font-size=24px stroke=#f00
    filter=url(#blur_and_move2)>Hello World</text>

  <image xlink:href=pictures/svg-girl07.jpg x=120 y=80 width=100 height=120
    filter=url(#blur_and_move2) />
</svg>
フィルターは，この他にもいろいろなことができます．ただ，それらを こと細かく述べることはこのページの入門的な性格を超えてしまうので， ここはこれで終わることにします． ご興味のある方は，ページ末の W3C のドキュメントや， インターネット上の filter についての資料を探してみてください （いや，実は私がついていけてないだけですけど）．

目次に戻る

自動生成の実装の仕方についてのコメント

私が SVG を勉強する動機の一つに，図の自動生成機能を実装する際のターゲット言語としてSVGを使うということがあります．この章は，あとがき的な 性質，雑感的な性質をもったものですが，SVG を直接，人手による描画に使おうという人には役に立たないかもしれませんが，SVG を図の自動生成のターゲット言語に使おうと思う人には役に立つかもしれません．

実は，私は，SVG を勉強するのは初めてではありません．自分の PC の フォルダを探してみると，20216年の春くらいに，個人で使う必要にせまられて， プログラミング言語 Rubyを使って， 

pad("PAD01") {
  s("長さ N の配列 primes[] を用意します")
  loop("i = 1 to N", size(10)) {
    s("primes[i] = 1")
  }
  loop("i = 2 to sqrt(N)") {
    switch {
        s("primes[j] == 1") {
	    loop("j を2から i*j < N の間", size(12)) {
		s("primes[i*j] = 0")
	    }
	}
	s("")
    }
  }
  loop("i = 2 to N") {
    switch {
        s("primes[i] == 1") {
            s("print i")
        }
        s("")
    }
  }
}
のような記述から，次のような SVG コードを生成するツールを作っていました．

長さ N の配列 primes[] を用意します
i = 1 to N
primes[i] = 1
i = 2 to sqrt(N)
j を2から i*j < N の間
primes[i*j] = 0
primes[j] == 1
i = 2 to N
print i
primes[i] == 1

これは，素数を列挙するアルゴリズムを PAD (Problem Analysis Diagram) と呼ばれる 記法で描いたものです． PAD は，フローチャートが往々にしてスパゲティの ような記述になるのに対して，分かりやすい記述を目指した図的な記法として提案されました（PAD については，古いですが，（株）日立製作所による 「プログラムの木構造化図面"PAD」 1980年などを参照してください）．

まあ，ここで PAD のことに深入りする必要はないので，話を SVG に戻すと， 当時は，SVG というものを全く知らなかったので，とにかく，PAD 図が描ける 最小限度のことを勉強して，なんとかやっつけ仕事でやりました． それで， 今回は SVG はある程度きちんと勉強しようと思ったのが，このページをまとめる動機の 一つでした．

それで，「もう一度，多少はしっかり勉強した」結果ですが，SVG はいろいろな図形が描けるわけですから，図描画のプリミティブな 関数から実装するのに比べると，とても楽になるわけですが， 「やはり， SVG はテキスト周りが弱いな」思いました．これは当時も思ったことです．

私は，この章の最初に言ったように，主にフローチャートや PAD (Problem Analysis Diagram) など，テキストが入った図を描くニーズが あるのですが，SVG の描画要素は，テキストの自動的な折り返しや， プロポーショナルフォントで描画したテキストの占める矩形領域情報を取得する手段が用意されていません． これらを自分で作成するのは結構面倒なことです．簡易にやろうと思うとフォントサイズに文字列の長さを掛けるという方法になろうかと思いますが，これだと およその領域しかわからず，箱の中がスカスカになったり，あるいは，窮屈だったり，文字が はみ出したりと見苦しい出力になりがちです．

このようなテキストの折り返しや，そうして描画したものの占める領域の取得は むしろ，HTML + CSS + Javascript の方に機能が備わっています．例えば， <div width=120px></div> のように，width を指定して，そのなかにテキストを流し込めば，そのテキストに色々な装飾を施したとしても，きちんと与えらえた width で折り返しますし，表示した後でしたら，Javascript でそれが占める領域情報を取得できるわけです．その情報を使って，もし，必要なら再度，人間が見て分かりやすい配置にするということもできるでしょう．

このように HTML + CSS + Javascript と SVG を併用する方法として簡単に思いつくものに次のような２つの方法があります．

  1. foreignObject で HTML の要素を SVG に取り込む

  2. 台紙は SVG にして，その上に HTML の要素を描画し，線の描画などは， SVG の台紙の上に Javascript で行う
実は，これは当時も思ったようで，この最初の方法の foreignObject に HTML文書を 取り込むという方法で，上の四角の中のテキストを描画しています．

私は，こういうドキュメントの書式やプログラムに詳しいわけではないので 他の方法もあるかもしれませんが，簡易に自動生成プログラムを作る方法として 上のような方法があることを，自分のメモも兼ねて書いておきます．

まあ，今回の SVG の再勉強でも，テキスト系の処理の仕方については，私の中では， 8年前と同じ方法に落ち着いてしまいましたが，一方，SVG の他の特徴を，以前よりは きちんと学ぶことができたので，図生成のターゲット言語に SVG を使うにしても， 以前より見栄えの良いものを作ることができると思います．これが今回の学習の 成果だったと思います．

目次に戻る

参考文献

目次に戻る

（注）ページトップの挿絵は，perchance.org/ai-girl-image-generator で生成しました． 2024.08.09
計算機（主にソフトウェア）の話題 へ

圏論を勉強しよう へ
束論を勉強しよう へ
半群論を勉強しよう へ
ホームページトップ(Top of My Homepage)