SVG के सापेक्ष पाथ कमांड: वर्तमान बिंदु पर नज़र रखें

निरपेक्ष SVG पाथ कमांड, जैसे M, L और C, वर्तमान उपयोगकर्ता निर्देशांक प्रणाली में स्थितियाँ बताते हैं। उनके सापेक्ष रूप, m, l और c, वर्तमान बिंदु से विस्थापन बताते हैं। पाथ पढ़ने या फिर से लिखने के लिए हर खंड के बाद उस बिंदु को ट्रैक करें। संख्याएँ बदले बिना कमांड का अक्षर बदलने से आकृति बदल सकती है।

भ्रम की बड़ी वजह दो नियम हैं: शुरुआती m का पहला जोड़ा निरपेक्ष स्थानांतरण की तरह काम करता है, जबकि अतिरिक्त जोड़े सापेक्ष रेखाएँ बनाते हैं; और Z या z उपपाथ को बंद करके वर्तमान बिंदु को उसके आरंभ पर रीसेट करता है। बंद करने के बाद नया सापेक्ष स्थानांतरण उसी रीसेट किए गए बिंदु से शुरू होता है।

स्थितियों और विस्थापन के अंतर को अलग-अलग पढ़ें

W3C का पाथ विनिर्देश पाथ को उसके वर्तमान बिंदु, उपपाथों और आरेखन कमांड के माध्यम से परिभाषित करता है। निर्देशांक SVG की उपयोगकर्ता इकाइयों में होते हैं, ज़रूरी नहीं कि वे स्क्रीन के पिक्सेल हों। viewBox या ट्रांसफ़ॉर्म उन्हें प्रदर्शित होने वाली किसी दूसरी स्थिति पर मैप कर सकता है।

(40, 40) से शुरू करने पर ये दोनों कमांड एक ही रेखा बताते हैं:

L180 40
l140 0

पहला अंतिम बिंदु (180, 40) बताता है। दूसरा (40, 40) में (140, 0) जोड़ता है। दोनों (180, 40) पर समाप्त होते हैं, जो अगले खंड के लिए वर्तमान बिंदु बन जाता है।

इसके विपरीत, l180 40 में (180, 40) जुड़ता है और रेखा (220, 80) पर समाप्त होती है। कमांड का सिंटैक्स सही है, लेकिन वह अलग रेखा बनाता है।

बड़े और छोटे अक्षर वाले Z का प्रभाव एक जैसा है: वे कोई निर्देशांक आर्ग्युमेंट नहीं लेते। MDN का d संदर्भ कमांड और उनके अलग-अलग पैरामीटर की सूची देता है।

एक ही मूल चित्र के दो विवरणों की तुलना करें

इस पूरे SVG को absolute.svg नाम से सेव करें और ब्राउज़र में खोलें। इसमें चौकोर छेद वाला गहरा नीला-हरा संयुक्त बैज और अलग मूँगे के रंग का घन वक्र है:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

relative.svg के लिए SVG का आकार, viewBox और शैली समान रखें, लेकिन दोनों पाथ तत्वों की जगह ये रखें:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

हमने दोनों मूल फ़ाइलों को ब्राउज़र में रेंडर किया और उनके साथ निरपेक्ष बैज की एक जानबूझकर बिगाड़ी गई प्रति रखी। उस प्रति में केवल पहला L180 40, l180 40 में बदला गया है; संख्याएँ वैसी ही हैं।

हमारे पेज ने मूल SVG getTotalLength() और getPointAtLength() का इस्तेमाल करके हर पाथ पर कुल लंबाई के समान अनुपातों पर 301 नमूनों की तुलना की। प्रदर्शित लंबाई हर बैज के लिए 657.082 उपयोगकर्ता इकाइयाँ और हर वक्र के लिए 189.066 थी। दोनों जोड़ियों में नमूना बिंदुओं का अधिकतम अंतर 0.000000 दिखा।

यह माप इन खास स्ट्रिंगों की समानता की पुष्टि करता है; इनके रेखा शीर्ष और घन वक्र के बिंदु नीचे की गणना में भी मेल खाते हैं। यह साबित नहीं करता कि कोई भी पुनर्लेखन या कन्वर्टर हर SVG कमांड को संभाल सकता है। पूरी तुलना में एक ही बिना ट्रांसफ़ॉर्म वाला व्यूपोर्ट और रंग-रेखा सेटिंग इस्तेमाल हुई हैं।

पहले m और उसकी निहित रेखाओं को ट्रैक करें

हमारा बैज इस तरह शुरू होता है:

m40 40 140 0 30 40 -30 60 -140 0z

