利用者:Matsukaze/bs2svg

出典: フリー百科事典『ウィキペディア（Wikipedia）』

このページではWikipedia:経路図テンプレートを利用した経路図を1枚のSVG画像に変換する方法について説明しています。

ご意見、ご感想はこのページのノートまでお願いします。

[編集] 自動変換

[1] から bs2svg.pl を入手してください。詳しい使い方はリンク先を参照してください。

下記のようなWikiソースを右のような画像に変換します。

{| {{Railway line header}}
{{BS-header|14号線}}
{{BS-table}}
{{BS|tENDEa}}
{{BS|tINT||[[サン・ラザール駅|サン・ラザール]]}}
{{BS|tSTR}}
{{BS|tINT||[[マドレーヌ駅|マドレーヌ]]}}
{{BS|tSTR}}
{{BS|tINT||[[ピラミッド駅|ピラミッド]]}}
{{BS|tSTR}}
{{BS|tINT||[[シャトレ駅 (パリ)|シャトレ]]}}
{{BS|tWASSER|||[[サン・マルタン運河]]}}
{{BS|tINT||[[リヨン駅|ガール・ド・リヨン]]}}
{{BS3||tABZlf|tSTRlg|||←[[パリメトロ6号線|6号線]]→}}
{{BS3|TUNNELlu|tHSTR|O2=tINT|tABZ3lf||[[ベルシー駅|ベルシー]]}}
{{BS|tSTR}}
{{BS|tBHF||[[クール・サンテミリオン駅|クール・サンテミリオン]]}}
{{BS|tWASSER|||[[セーヌ川]]}}
{{BS|tINT||[[ビブリオテーク・フランソワ・ミッテラン駅|ビブリオテーク・フランソワ・ミッテラン]]}}
{{BS|tSTR}}
{{BS|tBHF||[[オランピアード駅|オランピアード]]}}
{{BS|tKDSe||トルビアック・ナショナル車両基地}}
|}
|}

[編集] 注意

変換スクリプトの対応していないアイコンは黒の四角で表示されます。下記を参考に手動で修正してください。
環境によってはウムラウトを含むアイコン名が正常に処理されないことがあります。この場合はウムラウトをはずした綴り（BRÜCKE -> BRUCKE など）に書き換えて実行してください。{{BS/橋}}などには今のところ対応していません。

[編集] ファイルの構造

SVGに関する一般的な情報は適当な書籍やWebサイトを参照してください。

bs2svgの生成するSVGファイルでは、SVGのsymbol機能を使ってアイコンを下の一覧にある単純なシンボル（またはその色違い、回転、左右反転など）の重ね合わせとして表現しています。たとえば

BHF-ELEV() = E + S + STA.
xABZ3rg() = S（90度回転、色を#d77f7eに変更） + C（180度回転）.

[編集] BSテンプレートからの仕様変更

BSテンプレートのアイコン群では背景は透明でしたが、bs2svgの出力では白に変更しています。これは立体交差などの描画で、下に置いたアイコンを上から白で塗り潰すといった処理を使っているためです。もっとも、BSテンプレートのアイコンにもこのような処理を行なっているものがあります。

また一部のアイコンは新たに描き直したため形が微妙に変わっているかもしれません。

[編集] シンボル一覧

背景は本来は白ですが、「白色での塗り潰し」の範囲が分かるよう色を付けてあります。

種類	シンボル名		意味		BSテンプレートのアイコン（例）
種類	左	右	左	右	左	右
線路	S	tS	直線	直線（トンネル内）	STR	tSTR
	C	tSC	曲線	曲線（トンネル内）	STRrf	tSTRrf
	BS2lf	tBS2lf	BSとBS2などの接続用	同（トンネル内）	BS2lf	tBS2lf
	BS2cro	tBS2cro	同上（コーナー部）	同（トンネル内）	BS2cro	tBS2cro
	H	tH	直線（半分）	同（トンネル内）	KBFa	tKBFa
	TN	TN2	トンネル（大）	トンネル（小）	TUNNEL1	TUNNEL2
	CROSS	tCROSS	クロスオーバー	同（トンネル内）	ÜST	tÜST
	LUECKE		中断		LUECKE
