實用創作流程
SVG 不隨縮放的描邊：以三種尺寸比較圖示
把大型插畫中的杯子圖示縮小放進工具列，輪廓可能幾乎看不見。保留同一條 SVG 路徑，並不一定能維持相同的視覺線條重量。
我們以虛構品牌 Cedar Cup 的杯子輪廓，比較預設縮放與 non-scaling-stroke 在 24、48、96 CSS 像素下的表現。Ciyo 建立了原始檔與瀏覽器繪製的預覽。這項比較有助於選擇行為，但不會自動讓細節豐富的圖示適合小尺寸顯示。
先計算預期線寬
這個 SVG 使用 100×100 的 viewBox，五條路徑均設為 stroke-width=2。在等比例縮放且沒有額外變形時，預設螢幕線寬是 2 × 繪製尺寸 / 100，分別得到 0.48、0.96、1.92 CSS 像素。
為描邊路徑設定 vector-effect="non-scaling-stroke"，表示要求描邊抵抗幾何縮放。在本次比較中，目標線寬維持為 2 CSS 像素。SVG 座標系統規格定義了這種行為；表格僅描述我們採用的特定尺寸。
| 圖示尺寸 | 預設描邊 | 不隨縮放的描邊 |
|---|---|---|
| 24×24 CSS 像素 | 0.48 CSS 像素 | 2 CSS 像素 |
| 48×48 CSS 像素 | 0.96 CSS 像素 | 2 CSS 像素 |
| 96×96 CSS 像素 | 1.92 CSS 像素 | 2 CSS 像素 |
要求兩列使用完全相同的幾何形狀
在 Ciyo 建立新專案，要求產生包含六個行內圖示的比較 HTML 頁面。不同版本的每條路徑都應相同，只更改 vector-effect。如果代理重新繪製小圖示，你就在同時比較兩項設計決策。
要求提供可編輯的 SVG 與 HTML 程式碼。在我們的工作階段中，這些原始格式先保存在代理工作區，隨後貼到對話中；畫布接受了 PNG 預覽。連結中的範例保留了交付的圖示幾何形狀與瀏覽器量測值。
為虛構品牌 Cedar Cup 建立可下載的 HTML 比較頁面，使用簡單的行內杯子輪廓 SVG，設定 viewBox="0 0 100 100" 與 stroke-width="2"，以 24、48、96 CSS 像素顯示。比較預設縮放描邊與每條描邊路徑上的 vector-effect="non-scaling-stroke"。兩個版本的路徑幾何必須相同，不要填色。說明 non-scaling-stroke 維持螢幕線寬，但不保證小尺寸的視覺品質。交付修正後的獨立 SVG、比較 HTML 與 PNG 預覽，將 PNG 放上畫布。只使用程式碼工具，不使用付費圖片或影片產生器。透過程式驗證幾何形狀與尺寸。這是虛構的介面圖示示範。在實際預覽中判斷小圖示
實際預覽中，預設描邊那列的線條隨尺寸增大而更清晰；不隨縮放的描邊在 24 像素時輪廓較重。最小尺寸的蒸氣細節擠在一起。固定線寬可能對有限空間而言過於粗重。
Ciyo 在 Chromium 中繪製比較頁面，並回報預期螢幕線寬。我們保留 HTML，另外檢查六個 SVG 顯示框與五條路徑的幾何形狀。計算值描述的是幾何關係；經過反鋸齒處理的邊緣像素仍需目視判斷。
細節擠合時改用小尺寸專用圖形
工具列圖示應簡化縮小時閉合的細節，並以實際 CSS 尺寸檢查。維持兩像素線寬，不會讓蒸氣線條之間憑空多出空間。決定縮放行為後，可以考慮減少路徑，或另外設計小尺寸版本。
檢查 24 像素下的視覺重量
將互動意義與線寬分開考量。替控制項提供無障礙名稱，並在實際主題下確保足夠對比。這張預覽用於視覺比較，並非對完整介面的無障礙稽核。
放置與匯出後再檢查
將圖示放入實際元件，使用真正的 CSS 尺寸與變形。檢查淺色及深色主題。在把結果作為最終素材之前，確認接收檔案的編輯器或匯出工具會保留 vector-effect。
這個範例比較的是保存在 Chromium 頁面中的等比例縮放，不能證明所有向量編輯器、印表機或瀏覽器的表現。選擇適合元件的版本，並在設計交接時保留對應原始檔。
常見問題
non-scaling-stroke 能讓所有細節維持清晰嗎？
不能。它控制描邊行為。狹小的內部空隙、緊密間距與反鋸齒處理仍可能讓細節難以辨認。
為什麼 24 px 時預設線寬只有 0.48 px？
這個範例使用 100 單位的 viewBox，兩單位的描邊隨等比例縮放乘以 24/100。
所有圖示都應該使用不隨縮放的描邊嗎？
應在檢查實際尺寸後選擇。固定線寬可能對小圖示而言太粗重。
在真正使用的位置比較圖示
先在 Ciyo 中完成一個經過檢查的範例。保留原始檔，在自己的專案中使用前檢查匯出結果。