meta data for this page
  •  

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
svg [2020/09/21 16:01]
ghsrobert [編輯器] 更強但沒那麼好用的兩個 		svg [2022/11/18 23:23] (目前版本)
ghsrobert ↷ 鏈結因頁面移動而自動修正
行 7: 行 7:
   * 支援 font-family fallback！   * 支援 font-family fallback！
   * 透過數字，精準定位物件！   * 透過數字，精準定位物件！
 +
 +===== Tips =====
 +<div issue>''<text>'' 內換行
 +每行用一個 ''<tspan>''，''x='' 都設為 ''<text>'' 的 ''x1''，然後設 ''dy=1.4em'' 之類的(([[https://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html|4. Multiline SVG Text - SVG Text Layout [Book]]]))</div>
 +<div issue>插入超連結
 +在物件外面包上：''<a href="...">'' 即可
 +☞ [[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href|href - SVG: Scalable Vector Graphics | MDN]]
 +<div x>
 +舊做法：
 +  * ''<a>'' 用 ''xlink:href'' 
 +  * SVG 開頭要宣告 ''xmlns:xlink="http://www.w3.org/1999/xlink"''
 +
 +☞ [[https://alligator.io/svg/hyperlinks-svg/|Hyperlinks/Anchors Inside SVG Graphics ← Alligator.io]]</div>
 +</div>
  
 ===== 編輯器 ===== ===== 編輯器 =====
 線上： 線上：
   * ⭐ [[https://editor.method.ac/|Method Draw SVG Editor]] 好用耶！<<大眼>>   * ⭐ [[https://editor.method.ac/|Method Draw SVG Editor]] 好用耶！<<大眼>>
-    * 原始碼編輯模式乾淨，不會亂加多餘 SVG 碼，簡直像是 SVG 界的 [[:BlueGriffon]] 啊啊啊～<<大眼>>+    * 原始碼編輯模式乾淨，不會亂加多餘 SVG 碼，簡直像是 SVG 界的 [[web-designing:bluegriffon]] 啊啊啊～<<大眼>>
       * 透過 Fx/Wx 的 GhostText，甚至還可餵到 Sublime Text 進行更方便的編輯！       * 透過 Fx/Wx 的 GhostText，甚至還可餵到 Sublime Text 進行更方便的編輯！
       * 然後我也用瀏覽器的 Stylish 放大了原始碼編輯框的字型、設定更好看的字型       * 然後我也用瀏覽器的 Stylish 放大了原始碼編輯框的字型、設定更好看的字型
     * 圖形介面也還是很方便     * 圖形介面也還是很方便
     * 這樣比 Google Docs 的 Draw 還好用啦！:D     * 這樣比 Google Docs 的 Draw 還好用啦！:D
 +    * <div tip>/^20201002^/ 不過鑒於它有時候還是有點 bug 亂改原始碼，比方說 <span ex>有時新增物件卻導致背景圖樣的長寬被改掉</span>；<span ex>有時只是更動物件位置，原始碼的 attribute 卻通通都被大搬風</span> ∴今天也搭配檔案比較工具 <span ex>Sublimerge</span>，另存暫時檔後找到被改壞的部分，再把真正需要改的部分手工更新到檔案裡即可
 +
 +/^20201003^/ 或是還有一個方法：同時把 SVG 原始碼直接開 Sublime Text 編輯，同時開一個瀏覽器分頁看 SVG 圖形、inspect 部件，兩相對照，就不必大海撈針，並且改好以後也可以馬上 reload 瀏覽器分頁看效果。以後，在密集製圖階段就用 Method Draw；有雛形以後要用 Git 追蹤版本時，可能就盡量用純文字直接編輯原始碼了
 +
 +/^20201009^/ 而且今天還發現，它對 ''<text>、<tspan>'' 位置的解讀，也與 Firefox 等瀏覽器都不一致，所以對於文字的定位方面，可能也需要多借重瀏覽器了。
 +</div>
   * Janvas：很強，更強，但進入門檻高得多   * Janvas：很強，更強，但進入門檻高得多
  
 App： App：
   * InkScape：雖然是重量級向量繪圖軟體，但似乎反而不是完整支援 SVG 的語法耶   * InkScape：雖然是重量級向量繪圖軟體，但似乎反而不是完整支援 SVG 的語法耶
 +  * Sublime Text 搭配網頁瀏覽器的網頁工具箱
 +
 +===== 參考 =====
 +  * [[https://www.oxxostudio.tw/articles/201410/svg-tutorial.html|SVG 完整教學 31 天 - OXXO.STUDIO]]
  
 {{tag>感謝_神 繪圖 檔案格式}} {{tag>感謝_神 繪圖 檔案格式}}