5-3. 符合 RWD 的影像地圖
使用 HTML5 SVG 的方法來設計符合 RWD 的影像地圖
參看 TSweb 的範例
參看 w3schools SVG Graphics 的簡介 參看 w3schools SVG 專題教程
參看 RUNOOB 菜烏教程 SVG 的簡介 參看 RUNOOB 菜烏教程 SVG 專題教程
TS操作說明：
Illustrator 置入圖片 > 將工作區域調整成與圖片一樣大
運用矩形工具、鋼筆工具 .... 繪製區域的輪廓
繪製好輪廓後 > 將外框轉換成填色 > 準備出圖 (不需要出圖的部份隱藏起來)
勾選要出圖的工作區域 > 選擇好存檔位置 > 選擇 SVG 格式 > 轉存工作區域
開新檔案測試符合 RWD 的影像地圖設計 > 安排好 HTML 部份，參考如下圖：
調整設計 CSS 部份，參考如下圖：
設計 JS 部份，參考如下圖：
也可以搭配使用 BS5 的 Modal 元件，參考如下圖：
網頁用圖的各種格式
| 考量依據 | gif | jpg | png8 | png24 不勾透明 |
png24 勾透明 |
|---|---|---|---|---|---|
| 鏤空 | V 無半透明 |
X | V 可半透明 |
X | V 可半透明 |
| 色彩數 | 256索引色 | 全彩 | 256索引色 | 全彩 | 全彩 |
網頁用圖的 SVG 格式
SVG 可縮放向量圖形的 wiki 介紹
使用 Illustrator 軟體設計，可以參看前一節的範例介紹
網頁用圖的 WebP 格式