1. 描述編輯
有的時候我們需要自定義地圖，本文提供基本的基於SVG的矢量圖制作教程；
2. 准備工作編輯
注：如果繪圖功底很強無需地圖模板也可以，SVGDeveloper1.0和SVG-Edit2.8二選一即可，Inpaint可選擇性安裝；
另：教程內用到的軟件版本，去水印軟件——Inpaint6.2，繪制矢量地圖軟件SVGDeveloper1.0或者SVG-Edit2.8；如遇其他版本有操作不一致的地方請自行注意。
3. 去除地圖模板上的水印(可跳過)編輯
一般我們找到的圖片都會存在字或者各種水印，為了操作界面清晰，可以將圖片上的其他文字去除
3.1 導入圖片
點擊
文件>打開，選擇jilin.png
根據去除水印處的區域大小，調整魔術筆大小，然后選擇需要去除水印的區域，最后點擊處理圖像
依次去除圖片上其他需要去除水印的區域，處理完成后，點擊
文件>另存為吉林.jpg
3.2 調整圖片大小
為了適應瀏覽器預覽時的大小，我們可以修改下圖片尺寸
打開Windows自帶的畫圖工具，使用其他如ps軟件均可。點擊
主頁>重新調整大小，保持縱橫比，將高度調至合適高度，這里調整為530px
4. 方法一、SVGDeveloper編輯
打開SVGDeveloper，如果沒有激活會提示需要激活，可以咨詢激活，或者使用試用版，選擇試用30天，點擊繼續即可
4.1 新建svg文件
點擊
file>new
，選擇svg，點擊ok
修改svg畫布大小，調至和要使用的圖片模板一樣大小
4.2 插入圖片模板
點擊工具欄上的
修改插入的圖片模板的坐標和寬度高度
調整好圖片模板的位置和大小后，點擊一下左上角的黑色箭頭即可
4.3 扣取區域路徑
為了輪廓更清晰、准確，將背景放大到500%
選中
注：如果不去掉填充顏色的話，摳圖的時候會被填充色覆蓋區域，影響摳圖
使用鋼筆，在圖片上選取路徑，逐個點。如果點錯的話就ctrl+z 撤銷幾步。點取過程中可以使用鼠標滾輪，和下面的滾動條調整顯示區域。
然后在結束的時候，
鋼筆顯示圈，再點，這樣就完成了一個封閉路徑。在path 屬性路徑 最后會有一個Z這樣表示結束
4.4 添加區域文字（可跳過）
注：添加區域文字是為了地圖標識區域對應的市，這一步可以跳過，實際在我們的設計器導入后預覽時不會顯示區域文字，設計器里可以通過標簽來顯示對應的市
選中
text 工具然后在對應的位置上點擊后輸入文字
上方會出現文本框的代碼
<text>這里也可以修改文本框內的文字，或者文本框的位置
4.5 添加id屬性
在代碼部分可以看到，路徑和文本框內的id，根據區域名修改
之后就是逐個摳取各個區域，然后添加文字及id屬性
所有區域都完成后，把比例縮小到100%
4.6 刪除背景模板
繪制完成后，我們把背景模板刪除，這里直接從svg代碼將
<image>這一行刪除即可
最后我們可以根據配色方案修改區域的背景色或者邊框顏色
制作完成后，保存為吉林.svg，這樣我們的矢量地圖就繪制完成了
4.7 導入制作完成的svg地圖
5. 方法二、SVG-Edit編輯
可以直接打開網頁中的示例在線模板，或者將源碼下載到本地，打開
svg-editor.html即可
5.1 插入圖片模板
點擊
Import Image導入背景模板
調整圖片的位置，可以使用工具欄的x、y和寬度高度來修改
5.2 扣取區域路徑
為了輪廓更清晰、准確，將圖片放大一些；可以通過左下角的放大鏡或者鼠標的滾輪來放大縮小圖片，同時為了摳圖清楚，可以設置線條的顏色為藍色，寬度為2，背景色為空
點擊
path tool，在圖片上選取路徑，逐個點。
最后形成封閉的路徑即可。
5.3 添加區域文字（可跳過）
注：添加區域文字是為了地圖標識區域對應的市，這一步可以跳過，實際在我們的設計器導入后預覽時不會顯示區域文字，設計器里可以通過標簽來顯示對應的市
點擊
文本框A，然后在合適的位置上點擊后輸入文字
5.4 修改id屬性
修改區域和文本框的id
之后就是逐個摳取各個區域，分別給區域加文字，然后給路徑和文本框添加id屬性
所有區域都完成后，把比例縮小到100%
5.5 將代碼另存為
將制作好的svg地圖的代碼拷貝到本地的編輯器中，將文件另存為
后綴為svg格式的地圖，吉林2.svg
5.6 刪除背景圖片
將背景圖片部分的代碼
<image>刪除，然后保存即可
最后我們可以根據配色方案修改區域的背景色或者邊框顏色，然后將修改后的代碼保存到svg文件中即可
這樣我們的矢量地圖就繪制完成了。
5.7 導入制作完成的svg地圖
自定義地圖，導入剛剛繪制的吉林2.svg