केवल पहला जोड़ा स्थानांतरण करता है। बाकी जोड़े निहित सापेक्ष l खंडों की तरह काम करते हैं। moveto की परिभाषा स्पष्ट रूप से बाद के जोड़ों को सापेक्ष रखती है, भले ही शुरुआती m40 40 को निरपेक्ष आरंभ माना जाता हो।

एक बार में एक जोड़ा ट्रैक करें:

तुलना के लिए, कई जोड़ों वाला बड़े अक्षर का M बाद के जोड़ों को निहित निरपेक्ष L खंडों में बदलता है। वह हर जोड़े को नया स्थानांतरण नहीं मानता और छोटे अक्षर वाले इस उदाहरण जैसी विस्थापन भी इस्तेमाल नहीं करता।

पाथ तत्व अपनी अलग पाथ क्रमावली स्थापित करता है। उसके शुरुआती सापेक्ष m को किसी असंबंधित पिछले पाथ तत्व के अंतिम बिंदु से शुरू न करें।

अगले स्थानांतरण के लिए बंद उपपाथ का आरंभ इस्तेमाल करें

छेद पहले z के बाद शुरू होता है:

m40 30 0 40 40 0 0 -40z

उस समय वर्तमान बिंदु (40, 40) है, इसलिए नया सापेक्ष स्थानांतरण (40, 30) जोड़ता है और छेद को (80, 70) पर शुरू करता है। फिर उसकी निहित रेखाएँ बंद होने से पहले (80, 110), (120, 110) और (120, 70) तक पहुँचती हैं।

अगर आप गलती से बाहरी बैज की अंतिम रेखा के अंतिम बिंदु (40, 140) को आधार मानें, तो स्थानांतरण (80, 170) पर पहुँचेगा। पहले पाथ को बंद करना ही इस गणना को गलत बनाता है। closepath की परिभाषा वर्तमान बिंदु को वर्तमान उपपाथ के शुरुआती बिंदु पर रीसेट करती है।

दोनों उपपाथ एक ही पाथ तत्व में हैं। उसका fill-rule="evenodd" इस परीक्षण चित्र में अंदर के चौकोर हिस्से को छेद बनाता है। निर्देशांक पुनर्लेखन की तुलना करते समय फ़िल नियम और रंग-रेखा सेटिंग स्थिर रखें, ताकि फ़िल का बदलाव उस ज्यामिति को न छिपाए जिसे आप जाँच रहे हैं।

हर घन वक्र नियंत्रण बिंदु को उसी शुरुआती बिंदु से मापें

अलग वक्र (40, 190) से शुरू होता है:

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

छोटे अक्षर वाले इस एक c खंड में तीनों जोड़े (40, 190) से सापेक्ष विस्थापन हैं। दूसरा नियंत्रण बिंदु पहले नियंत्रण बिंदु से नहीं मापा जाता और अंतिम बिंदु दूसरे नियंत्रण बिंदु से नहीं मापा जाता।

खंड पूरा होने पर वर्तमान बिंदु को उसके अंतिम बिंदु (220, 180) पर अपडेट करें। अगला सापेक्ष खंड इसी नए आरंभ का इस्तेमाल करेगा। MDN का पाथ ट्यूटोरियल घन वक्र के नियंत्रण बिंदु तथा निरपेक्ष और सापेक्ष रूप समझाता है; Bézier जोड़ की मार्गदर्शिका अलग से स्पर्शरेखा हैंडल और संक्षिप्त S कमांड समझाती है।

हर कमांड की हर संख्या पर निर्देशांक घटाने का नियम लागू न करें। चाप में त्रिज्याएँ, घुमाव और फ़्लैग अलग काम करते हैं; केवल अंतिम बिंदु का जोड़ा निरपेक्ष और सापेक्ष स्थितियों के बीच बदलता है। A या a डेटा फिर से लिखने से पहले चाप फ़्लैग की व्याख्या पढ़ें। यह उदाहरण रेखाएँ, स्थानांतरण, बंद करना और एक सामान्य घन वक्र खंड दिखाता है, कोई सार्वभौमिक पाथ रूपांतरण विधि नहीं।

पाथ के सिंटैक्स और स्थिति को अलग रखते हुए चित्र खिसकाएँ

इस पूरी तरह सापेक्ष संयुक्त बैज में शुरुआती m40 40 को m60 60 करने से उसके शीर्ष (20, 20) खिसकते हैं: बाद की विस्थापन और उपपाथ का सापेक्ष स्थानांतरण बदले हुए आरंभ के साथ चलते हैं। अलग वक्र का पाथ वैसा ही रहता है। मिश्रित डेटा में बाद की निरपेक्ष स्थितियाँ भी अपने निर्दिष्ट निर्देशांक पर टिकी रहती हैं, इसलिए पहला स्थानांतरण बदलने से पाथ विकृत हो सकता है।

