PerfectVector
लेखक: Irene Kim10 मिनट का पठन

SVG गलत आकार में आयात होता है: कारण पहचानें और ठीक करें

2 ऐप इकाइयों को अलग तरीके से समझें, तो SVG बहुत छोटा या बड़ा आयात हो सकता है। कलाकृति संपादित करने से पहले संदर्भ वर्ग से स्केल का कारण पहचानें।

इस पेज पर

SVG गलत आकार में आयात होता है, तो आम तौर पर उसके पाथ खराब नहीं होते। निर्यात करने वाला और आयात करने वाला ऐप SVG की निर्देशांक इकाइयों को पिक्सेल, इंच या मिलीमीटर से अलग-अलग तरीके से जोड़ते हैं। इसीलिए वही फ़ाइल ब्राउज़र में सही दिख सकती है, Figma में बहुत छोटी आ सकती है और CAD या कटर सॉफ़्टवेयर में किसी अन्य स्केल पर पहुँच सकती है।

अभी अलग-अलग हिस्सों को दोबारा न बनाएँ और उनका आकार न बदलें। ज्ञात आकार का एक संदर्भ वर्ग जोड़ें, पूरी फ़ाइल आयात करें और उस वर्ग को मापें। 1 माप बता देता है कि दस्तावेज़ का स्केल बदला है या कलाकृति में ही समस्या है।

5 मिनट में कारण पहचानें
  • SVG की बिना बदलाव वाली एक प्रति सुरक्षित रखें।
  • कलाकृति के पास 10 mm, 1 इंच या 100 px का संदर्भ वर्ग जोड़ें।
  • फ़ाइल आयात करें और वर्ग को मापें।
  • हर आयाम एक ही गुणक से बदला हो, तो दस्तावेज़ का स्केल 1 बार सुधारें।
  • वर्ग सही हो लेकिन कलाकृति सही न हो, तो उसके ग्रुप, रूपांतरण, स्ट्रोक और क्लिपिंग की जाँच करें।

SVG के भीतर 3 तरह के आकार

SVG आपस में जुड़ी 3 बातें बता सकता है जिन्हें लोग आम बोलचाल में उसका “आकार” कहते हैं। SVG 2 निर्देशांक प्रणाली विनिर्देश उपयोगकर्ता निर्देशांकों, व्यूपोर्ट और viewBox के बीच संबंध परिभाषित करता है।

  1. ज्यामिति पाथ और आकृतियों के भीतर मौजूद निर्देशांक हैं। फ़ाइल की अपनी निर्देशांक प्रणाली में कोई आयत 0 से 100 तक जा सकता है।
  2. viewBox बताता है कि उस निर्देशांक प्रणाली का कौन-सा आयत दिखाई देना चाहिए। viewBox="0 0 100 100" का अर्थ है कि दृश्य आरेखण क्षेत्र हर दिशा में 100 उपयोगकर्ता इकाइयों तक फैला है।
  3. व्यूपोर्ट प्रदर्शित या आयात किया गया आकार है। रूट तत्व में width="100mm", width="400" या कोई चौड़ाई घोषित न की गई हो सकती है। फिर प्राप्त करने वाला ऐप तय करता है कि उस मान को अपनी दस्तावेज़ इकाइयों में कैसे बदले।

यहाँ स्पष्ट भौतिक आउटपुट आकार वाला पूरा 100-इकाई वर्ग दिया गया है:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

ज्यामिति 100 × 100 उपयोगकर्ता इकाइयों की है, जबकि इच्छित व्यूपोर्ट 25 × 25 mm है। viewBox एक निर्देशांक क्षेत्र को दूसरे में मैप करता है। width और height हटाने या उन्हें इकाई रहित संख्याओं में बदलने पर आयातक को अपना प्रदर्शित आकार चुनने की अधिक गुंजाइश मिलती है।

SVG संपादित करने की विस्तृत मार्गदर्शिका सुरक्षित कोड बदलाव बताती है। इस समस्या के लिए रूट <svg> तत्व की जाँच करते समय पाथ डेटा को बिना बदलाव के रखें।

DPI को दोष क्यों दिया जाता है

SVG पाथ में PNG या JPG की तरह पिक्सेल रिज़ॉल्यूशन नहीं होता। DPI की बात तब आती है जब सॉफ़्टवेयर CSS पिक्सेल और भौतिक इकाइयों के बीच रूपांतरण करता है या डिज़ाइन ऐप उन इकाइयों पर अपना निर्यात नियम लागू करता है।

