# 在網頁上，以 SVG 作為影像地圖

### 什麼是 SVG
[SVG](https://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD%A2) 是一種國際標準的向量圖格式，我們通常會用 [Inkscape](https://inkscape.org/zh-hant/) 這套軟體來編輯 SVG。同學可以把他們兩個想像成 **ai 檔** 跟 **Adobe Illustrator** 之間的關係，不過 SVG 最厲害的地方是它可以放在網頁上使用，甚至能與程式互動。

## 安裝 Inkscape
Inkscape 是一套開源的向量繪圖軟體，建議大家裝 [0.92 版](https://inkscape.org/release/inkscape-0.92/?latest=1)，比較穩定沒有 bug。
※ [官方載點（Windows）](https://inkscape.org/zh-hant/release/0.92.5/windows/)

## 編輯 SVG
### 在 AI 匯出 SVG
- 如果你是用 Illustrator 畫的圖，[可以參考這篇，將 ai 檔匯出成 SVG](https://helpx.adobe.com/tw/illustrator/how-to/export-svg.html)

### 在 SVG 中加入超連結

1. 用 Inkscape 開啟該 SVG 檔。
4. 點選目標物件，然後按右鍵 → 建立連結；在「參考」及「標題」欄位輸入相關數值

### 將 SVG 上傳到網站後台
1. 到網站的文章編輯頁面，新增「圖片」段落；在「SVG」欄位上傳剛剛的圖檔