駅	STA	STAr	駅	駅（スイッチバックなど）	BHF	KBFl
	STP	DST	小駅	貨物駅、車両基地など	HST	DST
	ACC	ACC2	バリアフリー駅	同（小）	ACC	UTurmBHFAo
	SBHF		Sバーン駅		SBHF
	INT	INTl	乗換駅	乗換駅（左端）	INT	INTl
	INTm		乗換駅（中間）		INTm
	CPI	CPIl	対面乗り換え	対面乗り換え（端）	CPIC	CPICl
施設	E	El	直線高架橋	高架橋（左半分）	ELEV	ABZlf-ELEV
	Erc	Esc	高架橋（丸コーナー）	高架橋（角コーナー）	ABZrf-ELEV	ABZlg-ELEV
	EC	Es	曲線高架橋	高架橋始点	STRrf-ELEV	ELEVa
	B	B1	橋（大）	橋（跨線橋など）	BRÜCKE	BRÜCKE1
	B2	W	橋（跨河橋など）	河川、水域	BRÜCKE2	WASSER
	HIGHWAYde	HIGHWAYuk	高速道路（ドイツ）	高速道路（イギリス）	AKRZu	AKRZ-UKu
	OVERPASS	PORTAL	道路橋	トンネル入口	SBRÜCKE	TUNNELa
	BUE		踏切		BUE
	END	eEND	終点	終点（廃止）	ENDEe	exECDEe
	FLUG	eFLUG	空港	空港（廃止）	FLUG	exFLUG
	SHIP	eSHIP	航路	航路（廃止）	BOOT	?
記号	ONEWAY	tONEWAY	一方通行	一方通行（トンネル内）	STRd	tSTRd
	KMW	SUMMIT	キロ程変更	峠	KMW	STRSummit
	GRENZE	eGRENZE	国境	境界	GRENZE	eGRENZE
略記	Cul	tCul			STRrf	tSTRrf
	Cur	tCur			STRlf	tSTRlf
	Cld	tCld			STRrg	tSTRrg
	Crd	tCrd			STRlg	tSTRlg
	BS2rf	tBS2rf			BS2rf	tBS2rf
	BS2lg	tBS2lg			BS2lg	tBS2lg
	BS2rg	tBS2rg			BS2rg	tBS2rg
	BS2clo	tBS2clo			BS2clo	tBS2clo
	BS2cru	tBS2cru			BS2cru	tBS2cru
	BS2clu	tBS2clu			BS2clu	tBS2clu
	INTr	CPIr	乗換駅（右端）	対面乗換（右端）	INTr	CPICr
	TNs		トンネル始点		TUNNELa
その他	undefined	leer	未定義アイコン	空白		leer

El, Erc, Escは組み合わせて高架橋上のの分岐を表現するのに使います。
Cul以下のシンボルは手動編集用の略記です。bs2svgでは-dオプションなどで指定しない限り出力されません。

[編集] 手動による編集

[編集] 色、幅の変更

bs2svgの出力するSVGファイルでは、塗り潰しの色や線の幅などを冒頭部のスタイルシートで定義しています。

bs_default - デフォルト（普通鉄道、現用）
bs_e - 普通鉄道、閉鎖
bs_u - ライトレール
bs_ue - ライトレール、閉鎖

これらの定義を手動で編集することで色や幅を変更できます。また新たなクラスを追加することでラインカラーなどによる色分けや線の幅による強調などができます。

