meta data for this page

SVG

數位製圖!向量不失真!

優點

  • 支援 CSS
    • 所以可以設定 class,迅速批次套用樣式(字型啦、顏色啦)到眾多物件!
  • 支援 font-family fallback!
  • 透過數字,精準定位物件!

Tips

<text> 內換行
每行用一個 <tspan>x= 都設為 <text>x1,然後設 dy=1.4em 之類的1)

插入超連結
在物件外面包上:<a href="…"> 即可
href - SVG: Scalable Vector Graphics | MDN

舊做法:

Hyperlinks/Anchors Inside SVG Graphics ← Alligator.io

編輯器

線上:

  • Method Draw SVG Editor 好用耶!<<大眼>>
    • 原始碼編輯模式乾淨,不會亂加多餘 SVG 碼,簡直像是 SVG 界的 BlueGriffon 啊啊啊~<<大眼>>
      • 透過 Fx/Wx 的 GhostText,甚至還可餵到 Sublime Text 進行更方便的編輯!
      • 然後我也用瀏覽器的 Stylish 放大了原始碼編輯框的字型、設定更好看的字型
    • 圖形介面也還是很方便
    • 這樣比 Google Docs 的 Draw 還好用啦!:D
    • 20201002 不過鑒於它有時候還是有點 bug 亂改原始碼,比方說 有時新增物件卻導致背景圖樣的長寬被改掉有時只是更動物件位置,原始碼的 attribute 卻通通都被大搬風 ∴今天也搭配檔案比較工具 Sublimerge,另存暫時檔後找到被改壞的部分,再把真正需要改的部分手工更新到檔案裡即可

      20201003 或是還有一個方法:同時把 SVG 原始碼直接開 Sublime Text 編輯,同時開一個瀏覽器分頁看 SVG 圖形、inspect 部件,兩相對照,就不必大海撈針,並且改好以後也可以馬上 reload 瀏覽器分頁看效果。以後,在密集製圖階段就用 Method Draw;有雛形以後要用 Git 追蹤版本時,可能就盡量用純文字直接編輯原始碼了

      20201009 而且今天還發現,它對 <text>、<tspan> 位置的解讀,也與 Firefox 等瀏覽器都不一致,所以對於文字的定位方面,可能也需要多借重瀏覽器了。

  • Janvas:很強,更強,但進入門檻高得多

App:

  • InkScape:雖然是重量級向量繪圖軟體,但似乎反而不是完整支援 SVG 的語法耶
  • Sublime Text 搭配網頁瀏覽器的網頁工具箱

參考

討論區

輸入您的意見. 允許使用維基語法:
F Y B J J