Windows Info 第508回

Scalable Vector Graphics(SVG)そもそも何なのか？

　SVG、Scalable Vector Graphicsは、主に2次元ベクター描画に使われる画像出力形式（ファイル形式）である。XMLベースであり、人間が読むことも可能で、ソフトウェアからの図形出力として使われることが多い。

　今でもCopilotなどは、ベクトル図形出力としてSVGを使う。このほか、Web上の図形描画出力などでもSVGが使われることが多い。今回は、このSVGを簡単に解説する。

　ちなみに「ベクトル図形」とは、開始点、終了点の座標を使って線分を表示する形式の図形を意味する。これに対して、いわゆるビットマップ図形は、横方向のスキャンライン上の点をオンオフするため「ラスター図形」と呼ばれる。

SVGの成り立ち

　昔のグラフィックス出力形式の多くは、メーカー依存しているものが中心だった。有名どころではAdobeのai形式などだ。そのほかには、多くの描画アプリがEPS/PostScript形式をサポートしていた。また、EPS（Encapsulated PostScript）形式は、PostScriptをベースにした画像ファイル形式である。

　ai、EPS/PostScriptともに、開発元はAdobeであり、利用やライブラリの利用には同社からのライセンスを取得する必要があるなど、広く使えるオープンなファイル形式ではなかった。

　その点でSVGは、W3C（World Wide Web Consortium）が管理しており、仕様もW3Cが策定している。SVGはゼロから作られたというわけではなく、PGMLとVMLをベースに開発が進められた。

　PGML（Precision Graphics Markup Language）は、Adobe、IBM、Netscapeの3社が中心になって開発したWeb用のベクトル画像形式であり、XMLを使ってベクトル描画言語を定義する。

　VML（Vector Markup Language）は、1998年にMicrosoft、Flashで知られるMacromedia（2005年にAdobeが買収）、HP、Autodesk、Visio（2000年にMicrosoftが買収）が開発に関わった。こちらもXMLベースのベクトル図形描画言語である。Microsoftが関係するため、WebブラウザInternet ExplorerやOfficeアプリは、VMLの表示に対応していた。

　PGML、VMLともに1998年にW3Cに提案された。W3Cは、両者をベースにSVGを策定することにした。

実際のSVGはこんな感じ

　以下のリストは、Copilotがサンプルとして出力した「カスタムSVGチャート」である。

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="100%" height="100%" fill="#f9f9f9" />

  <!-- タイトル -->
  <text x="200" y="30" font-size="20" text-anchor="middle" fill="#333">アニメーション付きSVG</text>

  <!-- 軸 -->
  <line x1="50" y1="250" x2="350" y2="250" stroke="#333" stroke-width="2"/>
  <line x1="50" y1="50" x2="50" y2="250" stroke="#333" stroke-width="2"/>

  <!-- 棒グラフ -->
  <rect x="80" y="150" width="40" height="100" fill="#4CAF50">
    <animate attributeName="fill" values="#4CAF50;#FF5722;#4CAF50" dur="3s" repeatCount="indefinite"/>
  </rect>
  <rect x="150" y="100" width="40" height="150" fill="#2196F3">
    <animate attributeName="fill" values="#2196F3;#FFC107;#2196F3" dur="3s" repeatCount="indefinite"/>
  </rect>

  <!-- カスタム図形（円） -->
  <circle cx="200" cy="80" r="20" fill="#FF5722" stroke="#333" stroke-width="2">
    <animate attributeName="cy" values="80;120;80" dur="2s" repeatCount="indefinite"/>
  </circle>

  <!-- ラベル -->
  <text x="80" y="270" font-size="14">A</text>
  <text x="150" y="270" font-size="14">B</text>
</svg>

　このリストの内容をメモ帳などに貼り付け、拡張子を「.html」にして保存する。これをEdgeブラウザで開く（ファイルをドラッグ&ドロップしてもよい）と、SVGによる画像を表示する。

メモ帳などに貼り付け、拡張子をhtmlにして保存し、ブラウザで開けば、SVGによる図形描画を見ることができる

　注釈があるので、それぞれがどんな働きをしているか大体わかると思う。このあたりがXMLベースのいいところ。簡単に言えば、SVGとは、svgタグで囲まれた範囲に、プリミティブ図形や、線分などのタグを記述して描画させる。