以下はImage:Paris_Metro_14_bs_2.svgの15行-20行です。デフォルトの色を#652c90（14号線ラインカラー）に、幅を150pxに変更し、さらに6号線用（bs_m6）と連絡線用（bs_rac）のクラスを追加しています。

   .bs_default {stroke:#652c90;stroke-width:150;stroke-linecap:butt; stroke-linejoin:miter;fill:#652c90}
   .bs_e {stroke:#d77f7e;fill:#d77f7e}
   .bs_u {stroke:#003399;fill:#003399}
   .bs_ue {stroke:#6281c0;fill:#6281c0}
   .bs_m6 {stroke:#77c696;fill:#77c696;stroke-width:100}
   .bs_rac {stroke:#808080;fill:#808080;stroke-width:70}

後半のシンボル配置部分では use タグ内でこれらのクラスを指定します。

Image:Paris_Metro_14_bs_2.svg 85行 - 95行:

 <use class="bs_rac" xlink:href="#tC" x="1" y="10" width="1" height="1" transform="rotate(90,1.5,10.5)" />
 <use xlink:href="#tS" x="1" y="10" width="1" height="1" />
 <use class="bs_rac" xlink:href="#tC" x="2" y="10" width="1" height="1" transform="rotate(270,2.5,10.5)" />
 <use class="bs_m6" xlink:href="#H" x="0" y="11" width="1" height="1" transform="rotate(90,0.5,11.5)" />
 <use class="bs_m6" xlink:href="#tH" x="0" y="11" width="1" height="1" transform="rotate(270,0.5,11.5)" />
 <use xlink:href="#PORTAL" x="0" y="11" width="1" height="1" transform="rotate(270,0.5,11.5)" />
 <use class="bs_m6" xlink:href="#tS" x="1" y="11" width="1" height="1" transform="rotate(90,1.5,11.5)" />
 <use xlink:href="#tS" x="1" y="11" width="1" height="1" />
 <use xlink:href="#INT" x="1" y="11" width="1" height="1" />
 <use class="bs_rac" xlink:href="#tC" x="2" y="11" width="1" height="1" transform="rotate(90,2.5,11.5)" />
 <use class="bs_m6" xlink:href="#tS" x="2" y="11" width="1" height="1" transform="rotate(90,2.5,11.5)" />

[編集] アイコンの手動配置

シンボル配置部分で use タグ内の位置指定を変更することでアイコンを（小数点単位で）移動させることができます。widthやheightを変更してアイコンを拡大、縮小できます。また use タグを新たに追加することでシンボルを新たに追加することもできます。この時使用するシンボルの定義は、bs2svg の実行時に -d オプションをつけることで取り込んでください。

Image:Paris_Metro_14_bs_3.svgでは以下のような変更をしています。

6号線トンネルの入口を0.5マス右に移動
サン・ラザール駅、リヨン駅、セーヌ川のアイコンを1.4倍に拡大
6号線に高架橋始点のアイコンを追加

[編集] 線路のpathによる描画

線路の描画は、SやCといったシンボルを配置する以外にも、path タグを使って描画することで、より自由な曲線を描くことができます。

なおシンボル定義部分と配置部分では倍率が異なるため、スタイル指定をしないとそのままでは線の幅が500倍になってしまいます。このため Image:Paris_Metro_14_bs_3.svg では bs_m14P, bs_m6P, bs_racP の3つのクラスを追加しています。

[編集] トンネルの描画

トンネル部分をpathを使って描くには次のようにします。

通常の幅で点線を描画。stroke-dasharray は 0.1 とし、必要に応じて stroke-dashoffset をつける。
重ねて同じpathで細い白線を描画する。stroke-widthは 0.04。

[編集] 画像のライセンス

アイコンの配置に創作性があると認められる場合には、bs2svgの出力した画像は元のWikiソースの二次的著作物となり、元の文書のライセンスに従う必要があります。Wikipediaの記事（GFDL）がソースである場合には、作成した画像もGFDLとし、画像ページで出典として元の記事へのリンクを含めなければなりません。

See also ebooksgratis.com: no banners, no cookies, totally FREE.