日本地図(SVG)から一部抜き出して表示するときの位置がおかしい

Question

ウィキペディアにある日本地図から北海道だけ抜き出して見たのですが、日本全体分の海の領域に北海道が右上にぽつんと表示される状態が解消できません。

どこを変えれば北海道全体がちょうど良く収まる矩形に変更できるのでしょうか？

以下のデータです。

<svg width="1024" height="1024" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <title>日本地図</title>
  <desc>Author: Lincun</desc>
  <rect x="0" y="0" width="1024" height="1024" fill="lightsteelblue" />
  <defs>
    <g id="ground" stroke-linejoin="round" stroke-width="1.1" stroke="black">
      <g fill="#bbee66">
        <path d="M605 250l-1 5-3 1v-9l6-2zM634 271l-1-11-4-7-5-1-2-5-4-1-2-5 4-8-2-11 2-3 9-2 6-9 3 4 2-1 4-9 6-5-10-14 1-7 7-2 13 10 11-3v3l7 
	3 5-3 6-9-6-25 3-5 7-3 4-6-1-23 4-8 1-10-3-18-8-19 3-9-1-6 2 3 5-1 6-7 26 27 8 13 16 17 29 19 29 5 1 4 5 5h19l22-27 2 5-10 23v10l3 6 10 3-2 2 1-3h-6l5 
	12 6 7 4 1 7-8 7-1-10 8-2 7-17 3-2 6-4 5h-5l-2-2 1-2-3-1-3 6 3 2-15 1-8-3-15 8-14 16-9 14-3 9 1 15-2 8-14-11-23-9-28-17-13-2 3-3-15 8-16 16-3-3h4l-5-1-2-6-8-8-11 
	1-5 7-3 10 1 4 12 8h10l9 12 9 3 2 3-6 5-4 2-9-4-3 2v-4l-3-1-2 5-7 4v9l-8 4-3 5-7-3-3-6 1-9zM672 58l2-3 4 2 2 5-4 3-4-3zM666 45v-2l2 2-1 10-3-10zM970 
	27l-2-4h-2l-2 4 2 6-1 3-5 2-2 7-7-1 1 7-10 9v4h-6v2l4 2v4l-3 3-4-1v5l-3-3 1 5-3 7 4 1 5-9 5-1 5-10 10-9 2-10 5 3 6-2 15-17 13-9 9-2 1-3-3-4 3-4-5-2-6 2-12 18-11 
	2zM891 109l5-6 8-2 5-7 3 1 3-6-10 3-8-5-3 2-4 10-9 15v3l-14 15 2 7 5-1v4l1-13 8-5 1-5h3l1-7zM923 135l12-10-5-2-4 3 1 1-7 2v4l2-1zM901 152l4-5-7 2zM892 
	156l2-3-4 1z" />
      </g>
    </g>
  </defs>
  <g>
    <clipPath id="main">
      <path d="M512 0h512v1024h-1024v-512a512 512 0 0 0 512 -512z" />
    </clipPath>
    <use xlink:href="#ground" x="0" y="0" clip-path="url(#main)" />
    <clipPath id="sub">
      <path d="M-360 984h512a512 512 0 0 1 -512 512z" />
    </clipPath>
    <use xlink:href="#ground" x="360" y="-984" clip-path="url(#sub)" />
  </g>
</svg>

Answer 1

これは北海道の形自体が、四角の中で絶対座標で右上に描画するデータになってるようですね。
つまり真ん中に描画させるには、id="ground"の中身を全部書き換える必要があります。
ちょっと現実的じゃないですね。

svgが使えるソフトなどで読み込み、移動させて保存するのはどうでしょう。

Illustratorや、Inkscapeなど使ってみてはいかがでしょうか。
Inkscapeはxml形式になちゃうかもしれませんが。

Comments

[menshan]

ご紹介いただいた Inkscape (無料)を早速インストールして変換してみました。
メニューの中にそのものズバリの
「ファイル」
→「ドキュメントのプロパティ」
→「ページサイズをコンテンツに合わせて変更」
という設定があり、これで保存すると希望の状態にできました。

ＳＶＧファイルで保存すると、内容も元の形式の数値部分が変更されているだけの状態で何も問題ありません。

最高のアドバイスありがとうございます。

[ogaaaan]

おー良かった良かった！

svgはバージョンが1.0と1.1が混在してる現状なので、そこらへんも気をつけてくださいね！！

ではでは！