　SVGには、ユーザーからの操作を受け入れる、アニメーションをするといった機能もある。アニメーションにしたい図形プリミティブタグ（たとえば矩形、rect）の中に「animate」タグを記述する。この「animate」では、親オブジェクトの属性値を、どのような値で、どれぐらい時間をかけて変化させるか、アニメーションの繰り返し回数（無限回の指定も可能）を属性値として指定する。

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="100%" height="100%" fill="#f9f9f9" />

  <!-- タイトル -->
  <text x="200" y="30" font-size="20" text-anchor="middle" fill="#333">アニメーション付きSVG</text>

  <!-- 軸 -->
  <line x1="50" y1="250" x2="350" y2="250" stroke="#333" stroke-width="2"/>
  <line x1="50" y1="50" x2="50" y2="250" stroke="#333" stroke-width="2"/>

  <!-- 棒グラフ -->
  <rect x="80" y="150" width="40" height="100" fill="#4CAF50">
    <animate attributeName="fill" values="#4CAF50;#FF5722;#4CAF50" dur="3s" repeatCount="indefinite"/>
  </rect>
  <rect x="150" y="100" width="40" height="150" fill="#2196F3">
    <animate attributeName="fill" values="#2196F3;#FFC107;#2196F3" dur="3s" repeatCount="indefinite"/>
  </rect>

  <!-- カスタム図形（円） -->
  <circle cx="200" cy="80" r="20" fill="#FF5722" stroke="#333" stroke-width="2">
    <animate attributeName="cy" values="80;120;80" dur="2s" repeatCount="indefinite"/>
  </circle>

  <!-- ラベル -->
  <text x="80" y="270" font-size="14">A</text>
  <text x="150" y="270" font-size="14">B</text>
</svg>

　なお、リストの中で単位を持たない数値は、ユーザー座標値として解釈される。基本となるのは、svgタグにある「width」と「height」属性値である。この値は、描画先で描画範囲を示すピクセル数を定義する。「width="400" height="300"」とあれば、ブラウザの表示領域の左上を原点（0,0)として、右に400ドット、下に300ドットの範囲に描画する。このとき、描画タグで使われる単位を持たない値で定義される座標は、この範囲内のドット位置として解釈される。

　ただし、描画範囲を拡大しても、図形のサイズはそのままになる。なぜなら、描画タグで指定されているユーザー座標数値がそのままだからだ。

　SVGが「Scalable」と言われる理由は、viewBox属性値を使うことで、ユーザー座標範囲をどう扱うかが決まる。svgタグにviewBox属性値を定義すると、ユーザー座標値は、viewBox範囲内の座標として解釈される。

<svg width="800" height="600" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="100%" height="100%" fill="#f9f9f9" />

  <!-- タイトル -->
  <text x="200" y="30" font-size="20" text-anchor="middle" fill="#333">カスタムSVGチャート</text>

  <!-- 軸 -->
  <line x1="50" y1="250" x2="350" y2="250" stroke="#333" stroke-width="2"/>
  <line x1="50" y1="50" x2="50" y2="250" stroke="#333" stroke-width="2"/>

  <!-- 棒グラフ -->
  <rect x="80" y="150" width="40" height="100" fill="#4CAF50"/>
  <rect x="150" y="100" width="40" height="150" fill="#2196F3"/>
  <rect x="220" y="180" width="40" height="70" fill="#FFC107"/>
  <rect x="290" y="130" width="40" height="120" fill="#E91E63"/>

  <!-- カスタム図形（円と線） -->
  <circle cx="200" cy="80" r="20" fill="#FF5722" stroke="#333" stroke-width="2"/>
  <line x1="200" y1="80" x2="200" y2="250" stroke="#FF5722" stroke-width="2" stroke-dasharray="5,5"/>

  <!-- ラベル -->
  <text x="80" y="270" font-size="14">A</text>
  <text x="150" y="270" font-size="14">B</text>
  <text x="220" y="270" font-size="14">C</text>
  <text x="290" y="270" font-size="14">D</text>
</svg>

　このため、描画範囲を400×300から800×600に拡大し、viewBoxとして「0 0 400 300」（最初の2つが原点位置、次の2つがその対角位置の座標を表す）とすると、表示画像が倍の大きさで表示される。

描画範囲を変更し、viewBoxでユーザー座標による表示範囲を指定することで、SVGでは、画像の表示サイズを変更することが可能

　SVGの公式な仕様書は、W3Cのサイトにある。原稿執筆時点で推奨となっているの、「Scalable Vector Graphics (SVG) 1.1 (Second Edition)」（https://www.w3.org/TR/SVG11/）だ。日本語訳として「SVG 1.1 仕様 （第2版） 日本語訳」（https://triple-underscore.github.io/SVG11/index.html）がある。

　Webのためのオープンな画像形式であるSVGだが、ローカルでのベクトル図形交換形式としても利用されている。今後は、AIからの図形出力用としての用途が増えるのではないかと想像される。Markdownと合わせ、AIの利用では、ある程度の理解が必要になると思われる。