दो पाथ वाले पूरे चित्र को एक इकाई की तरह खिसकाने के लिए दोनों d स्ट्रिंग वैसी ही रखें और उनके तत्वों को transform="translate(20 20)" वाले समूह में रखें। SVG निर्देशांक प्रणाली का विनिर्देश बताता है कि ट्रांसफ़ॉर्म निर्देशांक मैपिंग कैसे स्थापित करते हैं। समूह का ट्रांसफ़ॉर्म मूल पाथ डेटा फिर से लिखे बिना स्थिति बदलता है।

जाँचें कि खिसकाया गया चित्र अब भी व्यूपोर्ट में समाता है; समूह खिसकाने से उसका कैनवास अपने-आप बड़ा नहीं होता। SVG ट्रांसफ़ॉर्म क्रम की मार्गदर्शिका स्थानांतरण और स्केल को साथ इस्तेमाल करने पर स्थिति समझाती है।

संकेत-पद्धति बदलने से पहले मूल ज्यामिति जाँचें

जब चित्र केवल PNG या JPG के रूप में उपलब्ध हो, तब PerfectVector मदद कर सकता है। एक संभावित SVG बनाएँ, फिर उसके पाथ डेटा में बदलाव करने से पहले मूल चित्र से उसकी पुनर्निर्मित बाहरी आकृति, छेद और वक्र का आकार मिलाएँ। निरपेक्ष या सापेक्ष संकेत-पद्धति यह तय नहीं करती कि पुनर्निर्मित ज्यामिति उपयुक्त है या नहीं।

उपलब्ध मूल वेक्टर फ़ाइल का सीधे इस्तेमाल करें, या अगर नियंत्रण आसान हो तो सरल प्रतीक फिर से बनाएँ। कमांड फिर से लिखने से रास्टर में अनुपस्थित जानकारी के आधार पर इच्छित आकृति वापस नहीं मिल सकती। इमेज वेक्टराइज़ेशन का परिचय पुनर्निर्माण के उस अलग चरण को समझाता है।

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

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

क्या पहला छोटे अक्षर वाला m किसी दूसरे पाथ के सापेक्ष होता है? नहीं। जब m पाथ का पहला कमांड हो, तो उसका पहला जोड़ा निरपेक्ष आरंभ माना जाता है। अतिरिक्त जोड़े निहित सापेक्ष रेखाएँ होते हैं, और दूसरे पाथ तत्व का अंतिम बिंदु उसके आरंभ का आधार नहीं होता।

Z या z के बाद वर्तमान बिंदु कहाँ होता है? अभी बंद हुए उपपाथ के आरंभ पर। अगला सापेक्ष स्थानांतरण इसी रीसेट किए गए बिंदु का इस्तेमाल करता है, पिछली रेखा के अंतिम बिंदु का नहीं।

क्या कमांड के अक्षर छोटे करके पाथ रूपांतरित किया जा सकता है? नहीं। हर कमांड के अर्थ के अनुसार स्थिति मानों की दोबारा गणना करनी पड़ती है। इस उदाहरण में वर्तमान बिंदु (40, 40) से L180 40, l140 0 बनता है, जबकि l180 40 दूसरी रेखा बनाता है।

स्रोत

1. W3C — SVG 2 पाथ — वर्तमान बिंदु, शुरुआती moveto, निहित रेखाएँ, पाथ बंद करना और घन वक्र पैरामीटर परिभाषित करता है।
2. MDN — पाथ ट्यूटोरियल — निरपेक्ष और सापेक्ष रेखा तथा वक्र कमांड दिखाता है।
3. MDN — d एट्रिब्यूट — चाप और closepath सहित कमांड पैरामीटर की भूमिकाएँ बताता है।
4. W3C — SVG 2 निर्देशांक प्रणालियाँ — उपयोगकर्ता निर्देशांक मैपिंग और ट्रांसफ़ॉर्म से चित्र की स्थिति तय करना समझाता है।

क्या आप केवल रास्टर चित्र से शुरू कर रहे हैं? PerfectVector से SVG पाथ बनाएँ, पुनर्निर्मित बाहरी आकृति और छेद जाँचें, फिर केवल समझ में आने वाले कमांड बदलें और दिए जाने वाले SVG को मूल चित्र से मिलाकर सत्यापित करें।