翻譯後的 SVG 與 svg.style = "flat"

當網頁應用程式嵌入特定地區的 SVG 插圖或圖表，並在執行階段透過地區代碼引用它們時使用。

設定

"features": {
  "translateSVG": true
},
"svg": {
  "sourcePath": "images",
  "outputDir": "public/assets",
  "style": "flat"
}

translate-svg 會讀取 images/ 下的每個 .svg，並為每個地區寫入一個檔案：

public/assets/
├── dashboard.en-GB.svg
├── dashboard.de.svg
├── dashboard.fr.svg
└── dashboard.es.svg

應用程式參考

<img src={`/assets/dashboard.${locale}.svg`} alt="Dashboard diagram" />

原始檔版面配置建議

將原始 SVG 檔案與輸出目錄分開存放。使用 sourcePath: "images" 和 outputDir: "public/assets" 時，這兩個目錄是分離的。切勿將兩者設定為同一目錄。

實作範例

examples/nextjs-app — ai-i18n-tools.config.json 中的 svg 區塊 (sourcePath: "images"、outputDir: "public/assets"、svg.style = "flat")；來源 translation_demo_svg.svg；public/assets/ 下的每個地區設定輸出 (例如 translation_demo_svg.de.svg)；page.tsx 中的執行階段 URL (/assets/translation_demo_svg.${locale}.svg)。

---