Translated SVG with svg.style = "flat"

Use when a web app embeds locale-specific SVG illustrations or diagrams and references them by locale code at runtime.

Config

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

translate-svg reads every .svg under images/ and writes one file per locale:

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

App reference

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

Source layout recommendation

Keep source SVGs separate from the output directory. With sourcePath: "images" and outputDir: "public/assets" the two directories are distinct. Never set both to the same directory.

Implementation example

examples/nextjs-app — svg block in ai-i18n-tools.config.json (sourcePath: "images", outputDir: "public/assets", svg.style = "flat"); source translation_demo_svg.svg; per-locale outputs under public/assets/ (e.g. translation_demo_svg.de.svg); runtime URL in page.tsx (/assets/translation_demo_svg.${locale}.svg).

---