Übersetzte SVG mit svg.style = "flat"

Verwenden Sie dies, wenn eine Web-App sprachspezifische SVG-Illustrationen oder -Diagramme einbettet und zur Laufzeit über den Locale-Code darauf verweist.

Konfiguration

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

translate-svg liest jede .svg unter images/ und schreibt je eine Datei pro Locale:

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

App-Referenz

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

Empfohlene Quellstruktur

Halten Sie die Quell-SVGs getrennt vom Ausgabeverzeichnis. Mit sourcePath: "images" und outputDir: "public/assets" sind die beiden Verzeichnisse unterschiedlich. Legen Sie niemals beide auf dasselbe Verzeichnis fest.

Implementierungsbeispiel

examples/nextjs-app – svg-Block in ai-i18n-tools.config.json (sourcePath: "images", outputDir: "public/assets", svg.style = "flat"); Quell- translation_demo_svg.svg; pro-locale Ausgaben unter public/assets/ (z. B. translation_demo_svg.de.svg); Laufzeit-URL in page.tsx (/assets/translation_demo_svg.${locale}.svg).

---