CSS Values विनिर्देश 1in को 96 CSS पिक्सेल और 1pt को इंच का 1/72 भाग परिभाषित करता है। कोई प्रक्रिया गलती से CSS पिक्सेल को पॉइंट मान ले, तो परिचित 96-से-72, यानी 1.333 का स्केल अंतर आता है। आयातक भौतिक width और height को अनदेखा करे, केवल viewBox इस्तेमाल करे या अपनी दस्तावेज़ इकाई सेटिंग लागू करे, तो अन्य गुणक भी आ सकते हैं।

इसीलिए “DPI बदलें” अधूरी सलाह है। बदलने के लिए कोई रास्टर DPI मान मौजूद ही न हो सकता है। पहले स्केल गुणक की गणना करें:

scale factor = intended size / imported size

100 mm का वर्ग 75 mm के रूप में आयात हो, तो सुधार गुणक 100 / 75 = 1.3333 है। पूरे आयात किए गए स्केच या दस्तावेज़ को उस गुणक से स्केल करें, फिर वर्ग को दोबारा जाँचें।

संदर्भ वर्ग उन 2 समस्याओं को अलग करता है जो पहली बार आयात करने पर समान दिख सकती हैं। वर्ग और कलाकृति एक ही अनुपात से गलत हों, तो पूरा दस्तावेज़ सुधारें। वर्ग सही हो लेकिन कलाकृति सही न हो, तो दस्तावेज़ की इकाइयाँ न बदलें और कलाकृति की सीमाओं या रूपांतरणों की जाँच करें।

वैचारिक निर्णय आरेख में एक समान अनुपात से छोटे संदर्भ वर्ग और गियर को पूरे दस्तावेज़ की स्केलिंग से सुधारने की तुलना, तथा सही आकार के वर्ग के पास अपनी रूपांतरण समस्या वाली कलाकृति
कारण पहचानने का चित्र: संदर्भ वर्ग बताता है कि पूरे आयात को स्केल करना चाहिए या केवल कलाकृति की जाँच करनी चाहिए।

संदर्भ वर्ग का परीक्षण करें

ऐसा वर्ग इस्तेमाल करें जो आसानी से मापने लायक बड़ा हो, लेकिन कलाकृति के पास रखने लायक छोटा भी हो।

  1. स्रोत संपादक में ठीक 10 mm, 1 इंच या किसी अन्य ज्ञात आकार का वर्ग बनाएँ।
  2. उसे अलग दिखने वाला भराव या स्ट्रोक दें और तैयार डिज़ाइन के बाहर रखें।
  3. कलाकृति और वर्ग को साथ में 1 SVG के रूप में निर्यात करें।
  4. आकार बदलने वाला हैंडल खींचे बिना फ़ाइल को गंतव्य ऐप में आयात करें।
  5. गंतव्य ऐप के आयाम टूल से वर्ग को मापें।
  6. इच्छित आयाम को आयात किए गए आयाम से भाग दें।
  7. पूरे आयात को 1 बार स्केल करें। अलग-अलग आकृतियों का आकार न बदलें।
  8. अंतिम माप सही होने के बाद ही वर्ग हटाएँ।

यह परीक्षण गलत निदान भी पकड़ता है। संदर्भ वर्ग सही आयात हो, तो दस्तावेज़ की इकाइयाँ संभवतः ठीक हैं। इसके बजाय रूपांतरित ग्रुप, ऐसा स्ट्रोक जिसकी दृश्य चौड़ाई सीमाओं में शामिल हो, कैनवास के बाहर का ऑब्जेक्ट या सामग्री को पेज में फिट करने वाले आयातक की तलाश करें। स्ट्रोक वाला 1 तीखा कोना दृश्य सीमाएँ बदलता हो, तो दस्तावेज़ का भौतिक स्केल बदलने से पहले माइटर की नोक के कारण पहचानें।

CNC, लेज़र और 3D काम के लिए भौतिक इकाइयों वाला वर्ग इस्तेमाल करें। पिक्सेल वाला वर्ग अनुपात में स्केलिंग की पुष्टि कर सकता है, लेकिन मशीन की प्रक्रिया के लिए आवश्यक मिलीमीटर माप साबित नहीं करता।

फ़ाइल सुधारें या आयात सुधारें?

