Skip to content

SVG अनुवाद

मानव-पठनीय लेबल वाले SVG चित्रण और आरेखों के लिए डिज़ाइन किया गया। translate-svg कमांड स्रोत .svg फ़ाइलों को पढ़ता है, <text>, <title>, और <desc> तत्वों से टेक्स्ट निकालता है, सक्रिय LLM प्रदाता के माध्यम से उन स्ट्रिंग्स का अनुवाद करता है, और प्रति लक्ष्य लोकेल एक आउटपुट SVG लिखता है।

यह एकमात्र पाइपलाइन है जो लोकेल-विशिष्ट बाइनरी SVG फ़ाइलें उत्सर्जित करती है। translate-docs मार्कडाउन ऑल्ट टेक्स्ट और लिंक संदर्भों का अनुवाद करता है, लेकिन यह SVG संपत्तियों को संशोधित या कॉपी नहीं करता है। जब किसी पृष्ठ को अनुवादित लेबल वाले आरेख की आवश्यकता होती है, तो features.translateSVG को सक्षम करें और शीर्ष-स्तरीय svg ब्लॉक को कॉन्फ़िगर करें।

प्रति-स्थानीय मॉडल ओवरराइड

translate-svg मॉडल को प्रति लक्ष्य लोकेल हल करता है: कॉन्फ़िगर होने पर पहले localeModels(locale), फिर translationModels। प्रत्येक लोकेल का SVG रन अपनी स्वयं की फ़ॉलबैक श्रृंखला का उपयोग करता है — जब CJK लोकेल में आरेख लेबल को स्क्रिप्ट-ट्यून किए गए मॉडल (उदाहरण के लिए ja) की आवश्यकता होती है तो यह उपयोगी होता है। प्रदाता और मॉडल देखें।

SVG अनुवाद translate-docs और translate-json (cacheDir) के समान SQLite कैश का उपयोग करता है। पहले से अनुवादित टेक्स्ट सेगमेंट कैश से परोसे जाते हैं; केवल नया या बदला हुआ स्रोत टेक्स्ट LLM को भेजा जाता है।

SVG अनुवाद का उपयोग कब करें

translate-svg का उपयोग तब करें जब:

  • एक SVG में दृश्यमान लेबल, शीर्षक या विवरण होते हैं जिन्हें प्रति लोकेल बदलना चाहिए।
  • एक वेब ऐप रनटाइम पर लोकेल-विशिष्ट आरेख फ़ाइलें लोड करता है (उदाहरण के लिए dashboard.de.svg)।
  • एक डॉक-सिस्टम साइट (Docusaurus, Astro Starlight, VitePress) अनुवादित मार्कडाउन के बगल में अनुवादित SVGs को सह-स्थापित करती है।

इनके लिए translate-svg का उपयोग न करें:

  • कोई अनुवाद योग्य टेक्स्ट (आइकन, लोगो, पृष्ठभूमि) के बिना सजावटी SVGs।
  • रास्टर स्क्रीनशॉट (PNG, JPEG, WebP) — इन्हें छवियाँ और स्क्रीनशॉट के माध्यम से संभाला जाता है।
  • <text> तत्वों के बजाय पथ डेटा में बेक किया गया टेक्स्ट — एक्सट्रैक्टर पथ की रूपरेखा नहीं पढ़ सकता है।

शुरू से ही i18n के लिए डिज़ाइन करें

SVGs का अनुवाद करना सबसे आसान होता है जब लेबल पहले दिन से ही वास्तविक टेक्स्ट तत्व होते हैं:

  • <text>, <title>, और <desc> में मानव-पठनीय कॉपी डालें।
  • अपने डिज़ाइन टूल में लेबल को पथों में बदलने से बचें — पथ डेटा अनुवादक के लिए अपारदर्शी है।
  • स्रोत SVGs को svg.outputDir से अलग एक समर्पित निर्देशिका में रखें। स्रोतों और जेनरेट की गई लोकेल फ़ाइलों को मिलाने से यह बताना असंभव हो जाता है कि कौन सी फ़ाइलें संपादित या पुनर्जीवित करने के लिए सुरक्षित हैं।

वेब ऐप्स के लिए, जब आपका डिज़ाइन सभी-छोटे अक्षरों वाले लेबल का उपयोग करता है तो forceLowercase: true को सक्षम करें — यह फ़ाइल सिस्टम और CDN में केस-संवेदनशीलता बेमेल से बचाता है।

