理系ジン

しばらくPythonに力を入れる予定です。

SVGについて

SVG

概要

SVG（Scalable Vector Graphics）は、XMLやHTMLのsvg要素やその子要素によりベクター画像を描画するものです。ベクター画像なので拡大しても画像が劣化しません。

Canvasとは異なりブラウザに表示された画像を画像ファイルとしては保存する事はできなさそうです。

今回、説明はかなり省略しました。詳細は、参考資料を見てください。

はてなブログでのSVGの描画

はてなブログは本文にHTMLを使えます。はてなブログの本文に書いたHTMLはbody要素の内部に書かれます。本文にsvg要素を記述すればSVGによる描画ができます。

SVGの描画方法

SVGの描画をおこなうには、描画をおこなうsvg要素を配置し、子要素に描画用の要素を記述しておこないます。

svg要素にwidthやheight属性を指定しないと、自動的に画面表示一杯のサイズの表示領域になるようです。xmlns属性やversion属性は指定してもしなくても構わないようです。

SVGは（Canvasと同じく）、左上が原点(0,0)で、右がX軸方向で下がY軸方向となり、数学でよく使われる座標系とは、原点の位置が異なりY軸の向きが反対です。

フォントや色は、Canvas同様に、CSSフォントやCSSカラーが使われます。

(0,0) (240,120)

（環境によっては、文字がきちんと表示されていませんがそのままにしておきます。）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 style="border:1px solid;" width="240" height="120" >
<text x="0" y="0" text-anchor="start" dominant-baseline="text-before-edge">(0,0)</text>
<text x="240" y="120" text-anchor="end" dominant-baseline="text-after-edge">(240,120)</text>
</svg>

SVGファイルの表示

HTMLに直接svg要素を記述する他に、SVGファイルをobject要素から指定して表示する方法もあります。

例えば、次の内容のSVGファイル（test.svg）を作成し配置します。1行目のxml宣言は不要なようです。

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
 style="border:1px solid;" width="240" height="120" >
<text x="0" y="0" text-anchor="start" dominant-baseline="text-before-edge">(0,0)</text>
<text x="240" y="120" text-anchor="end" dominant-baseline="text-after-edge">(240,120)</text>
</svg>

そして、HTML文書で、次のようなobject要素から利用します。width属性やheight属性は、object要素で指定したものが優先されSVG自体の幅や高さになるようです。

<object type="image/svg+xml" data="test.svg"
 style="border:1px solid;" width="240" height="120" >

テキスト描画

テキスト描画は、svg要素の子要素のtext要素によりおこないます。

フォントは、前回のCanvasの記事同様に、インストールされているフォントやWebフォントを使えます。今回はGoogle Fontsを使用しています。

詳細は、8.文字列の挿入 - svg要素の基本的な使い方まとめを見て下さい。

インストールされている明朝 Google FontsのAudiowide Google FontsのRoboto 

<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<svg style="border:1px solid;" width="280" height="120">
<text x="0" y="0" text-anchor="start" dominant-baseline="text-before-edge" font-size="20" font-family="'Hiragino Mincho Pro','MS Mincho','TakaoMincho'">インストールされている明朝</text>
<text x="0" y="40" text-anchor="start" dominant-baseline="text-before-edge" font-size="20" font-family='Audiowide'>Google FontsのAudiowide</text>
<text x="0" y="80" text-anchor="start" dominant-baseline="text-before-edge" font-size="20" font-family='Roboto'>Google FontsのRoboto</text>
</svg>

例と説明

前回の、Canvasの記事同様に、理系ジンのアイコンを描いてみます。

理 

<svg style="border:1px solid;" width="240" height="240">
<defs>
  <filter id="f1" x="0" y="0" width="200%" height="200%">
    <feOffset result="offOut" in="SourceAlpha" dx="10" dy="10" />
    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>
</defs>
<rect x="10" y="10" width="220" height="220" rx="10" ry="10" fill="#999" filter="url(#f1)" />
<rect x="10" y="10" width="220" height="220" rx="10" ry="10" fill="#999" />
<rect x="20" y="20" width="200" height="200" fill="#FFF" />
<text x="20" y="20" fill="#999" text-anchor="start" dominant-baseline="text-before-edge" font-size="200" font-family="'Hiragino Kaku Gothic Pro','MS UI Gothic','TakaoGothic'">理</text>
</svg>

枠の四角の色が薄くなってしまうのを回避する方法が分からなかったのでフィルター無しで上書きしています。

その他の描画機能

描画の機能はCanvasより豊富です。Canvasに無い主な機能に次のものがあります。

  • マーカー：線や頂点に矢印等を付ける機能
  • 破線
  • アニメーション：SVGの機能でアニメーションする機能
  • フィルタ：画像をぼかしたりする機能
  • ライティング：画像に立体感を与えたりする機能

これらは、10分でわかるSVG 基礎編 サンプル - @ITや10分でわかるSVG 応用編 サンプル - @ITを見て頂くとどういうものか分かります。非常に簡単にアニメーションができると分かります。

MarkdownエディタのSVG対応

MarkdownエディタのMacDownやLightPaperでは問題なくSVGが表示できます。MouでもSVGを表示できますが、何故か表示されない事もありました（動作確認でペーストした文書の文字コードの問題と思われます）。

AtomのMarkdown Previewでは、SVGを表示できます。link要素等は無効になります。（20141004追記）

Kobitoでは、svg要素の表示はされますが、描画はおこなわれません。

StackEditでは、svg要素は全て削除され使えません。

今回の文書作成も前回と同じくMacDownを使用しました。

理系ジンの意見

Canvas同様SVGでも比較的容易に図を描けます。ベクター画像なので表示上の利点が多いと思います。Canvasより速度は遅いと思いますが、ゲーム用途でなければ問題無さそうです。

SVGの注目度はCanvasより低いようです。ブラウザの実装状況は、すぐに気が付く仕様と異なる動作があります。次回の記事で紹介しますがSVG用のツールは充実しています。

数学の座標系とは、原点の位置が異なりY軸方向の向きが反対です。SVGだけで数式のグラフを描画するのは難しそうです。グラフ描画に関しては、いずれライブラリ等を調べたいと思います。

予定

画像を扱うツールを紹介する予定です。

参考資料