SVG/はじめに
はじめに
[編集]動作確認コード
[編集]SVG形式は、画像を作成するための形式です。文字を表示するための形式ではないのです。（web画面に文字を表示するだけなら、HTMLだけで可能です。）
SVGの実際の利用では、たとえば下記のようにして、図形を表示するような用途が想定されています。なお、これは水色の背景の上に、黒い円を表示するプログラムです。
コーディングはHTMLと同様、Windows「メモ帳」などのテキストエディタでSVGのコードも書けます。
<svg width="100" height="80" style="background-color: #bbbbff">
<circle cx="30" cy="30" r="10" stroke="black" />
</svg>
- (※ FirefoxとGoogle Chrome と Microsoft Edge での2020年7月時点での最新版ブラウザで表示を確認ずみ。)
webブラウザで閲覧する場合、このコードを、拡張子.htmlで保存します。上記コードの場合、.svgでは動作しないです。なおLinuxなどにおいてSVG画像を表示する場合のファイル拡張子は.svgです（古いバージョンのWindowsでは、ブラウザ以外でのSVG画像表示は未対応です）。
上記コードは、Internet Explorer では動作しません。[1]そのためFirefox または Google Chrome または Microsoft Edge をお使いください。
SVGファイルは上記のように、HTMLのようなタグを記述して作成していきますが、規格上は厳密にはHTMLではなくXMLの一種です。
SVGでは、<svg>タグおよび</svg>タグの内側に、図形などの情報を記述していきます。
動作環境および作成環境
[編集]もしお使いのwebブラウザのレンダリングエンジンがSVGに対応していれば、ウェブブラウザ上でSVG画像を閲覧することができます。FirefoxとGoogle Chrome は2020年の時点で、SVG画像の表示に対応しており、[1]実際にブラウザ上でSVGファイルをもとにベクター画像を表示できます。 一方、WindowsのInternet ExplprerはSVG未対応です。[1]
なお、対応していない場合でも、外部のビューワプラグインを導入して見ることができるようになる場合があります。
また、SVGファイルを作成する方法は簡単で、テキストエディタを使って自分でSVGファイルを書くこともできます（HTMLファイルの作成方法と同様です）。この他、SVG画像を作成する専用のソフトウェアとして、フリーソフトのInkscapeなどがあり、Inkscapeでは標準の画像形式としてSVG画像が採用されています。
また、標準の画像形式としては採用していませんが、Microsoft OfficeやLibreOfficeなどのオフィスソフトでも、バージョンの新しいものであればSVG画像を作成できます。
なお閲覧ソフトについては、かつてAdobe社が SVG Viewer という閲覧ソフトを開発していましたが、2009年にはサポート終了されています。
- 拡張子
SVGのコードを記述したHTMLファイルをwebブラウザで開く場合は、拡張子を.htmlにしてください。もし拡張子を.svg にしてしまうと、ブラウザでは図形描画をできなくなります（コードそのものの文字列がブラウザ画面に表示されてしまいます）。
一方、ドローソフトの Inkscape で開く場合には、ファイルの拡張子を .svg にしてください。本書で紹介するsvgコードのほとんどは、拡張子を .svg に変えれば、Inkscapeで編集できます。
なお、W3C系の規格にもとづくSVGファイルをInkscapeで読み込むことはできますが、しかしInkscapeで編集したファイルには、W3C規格外のタグもあります。InkscapeのSVGの仕様は、Inkscape SVG という名の独自仕様です。このため、Inkscapeで編集した図形を、そのままブラウザで読み込むのは、できたとしても、あまり好ましくないでしょう。
どうしてもInkscapeでブラウザ用の画像を作成する場合、形式を「名前をつけて保存」などの際にプレーンSVGという形式（W3Cの素のSVG規格に比較的に近い形式）に変換できますので、プレーンSVGに変換しておいてからHTMLで読み込みをするのが安全です。
Inkscapeコミュニティの目的は、けっしてW3Cの想定するようなブラウザ開発ではなく、ドローイングソフトの開発がInkscapeコミュニティの目的なので、ドローイングソフトとして必要な多くのタグが、Inkscapeで作成したファイルのソースには作成されます。（『メモ帳』などのテキストエディタで、Inkscapeで作成したSVGファイルのソースコードを簡単に閲覧できます。）
余談ですが、InkscapeはSVG形式への変換の他、HTML5のcanvasタグの形式のHTMLファイルへも変換できます。
技術的背景
[編集]HTMLの仕様とは別に、XML（拡張マークアップ言語）というタグを使って情報を記述していく記法があります。SVGはこのXMLを利用しているため、XHTMLやMathMLなどの他の標準と組み合わせて使用することができます。DOMによるメソッドを使ってJavaScript (ECMAScript) から操作することも可能です。XPathはSVG画像の特定の要素を指し示すことができます。 XML自体はSVGだけでなく、データ形式を記述するのにも利用されています。
規格と普及の実態の差
[編集]外部ファイルの問題
[編集]たとえばJavaScriptをHTMLファイルとは別の外部ファイル（拡張子 .js）として読み込む場合、コーディングは比較的に簡単に記述できるようになっています。
しかしSVGでは、まだブラウザの対応が進んでおらず、けっしてJavaScriptのようには、そう簡単には外部ファイルを読み込みできません。
2020年の時点では、名前空間として xmlns="http://www.w3.org/2000/svg" などの情報をSVG画像のソースコードに指定する手間などがあります。
このため、現状では、簡単な図形などは、HTMLファイル側に直接にSVGタグを書き込む「インラインSVG」の手法でコーディングするのが簡単です。
動画の問題
[編集]SVGは規格上は動画フォーマットとしても対応するように制定されていますが、実際は主に静止画像として多くのSVG対応アプリケーションに採用されています。
また、SVGで想定している動画とは、たとえば図形の平行移動や回転移動や拡大縮小といった動きの動画です。
けっして、YouTubeなどのような動画サイトの動画形式などに対応しているわけではないので、誤解のないように。