Wikipedia:SVGへの乗り換え

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

SVGとは

SVGの利点

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

SVGを編集できるソフト

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

この節の加筆が望まれています。

どのような画像が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に関するヘルプページ