आउटपुट लेआउट

translate-svg दो सामान्य आउटपुट आकृतियों का समर्थन करता है। आपका ऐप या डॉक साइट रनटाइम पर SVG फ़ाइलों को कैसे संदर्भित करती है, इसके आधार पर चुनें।

लेआउटsvg.styleइसके लिए सबसे अच्छाचाइल्ड गाइड
फ्लैट (वेब ऐप)"flat"Next.js, Vite, और अन्य ऐप्स जो SVG को लोकेल-कोडेड फ़ाइल नाम से एम्बेड करते हैंवेब ऐप (फ्लैट SVG)
सह-स्थापित (डॉक-सिस्टम)"nested" + pathTemplateDocusaurus और अन्य डॉक-सिस्टम साइटें जहाँ अनुवादित संपत्तियाँ अनुवादित पृष्ठों के बगल में स्थित होती हैंसह-स्थापित SVG

फ्लैट लेआउट public/assets/diagram.de.svg जैसी फ़ाइलें diagram.en-GB.svg के बगल में लिखता है। आपका ऐप उन्हें लोकेल प्रत्यय के साथ संदर्भित करता है:

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

सह-स्थापित लेआउट प्रत्येक लोकेल के SVG को उस लोकेल के सामग्री ट्री में लिखता है (उदाहरण के लिए i18n/de/.../assets/diagram.svg)। स्रोत और अनुवादित मार्कडाउन समान सापेक्ष पथ (../assets/diagram.svg) का उपयोग करते हैं — किसी regexAdjustments नियम की आवश्यकता नहीं है।

SVG लेआउट रास्टर स्क्रीनशॉट रणनीतियों के साथ कैसे फिट होते हैं, इसके लिए इमेज और स्क्रीनशॉट निर्णय गाइड देखें।

चरण 1: सक्षम और कॉन्फ़िगर करें

सुविधा को सक्षम करें और translate-svg को अपनी स्रोत फ़ाइलों और आउटपुट रूट पर इंगित करें:

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

मुख्य svg फ़ील्ड:

  • sourcePath — एक या एक से अधिक निर्देशिकाएं या ग्लोब पैटर्न (उदाहरण के लिए "images/*.svg", "**/icons/*.svg")। परियोजना रूट से पुनरावृत्ति से स्कैन किया गया।
  • outputDir — अनुवादित एसवीजी आउटपुट के लिए रूट निर्देशिका।
  • style"flat" या "nested" जब आप कस्टम pathTemplate का उपयोग नहीं कर रहे हैं।
  • pathTemplate — वैकल्पिक कस्टम आउटपुट पथ {outputDir}, {locale}, {llocale}, {basename}, {stem}, और अन्य (सह-स्थित दस्तावेज़-प्रणाली लेआउट के लिए आवश्यक) के साथ।
  • forceLowercase — पुनर्संयोजन पर निचला-मामले में अनुवादित पाठ।

पूर्ण क्षेत्र संदर्भ: कॉन्फ़िगरेशन — svg

चरण 2: अनुवाद करें

bash
ai-i18n-tools translate-svg

एकल स्थान का अनुवाद करें:

bash
ai-i18n-tools translate-svg --locale de

फ़ाइलें लिखे बिना पूर्वावलोकन करें:

bash
ai-i18n-tools translate-svg --dry-run

sync एसवीजी चरण को स्वचालित रूप से चलाता है जब features.translateSVG और svg दोनों सेट होते हैं (--no-svg के साथ छोड़ दें)। साझा ध्वज में -l / --locale, -p / --path, -j / --concurrency, और --force / --force-update शामिल हैं।

समस्या निवारण

मिश्रित स्रोत/आउटपुट निर्देशिका, डोक्यूसॉरस पर निरपेक्ष स्थिर यूआरएल, और पथ लेआउट त्रुटियों जैसे सामान्य एसवीजी मुद्दों को एसवीजी समस्या निवारण में कवर किया गया है। रास्टर संपत्तियों और लिंक पुनर्लेखन के लिए, इमेज और स्क्रीनशॉट समस्या निवारण देखें।

एमआईटी लाइसेंस के तहत जारी किया गया।