SVG 代碼解析：XML 格式的向量圖形，xmlns 定義命名空間，壓縮單行無需換行

這是什麼？

SVG (Scalable Vector Graphics) 代碼，本質是 **XML 文本**，描述向量圖形（路徑、形狀、顏色），瀏覽器直接渲染為圖片。副檔名 `.svg`，`Content-Type: image/svg+xml`。

代碼結構拆解

<svg xmlns="https://www.w3.org/2000/svg" width="54" height="100">
  <path fill="#EBEEEF" d="M6 0h42c3.312 0 6 2.688 6 6v88c0 3.312-2.688 6-6 6h-42c-3.312 0-6-2.688-6-6v-88c0-3.314 2.687-6 6-6z"/>
  <path fill="#1C3C50" d="M0 10h54v80h-54v-80z"/>
  <path fill="#24485F" d="M4 14h46v72h-46v-72z"/>
  <path fill="#BCC3C8" d="M13 93h28v4h-28v-4z"/>
  <path fill="#BCC3C8" d="M13 3h28v4h-28v-4z"/>
  <path fill="#1C3C50" d="M46 3c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm-37 2c-.553 0-1 .448-1 1 0 .553.447 1 1 1s1-.447 1-1-.447-1-1-1zm-3 0c-.553 0-1 .448-1 1 0 .553.447 1 1 1s1-.447 1-1-.447-1-1-1z"/>
</svg>

• `xmlns="https://www.w3.org/2000/svg"`：XML 命名空間宣告，告訴解析器「這是 SVG 標準標籤」，避免與其他 XML 標籤衝突。**必須保留**，否則瀏覽器可能當作純 XML 文本不渲染。
• `width="54" height="100"`：畫布預設尺寸（單位像素），可被 CSS 覆蓋。
• ``：核心繪圖指令。`d` 屬性包含路徑命令：`M`(move), `L`(line), `H`/`V`(水平/垂直), `C`/`S`/`Q`/`T`(貝塞爾曲線), `Z`(closepath)，座標數字緊湊排列。
• `fill="#RRGGBB"`：填充顏色。

為什麼單行無換行？

• 檔案體積最小化**：移除所有空白字元（換行、縮進、空格），傳輸更快。
• SVG 是 XML**，XML 解析器**不依賴換行**解析標籤結構，單行完全合法。
• 開發階段建議**美化格式**（Prettier/IDE Format）便於閱讀維護；生產構建時**壓縮單行** (`svgo`、`svgmin`)。

<img src="icon.svg" alt="icon" />
<!-- 或 CSS 背景 -->
.icon { background-image: url('icon.svg'); }
<!-- 或內聯 -->
<div> 這裡貼上完整 SVG 代碼 </div>