स्थितिसर्वोत्तम सुधार
1 गंतव्य ऐप हर SVG को एक ही गलत गुणक से आयात करता हैआयात प्रीसेट सहेजें या उस ऐप में 1 बार स्केल करें
फ़ाइल में viewBox है लेकिन भौतिक width और height नहीं हैंप्रक्रिया में आवश्यक हों, तो स्पष्ट भौतिक आयाम जोड़ें
संदर्भ वर्ग समेत हर तत्व एक ही गुणक से बदलता हैपूरे दस्तावेज़ या आयात किए गए स्केच को स्केल करें
वर्ग सही है लेकिन 1 ग्रुप गलत हैसभी इकाइयाँ बदलने के बजाय उस ग्रुप का transform जाँचें
दृश्य सीमाएँ डिज़ाइन से बड़ी हैंकैनवास के बाहर के ऑब्जेक्ट, मास्क या अनचाहे बिंदु हटाएँ
स्ट्रोक की चौड़ाई अनपेक्षित रूप से बदलती हैतय करें कि ऐप ऑब्जेक्ट के साथ स्ट्रोक भी स्केल करता है या नहीं, फिर केवल उत्पादन प्रक्रिया में आउटलाइन आवश्यक होने पर स्ट्रोक एक्सपैंड करें

मास्टर फ़ाइल आपके नियंत्रण में हो और आप उसे बार-बार एक ही तरह की प्रक्रिया के लिए भेजते हों, तो फ़ाइल संपादित करना उपयोगी है। CAD या कटर ऐप का स्केल नियम ज्ञात हो और SVG बाकी सभी जगह सही काम करता हो, तो आयात सुधारना अधिक सुरक्षित है।

CAD और कटर सॉफ़्टवेयर में अतिरिक्त जाँच आवश्यक है

ब्राउज़र को केवल छवि दिखानी होती है। CNC, लेज़र और 3D प्रक्रियाओं को सटीक भौतिक परिणाम चाहिए। स्केल सही होने के बाद ज्यामिति अलग से जाँचें:

  • पुष्टि करें कि मशीन का दस्तावेज़ अपेक्षित इकाइयाँ इस्तेमाल कर रहा है।
  • केवल पूरे बाउंडिंग बॉक्स के बजाय डिज़ाइन के किसी वास्तविक भाग का माप लें।
  • जाँचें कि बंद प्रोफ़ाइल अब भी बंद हैं।
  • ऐसा छिपा हुआ पृष्ठभूमि आयत खोजें जिसने सीमाएँ बढ़ा दी हों।
  • सामग्री पर उत्पादन शुरू करने से पहले टूलपाथ, स्केच या एक्सट्रूज़न पूर्वावलोकन की पुष्टि करें।

CNC के लिए छवि-से-SVG मार्गदर्शिका पाथ की सफ़ाई और CAM को फ़ाइल सौंपने की प्रक्रिया बताती है। अगला चरण एक्सट्रूज़न हो, तो स्केल सही होने के बाद 3D प्रिंटिंग के लिए SVG प्रक्रिया अपनाएँ।

Shaper Origin के लिए भौतिक आकार और कट प्रकार की जाँच सूची से आगे बढ़ें। स्केल की पुष्टि करना 1 चरण है; राउटिंग से पहले आयात किए गए पाथ को इच्छित कट प्रकार भी देने आवश्यक हैं।

इच्छित आयामों की पुष्टि करने के बाद, कटर की अंतिम तैयारी स्क्रीन पर जाने से पहले कटिंग मैट के अनुसार आकार जाँचें।

प्रिंट किए जाने वाले चित्र कार्ड के लिए दृश्य समय-सारणी कार्ड की लेआउट मार्गदर्शिका कलाकृति के फिट, PDF पेज के आयाम और प्रिंट स्केलिंग की जाँच करती है। सही आकार का SVG भी ऐसे पेज पर पहुँच सकता है जिसे प्रिंटर छोटा कर देता है।

PerfectVector कहाँ उपयोगी है

PerfectVector रास्टर कलाकृति को संपादन योग्य SVG पाथ में बदलता है। केवल PNG या JPG स्रोत उपलब्ध हो और CAM के लिए वेक्टर ज्यामिति चाहिए, तो CNC के लिए SVG और DXF प्रक्रिया उपयोगी है। उसे आपके हिस्से का अंतिम भौतिक आकार पता नहीं होता, इसलिए गंतव्य सॉफ़्टवेयर में आयाम सेट करना और सत्यापित करना अब भी आवश्यक है।

इन कामों का अंतर महत्वपूर्ण है। वेक्टराइज़ेशन स्केल की जा सकने वाली आकृतियाँ वापस बनाता है। ज्ञात आकार का वर्ग और CAM में लिया गया माप भौतिक स्केल स्थापित करते हैं। इन्हें 2 अलग जाँच मानने से साफ़ ट्रेस गलत आकार के कट में बदलने से बचता है।

अक्सर पूछे जाने वाले प्रश्न

