利用者:Matsukaze/bs2svg
このページではWikipedia:経路図テンプレートを利用した経路図を1枚のSVG画像に変換する方法について説明しています。
ご意見、ご感想はこのページのノートまでお願いします。
自動変換
[編集]
[1] から bs2svg.pl を入手してください。詳しい使い方はリンク先を参照してください。
下記のようなWikiソースを右のような画像に変換します。
<pre.raw style="border:0px;overflow:auto;"> {| {{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|tWSTR|||[[サン・マルタン運河]]}} {{BS|tINT||[[リヨン駅|ガール・ド・リヨン]]}} {{BS3||tABZgl|tSTR+r|||←[[パリメトロ6号線|6号線]]→}} {{BS3|tSTRaq|tSTRq|O2=tINT|tABZ3lf||[[ベルシー駅|ベルシー]]}} {{BS|tSTR}} {{BS|tBHF||[[クール・サンテミリオン駅|クール・サンテミリオン]]}} {{BS|tWSTR|||[[セーヌ川]]}} {{BS|tINT||[[ビブリオテーク・フランソワ・ミッテラン駅|ビブリオテーク・フランソワ・ミッテラン]]}} {{BS|tSTR}} {{BS|tBHF||[[オランピアード駅|オランピアード]]}} {{BS|tKDSTe||トルビアック・ナショナル車両基地}} |} |}
注意
[編集]- 変換スクリプトの対応していないアイコンは黒の四角で表示されます。下記を参考に手動で修正してください。
- 環境によってはウムラウトを含むアイコン名が正常に処理されないことがあります。この場合はウムラウトをはずした綴り（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 
| |
| BS2+r | tBS2lf | BSとBS2などの接続用 | 同（トンネル内） | BS2+r 
|
tBS2lf | |
| TN | TN2 | トンネル（大） | トンネル（小） | TUNNEL1 
|
TUNNEL2 
| |
| CROSS | tCROSS | クロスオーバー | 同（トンネル内） | ÜST 
|
tÜST 
| |
| LUECKE | 中断 | LUECKE 
|
||||
| HST | DST | 小駅 | 貨物駅、車両基地など | HST 
|
DST 
| |
| ACC | ACC2 | バリアフリー駅 | 同（小） | ACC 
|
UTurmBHFAo | |
| SBHF | Sバーン駅 | SBHF 
|
||||
| INT | INTl | 乗換駅 | 乗換駅（左端） | INT 
|
INTl | |
| INTm | 乗換駅（中間） | INTm 
|
||||
| CPI | CPIl | 対面乗り換え | 対面乗り換え（端） | CPIC 
|
CPICl 
| |
| 施設 | E | El | 直線高架橋 | 高架橋（左半分） | hSTR 
|
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 | 一方通行 | 一方通行（トンネル内） | STRf 
|
tSTRf 
|
| KMW | SUMMIT | キロ程変更 | 峠 | KMW 
|
STRSummit | |
| GRENZE | eGRENZE | 国境 | 境界 | GRENZE 
|
eGRENZE 
| |
| 略記 | Cul | tCul | STRrf
|
tSTRrf
| ||
| Cur | tCur | STRlf 
|
tSTRlf 
| |||
| Cld | tCld | STRrg 
|
tSTRrg 
| |||
| Crd | tCrd | STRlg 
|
tSTRlg 
| |||
| BS2+l | tBS2rf | BS2+l 
|
tBS2rf 
| |||
| BS2l | tBS2lg | BS2l 
|
tBS2lg | |||
| BS2r | tBS2rg | BS2r 
|
tBS2rg | |||
| 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 - ライトレール、閉鎖
これらの定義を手動で編集することで色や幅を変更できます。また新たなクラスを追加することでラインカラーなどによる色分けや線の幅による強調などができます。
以下はFile:Paris_Metro_14_bs_2.svgの15行-20行です。デフォルトの色を#652c90（14号線ラインカラー）に、幅を150pxに変更し、さらに6号線用（bs_m6）と連絡線用（bs_rac）のクラスを追加しています。
<pre.raw style="border:0px;overflow:auto;"> .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 タグ内でこれらのクラスを指定します。
File:Paris_Metro_14_bs_2.svg 85行 - 95行:
<pre.raw style="border:0px;overflow:auto;"> <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 オプションをつけることで取り込んでください。
File:Paris_Metro_14_bs_3.svgでは以下のような変更をしています。
- 6号線トンネルの入口を0.5マス右に移動
- サン・ラザール駅、リヨン駅、セーヌ川のアイコンを1.4倍に拡大
- 6号線に高架橋始点のアイコンを追加
線路のpathによる描画
[編集]線路の描画は、SやCといったシンボルを配置する以外にも、path タグを使って描画することで、より自由な曲線を描くことができます。
なおシンボル定義部分と配置部分では倍率が異なるため、スタイル指定をしないとそのままでは線の幅が500倍になってしまいます。このため File: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とし、画像ページで出典として元の記事へのリンクを含めなければなりません。