[SVG] SVG 入門 ： 基本圖形繪製

SVG 可縮放式向量圖形 ( SVG ， Scalable Vector Graphics )

是前端工程師不可錯過得技術，不只因 圖片向量 使圖片不會因放大縮小而失真外，SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖 從簡單的直線、曲線、圓形、矩形，到複雜的任意路徑、填充樣式、座標轉換與動畫，我們可以利用標籤的形式來完成

而且因 SVG 的圖片是由 標籤 組成，所以我們可以對圖片裡的任何物件進行操作，也可以配合 Css 與 javaScript 達到更多的效果與互動

個人認為 實做 是最好的學習途徑， 我們可以重最簡單的圖形繪製開始:

SVG 標籤

在網頁中插入 SVG 圖形

<svg>
.......
</svg>

接下來我們就可以直接在 SVG 標籤裡，利用它所提供的標籤做出一些基本圖形

基本圖形

• 路徑
• 直線
• 矩形
• 圓形
• 橢圓形
• ….

光是運用以上的標籤，就可以製作出一些簡單的圖形了

上一下個人作品：

See the Pen SVG IKE by SkyRoxas (@SkyRoxas) on CodePen.

補充 :

個人在製作的過程中，可能會碰到的問題

不知道要當前位置的座標位置 ：

可使用此 套件 來協助

不知道 貝茲曲線 概念 ：

可查看此 文章