Wikipedia:SVGへの乗り換え

SVG（Scalable Vector Graphics）とは、ベクトルからなる画像（ベクター画像）の一種です。ウィキペディアを含むウィキメディア・プロジェクトのウィキで使われているMediaWikiというソフトウェアはSVG画像に対応しています。アップロードされたSVG画像は表示する際に任意の大きさのPNG画像に変換されます。これによって、SVGに対応していないブラウザでもアップロードされたSVG画像を見ることができます。

SVGとは

SVGの利点

ビットマップ画像（左）とSVG画像（右）をそれぞれ拡大すると、ビットマップ画像はぼやけるのに対し、SVG画像は画質が良いままである。

1. JPEG、GIFやPNGのようなピクセルからなる画像（ビットマップ画像）ファイル形式ではないので、画質の劣化なしにどんなサイズにでも伸縮可能です。
2. ウィキペディアを含むウィキメディア・プロジェクトには「自由なコンテンツを提供する」という目的があります。編集しづらいビットマップ画像は「自由」ではありません。そのようなビットマップ画像と違い、小さな編集（一部分の色だけ変更する、画像中の文字列を変更する、など）をかなり行いやすいので、SVGはウィキメディア・プロジェクトの目的により適しています。

SVGの欠点

1. 技術的な質が不十分であるSVG画像による問題は時々さらに深刻な問題をも引き起こし、その害を抑えるためにSVGの描画時間に制限が設けられてきました。
2. サーバーはSVGのすべての機能を描画することはできないため、生成されたPNGはときに作者が意図したものではなくなることがあります。

SVGには欠点はありますが、劣化しない画像形式の使用を推奨するのはいいことで、SVGを用いた代替画像を提供し、皆にこの形式を使うのを勧めるのには利点があります。ビットマップ画像をSVGに変更するのを依頼するには、{{Convert to SVG}} テンプレートを画像の説明ページに加えてください。ビットマップ画像のSVG版があることを、{{Vector version available}} テンプレートを画像ページに貼ることによって知らせることができます。

SVGを編集できるソフト

SVG は XML を用いているのでテキストエディタによるデータの作成も一応可能ですが、記述は複雑なため、編集ソフトを使うほうが実用的です。高度なグラフィクス作成に主眼を置いたグラフィックソフトから図、表、フローチャートなどの作成に主眼を置いたソフトまで幅があります。

無償のもの

SVG の読み書きが可能なもの

• Inkscape - 標準のファイル保存形式がSVGです。シンプルで使いやすいです。
• Dia

一部制限があるもの

• GIMP - 読み込みに対応。書き出しはパスの書き出しのみ。

SVG の出力が可能なもの

• OpenOfficeDraw - 1.1までは日本語出力が一部乱れるなど難あり。2.0から書き出しをサポート。SVG Import Filterをインストールすれば読み込みも可能。
• R言語はデータ解析結果のグラフ出力形式としてSVGをサポートしています。
• Gnuplotはグラフ出力形式としてSVGをサポートしています。
• BKchemはSVG形式で化学構造式の出力が可能ですが、下付き文字を用いる場合はテキストのパス変換が必要です。

無償でないもの（すでに持っている方向け）

SVG の読み書きが可能なもの

• Adobe Illustrator Ver. ?以降
• Microsoft Office Visio Ver. ?以降
• Corel DRAW Ver. ?以降
• Justsystems Xfy

SVG の出力が可能なもの

• 花子2006以降は、SVG（Ver.1.0に準拠）の書き出しをサポートしています。
• Omni GroupのOmniGraffle Professional 4は、SVG書き出しをサポートしています。
• ChemDraw/ChemBioDrawのVer.12以降は、SVG書き出しをサポートしています。

このほかにも、CADソフトウエアには読み書きともに対応しているものが多く存在します。

TIPS: Inkscapeは手持ちの、またはアップロードされているビットマップ画像からSVGファイルを作成するのにとてもよいソフトです。SVGへの変換を行うには、Inkscape上でビットマップ画像を選択した状態で「パス(P)」メニューを開き、ビットマップをトレース(T)...をクリックするか、または「Shift + Alt + b」のキーボードショートカットを使ってください。

どのような画像がSVGに適しているか

ピクトグラムや地図記号などの図

• 
• 

地図

• 
• 
• 

文字

• 
• 
• 
  多言語対応ファイル
  (lang=en指定時)
• 
  多言語対応ファイル
  (lang=ja指定時)

グラフ

• 

フローチャートや説明図

• 

航空機の三面図

• 

など、任意の大きさで表示されるような図です。地図や説明図などは、図中にある文字列に誤りがあったときに修正がしやすくなります（文字列をパスに変換しなかった場合）。

注意

文字列のフォントはウィキメディアにインストールされているものにしてください。それ以外のフォントを使おうとすると、文字の大きさが変わったり、意図しない文字が表示されたりする場合があります。どうしてもそれ以外のフォントを使う必要がある場合は、文字列をパスに変換してください。ウィキメディアにインストールされているフォントについては、https://noc.wikimedia.org/conf/fc-listで確認できます。日本語ではIPAフォント・Noto・Takaoフォント・VLゴシックが利用できます。

PNG画像をより質の低いSVG画像、もしくは実際には不正確なものと置き換えるのには不満の声がありました。特に後者は百科事典のプロジェクトでは許容できないものです。置き換えられるものを不要なものとする前に、置き換えるものの質は元々のものと同じまたは優れているということを完全に確実にしてください。

