地図をSVGに描き出す

下絵に沿って地図を描く

• 下絵をテンプレートにする
• 線の幅と色を決める
• 枠線に合わせて裁ち落としをするため、少しはみ出るように描画する
• 枠線の大きさでクリッピングマスク作成
• SVG形式で書き出す

下絵を配置

• 「ファイル」→「配置」→「テンプレート」のみにチェックを付けて選択した画像を配置

レイヤー１に描画

• クリッピングマスクをするとレイヤーがまとめられるので、不都合がなければレイヤー分けをしないで描画します
• 必要な長方形の形状より外側まで描画する
• 線幅は、３種類まで

枠線とマスク

• 枠線を必要な大きさに描画する
• レイヤーをまたいでそのままの大きさを「レイヤー１」に移動コピーする（同じ大きさの長方形が、各レイヤーに配置してある状態）

• クリッピングマスク作成

枠線でアートボード作成

• 「オブジェクト」→「アートボード」→「選択オブジェクトに合わせる」

SVG形式で保存

• この段階で、文字と線をアウトライン処理をしない
• 保存するときの「SVGオプション」で、「文字：アウトラインに変換」を選択する

SVG形式で保存するときのポイント

• アンカーポイントを減らす
• 文字をIllustratorドキュメント上でアウトライン化すると、アンカーポイントが増えます
• 使用する大きさのアートボードにする

HTMLで表示

• SVGをクリックする必要があれば、img要素で挿入（モーダルウィンドウの場合）
• それ以外は、object要素で挿入