मेरा SVG निर्यात किए गए आकार से छोटा क्यों आयात होता है? निर्यात और आयात करने वाले ऐप SVG की उपयोगकर्ता इकाइयों, CSS पिक्सेल, पॉइंट या भौतिक इकाइयों को अलग-अलग तरीके से मैप कर सकते हैं। ज्ञात आकार का वर्ग जोड़ें और उसके इच्छित तथा आयात किए गए आयामों की तुलना करें। पूरी फ़ाइल एक ही गुणक से बदली हो, तो अलग-अलग पाथ संपादित करने के बजाय दस्तावेज़ को 1 बार स्केल करें।

क्या SVG में DPI होता है? SVG की ज्यामिति रिज़ॉल्यूशन से स्वतंत्र होती है, इसलिए उसमें रास्टर छवि जैसी निश्चित पिक्सेल घनता नहीं होती। सॉफ़्टवेयर CSS पिक्सेल या डिज़ाइन इकाइयों को इंच या मिलीमीटर में मैप करता है, तब DPI जैसे रूपांतरण महत्वपूर्ण होते हैं। अंतर का कारण अक्सर आयातक का नियम होता है, छिपा हुआ छवि रिज़ॉल्यूशन नहीं।

viewBox SVG के आकार पर क्या असर डालता है? viewBox दृश्य निर्देशांक आयत परिभाषित करता है और रेंडरर को उन उपयोगकर्ता इकाइयों को व्यूपोर्ट में मैप करने देता है। वह अपने आप भौतिक आकार घोषित नहीं करता। रूट के width और height, CSS या प्राप्त करने वाला ऐप तय करते हैं कि व्यूपोर्ट कितना बड़ा बनेगा।

मेरा SVG ब्राउज़र में सही आकार का लेकिन Fusion या LightBurn में गलत क्यों है? ब्राउज़र SVG को CSS व्यूपोर्ट में रेंडर कर सकता है, जबकि CAD और लेज़र सॉफ़्टवेयर को उसे भौतिक दस्तावेज़ इकाइयों में मैप करना होता है। ये आयातक अलग नियम इस्तेमाल कर सकते हैं या SVG के आकार मेटाडेटा का कुछ हिस्सा अनदेखा कर सकते हैं। संदर्भ वर्ग मापें और मिले स्केल गुणक से पूरे आयात को सुधारें।

क्या आकार सुधारने के लिए SVG को DXF में बदलना चाहिए? पहले चरण के रूप में ऐसा न करें। फ़ॉर्मैट रूपांतरण स्केल की वही अस्पष्टता आगे ले जा सकता है या नई अस्पष्टता जोड़ सकता है। पहले संदर्भ वर्ग से गुणक पहचानें। गंतव्य प्रक्रिया DXF को प्राथमिकता देती हो, तो उसका इस्तेमाल करें और आयात के बाद आयाम फिर सत्यापित करें।

स्रोत

  1. W3C — SVG 2 निर्देशांक प्रणालियाँ — उपयोगकर्ता इकाइयाँ, व्यूपोर्ट, viewBox और रूपांतरण परिभाषित करता है।
  2. W3C — CSS Values and Units Level 4 — CSS पिक्सेल, इंच और पॉइंट के बीच संदर्भ रूपांतरण परिभाषित करता है।
  3. Autodesk Fusion — Insert SVG — Fusion स्केच में SVG की स्थिति और स्केल नियंत्रण का दस्तावेज़ीकरण करता है।

टूलपाथ या कट से पहले CNC के लिए SVG या DXF तैयार करें और परिणाम जाँचें। उत्पादन फ़ाइल से वर्ग हटाने से पहले संदर्भ वर्ग और डिज़ाइन के किसी वास्तविक भाग को मापें तथा अंतिम CAM पूर्वावलोकन जाँचें।

Blog से और

SVG बॉक्स सीमाएँ: सही निर्देशांक मापें

ट्रांसफ़ॉर्म SVG कलाकृति पर getBBox और getBoundingClientRect तुलना करें। ओवरले सही रखें, स्ट्रोक सीमा परखें और किनारों पर तय खाली जगह छोड़कर viewBox फ़िट करें।

SVG पैटर्न इकाइयाँ: दोहराए मोटिफ का सही आकार रखें

patternUnits, patternContentUnits और viewBox से SVG पैटर्न की दूरी और मोटिफ का आकार नियंत्रित करें। आकार के आयाम बदलने की तुलना उसके पूरे समूह को स्केल करने से करें।

ऐसे साफ़ SVG से शुरुआत करें
जिसे एडिट करना आसान हो

ज़्यादा साफ़ SVG बनाएँक्रेडिट कार्ड की ज़रूरत नहीं