PNG画像は代替となるSVG画像が利用できるようになったとたんに一斉に削除されるべきではありません。画像の説明ページに {{Vector version available}} テンプレートを付けるだけで十分な場合が多く、適切であれば作者によってSVGバージョンに移行されます。

制限

描画に関して、MediaWikiのSVGのサポートには重大な制限が設けられています。

1. markerタグ (<marker>) は正確にサポートされていません。
2. Text flow (<flow...>) はサポートされていません。代わりに<text>を使ってください。

SVG画像をアップロードするときはこれに加えてPNGバージョンもアップロードするほうが良いかもしれません。

これらや他のバグはlibrsvg (GNOME) bugzillaに報告するべきで、画像例はコモンズにアップロードした場合、Category:Pictures showing a librsvg bugに入れてください。

Bot

多くのページで使われているビットマップ画像をSVGのものと置き換えるのに、Botを使うと便利です。「Botの運用者には手助けしたいととても思っている人が多く、彼らの怪物 (Bot) を見せびらかしています。」（コモンズの説明（原文は英語）より）

ウィキペディア日本語版以外で使われている画像を置き換える場合です。多くの、全てではないにしろ、Botの運用者は習慣的にこのメーリングリストを読んでいて、依頼は特にここでするほうが良いかもしれません。Botが全てのウィキペディアの画像を置き換えるのに、多くの要因にもよりますが、数時間からもしかしたら1日かかるかもしれません。

Botは運用されている全てのプロジェクトで特別な許可が必要で、その許可はBotがするそれぞれ違った作業ごとに与えられているということを覚えておいてください。全てのプロジェクト、Botの全ての使い方に対しての許可はありません。全てのプロジェクトでBotを運用するということは、方針が決められているウィキの方針に違反した場合、BotやBotの運用者が緊急措置としてすべてのプロジェクトで投稿ブロックを受けるということになりやすいです！

よくある質問

SVG画像はどのくらいの大きさがいいですか？

画像ページを見たときにどのくらいの大きさで表示されるかだけにしか影響しないので、画像の絶対的な大きさはそれほど問題ではありません。ファイルサイズは画像の寸法には関係しません！ この画像は、画質やファイルサイズの変化なしに、自由に拡大したり縮小したりできます。推奨される画像の幅は600pxくらいだということを頭に入れておいてください。画像を等倍で見たとき、600-800pxの幅だとちょうどよい大きさで見え、拡大や縮小することなしに画面の大きさと画像の全体の大きさを合わせられます。

Inkscapeではどのように画像の大きさを変更するのですか？

そのままでは画像の大きさはA4になっています。これを大きくしたり小さくしたりするには、画像の大きさにしたい寸法で長方形を作り、それを選択します。そして「ファイル(F)」→「ドキュメントのプロパティ(D)」をクリックし、「カスタムサイズ」の中の「ページサイズを描画全体または選択オブジェクトに合わせる(R)」をクリックし、OKをクリックします。このあと「サイズを決めるための」長方形は削除してもかまいません。他の形状は用紙に収まるように移動したり大きさを変えたりしてください。

文字が四角になったり、ウィキペディアにアップロードにしたらまったく見えなくなります！

いくつかのInkscapeのテキストの機能はウィキペディアではサポートされていません。テキストのオブジェクトを選択し、「パス(P)」→「オブジェクトをパスへ(O)」をクリックします。テキストがパスに変換されます。プレーンSVGで保存し、ファイルをアップロードしなおしてください。

矢印・ダッシュが四角になったり、ウィキペディアにアップロードにしたらまったく見えなくなります！

いくつかのInkscapeのストロークの機能はウィキペディアではサポートされていません。そのようなオブジェクトを選択し、「パス(P)」→「ストロークをパスに変換(S)」をクリックします。ストロークがパスに変換されます。プレーンSVGで保存し、ファイルをアップロードしなおしてください。

どのようにして透過の背景を取り除くのですか？

そうする必要が本当にあるのでしょうか？ 大抵は無いです！ ウィキペディアのレンダラはSVGファイルを、表示用の白い背景を付けPNGに変換します。ネイティブにSVGの透過をサポートするブラウザは画像を通して背景色を表示しますが、その色は白です！ 画像の背景を透過にしておくことは、背景に大きな白い四角が出ず他の色の背景色が表示され、後でその画像を編集する人にとっては良いことです。しかし、本当にその画像に特に背景色を必要とするならば、画像の大きさと同じ大きさの長方形を作り、好きな背景色をつけ、そして、「オブジェクト(O)」→「Lower to Bottom」をクリックしてください。画像を保存して、solidな背景色にしてください！

フォントによっては正しく描画されません。このサイトではどのフォントがサポートされていますか？

SVG fontsにリストがあるのでご覧ください。

アップロード前の描画確認

ここまで説明したように、アップロードしてもSVG画像が正しく描画されない場合もあります。英語版利用者Jarry1250が作成したJarry1250's Wikimedia Laboratory - SVG Checkを使えば、アップロード前にウィキメディアのサーバで問題なく描画されるかどうか確認できます。

関連項目

• Scalable Vector Graphics - ウィキペディア日本語版におけるSVGの記事
• meta:SVG image support - メタウィキによるSVG画像サポートに関する情報
• commons:Help:SVG - ウィキメディア・コモンズ上のSVGに関するヘルプページ