SVG ग्रेडिएंट इकाइयाँ: लोगो पाथ पर एक रंग मिश्रण साझा करें

अलग SVG पाथ पर एक ग्रेडिएंट फैलाने के लिए gradientUnits="userSpaceOnUse" इस्तेमाल करें, चित्र के निर्देशांक में अंतिम बिंदु तय करें और पाथ एक ही निर्देशांक प्रणाली में रखें। फिर हर पाथ अपनी स्थिति वाले मिश्रण का भाग दिखाता है। लोगो के हिस्से अलग-अलग संपादन योग्य रह सकते हैं।

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

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

तय करें कि मिश्रण हर आकार का है या पूरे चिह्न का

जब हर हिस्से में अपना पूरा मिश्रण चाहिए, तो ऑब्जेक्ट सापेक्ष रंग इस्तेमाल करें। जब बाएँ और दाएँ हिस्से को एक ही बदलाव से अलग रंग लेने हों, तो साझा यूज़र-स्पेस अंतिम बिंदु इस्तेमाल करें।

समूह पर fill="url(#brandBlend)" रखने से भरण उसके चाइल्ड तक जाता है। इससे ऑब्जेक्ट बाउंडिंग बॉक्स ग्रेडिएंट समूह की संयुक्त बाहरी आकृति नहीं मापता। चाइल्ड को अभी भी अपना रंग मिलता है। SVG पेंट सर्वर विनिर्देश ग्रेडिएंट को एलिमेंट के fill या stroke से संदर्भित संसाधन बताता है।

एक प्रतीक, चार निर्देशांक चुनाव

चित्र को समेटने वाले अंतिम बिंदु तय करें

उदाहरण के पाथ क्षैतिज x=30 से x=310 तक हैं। यही मिश्रण के अंतिम बिंदु हैं। त्रिकोण x=125 पर खत्म होता है, बीच का ब्लॉक 140 से 210 तक है और दायाँ आकार 225 से 310 तक।

इसे shared-logo.svg में सहेजकर ब्राउज़र में खोलें:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

आपको B जैसा बैंगनी त्रिकोण, मुख्यतः गुलाबी बीच का ब्लॉक और नारंगी रंगों वाला दायाँ आकार दिखना चाहिए। खाली अंतर उसी मिश्रण के हिस्से छिपाते हैं; अगला पाथ शुरू होते ही रंग फिर शुरू नहीं होता। एक स्टॉप बदलें और तीनों हिस्से अपडेट होते हैं क्योंकि वे एक ही परिभाषा का संदर्भ देते हैं।

A से सीधी तुलना के लिए ग्रेडिएंट के gradientUnits, x1, y1, x2 और y2 एट्रिब्यूट को x1="0%" y1="0%" x2="100%" y2="0%" से बदलें। gradientUnits छोड़ने से डिफ़ॉल्ट वापस आता है। अब हर आकार को पूरा रंग बदलाव मिलता है।

प्रतिशत का संदर्भ भी अलग है: userSpaceOnUse के साथ वह रंगे ऑब्जेक्ट के बाउंडिंग बॉक्स के बजाय वर्तमान SVG व्यूपोर्ट को दर्शाता है। स्पष्ट संख्याएँ इस उदाहरण की जाँच आसान बनाती हैं। बड़े viewBox के केवल हिस्से में बसे लोगो को अपने मिश्रण के लिए उस viewBox की पूरी चौड़ाई इस्तेमाल करने की ज़रूरत नहीं।

एक हिस्से का रंग गलत हो तो ट्रांसफ़ॉर्म जाँचें

C में दायाँ आकार अपनी जगह पर बना दिखता है। उसके पाथ निर्देशांक 60 इकाइयाँ बाएँ गए और चाइल्ड समूह ने उसे 60 इकाइयाँ दाएँ किया:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

अंतर दोहराने के लिए पूरे उदाहरण का तीसरा पाथ इस समूह से बदलें। उसका दिखाई देने वाला बायाँ किनारा x=225 ही है, लेकिन स्थानीय बायाँ किनारा x=165 है। ग्रेडिएंट वही स्थानीय क्षेत्र इस्तेमाल करता है, इसलिए हिस्सा मिश्रण का पहले वाला, अधिक गुलाबी भाग लेता है। userSpaceOnUse नेस्टेड ट्रांसफ़ॉर्म के बावजूद एक वैश्विक निर्देशांक प्रणाली का वादा नहीं है।

इस प्रतीक में तीसरे पाथ के मूल निर्देशांक वापस लाएँ और उसका निजी स्थानांतरण हटाएँ। यदि पूरा लोगो खिसकाना हो, तो इसके बजाय मौजूदा बाहरी समूह पर transform="translate(10 0)" लागू करें। इससे D बनता है: तीनों आकार और उनका साझा रंग साथ खिसकते हैं।

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

gradientTransform कब उपयोगी है

gradientTransform पाथ ज्यामिति बदले बिना रंग की निर्देशांक मैपिंग बदलता है। यह जानबूझकर मिश्रण घुमाने, तिरछा करने या उसकी स्थिति बदलने के लिए उपयोगी है। MDN इसे अतिरिक्त ट्रांसफ़ॉर्म बताता है, जो gradientUnits से चुनी निर्देशांक प्रणाली तय होने के बाद लागू होता है।

बाकी हिस्से जाँचे बिना एक चाइल्ड की भरपाई के लिए साझा परिभाषा समायोजित करने से बचें। उस परिभाषा का संदर्भ देने वाला हर आकार प्रभावित हो सकता है। यहाँ के साधारण लोगो में चित्र को साझा क्षेत्र में रखना रखरखाव में आसान है; अधिक जटिल आयातित चित्र के लिए अलग-अलग मैप की गई ग्रेडिएंट परिभाषाओं की ज़रूरत हो सकती है।

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

यदि एकमात्र स्रोत PNG या JPG लोगो है, तो समन्वित ग्रेडिएंट दोबारा बनाने से पहले PerfectVector संपादन योग्य वेक्टर ज्यामिति वापस पाने में मदद कर सकता है। लोगो वेक्टराइज़ करें, फिर संपादक में बाहरी आकृति, खाली हिस्से और अलग भाग देखें। साझा रंग के लिए उन्हीं आकारों से शुरुआत करें।

ऊपर का प्रदर्शन निर्देशांक व्यवहार अलग करके दिखाने के लिए हाथ से लिखा गया था; यह PerfectVector रूपांतरण परिणाम नहीं है। छायादार पिक्सेल ट्रेस करने से मूल ग्रेडिएंट स्टॉप या उसकी निर्देशांक सेटिंग वापस आने का अनुमान न लगाएँ। साधारण लोगो हाथ से दोबारा बनाना अधिक तेज़ भी हो सकता है। उपलब्ध होने पर मौजूदा SVG, AI या वेक्टर PDF रखें।

नया भरण स्वीकार न करने वाले आकार के लिए ग्रेडिएंट निर्देशांक बदलने से पहले SVG रंग बदलने की जाँच इस्तेमाल करें। यदि वही निर्यात अलग एप्लिकेशन में अलग हो, तो SVG रंग बदलाव निदान अपनाएँ।

सौंपने से पहले फ़ाइल दोबारा खोलें

नया SVG सहेजें और सटीक फ़ाइल जाँचें, केवल संपादक कैनवस नहीं। ये बातें देखें:

• ग्रेडिएंट ID मौजूद है और हर इच्छित पाथ उसका संदर्भ देता है।
• मिश्रण इच्छित दिशा में लोगो की सीमाएँ ढकता है।
• पूरा चिह्न खिसकाने पर रंग समन्वित रहते हैं।
• जहाँ संपादन चाहिए, वहाँ अलग हिस्से चयन योग्य रहते हैं।
• प्राप्त करने वाला एप्लिकेशन अपेक्षित रूप बनाए रखता है।

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

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

ग्रेडिएंट साझा करने के लिए क्या पाथ मिलाने होंगे? नहीं। अलग पाथ एक ग्रेडिएंट का संदर्भ दे सकते हैं। उपयुक्त अंतिम बिंदुओं के साथ userSpaceOnUse इस्तेमाल करें और सुनिश्चित करें कि पाथ इच्छित निर्देशांक प्रणाली साझा करते हैं।

पाथ समूह बनाने पर भी ग्रेडिएंट क्यों दोहरता है? समूह अपना भरण चाइल्ड पाथ को दे सकता है, लेकिन objectBoundingBox ग्रेडिएंट अभी भी हर रंगे चाइल्ड की सीमाएँ इस्तेमाल करता है। जब मिश्रण पूरे चिह्न में फैलना हो, तो यूज़र-स्पेस अंतिम बिंदु तय करें।

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

स्रोत

1. MDN — gradientUnits — डिफ़ॉल्ट, संदर्भ निर्देशांक प्रणालियाँ और प्रतिशत व्यवहार परिभाषित करता है।
2. SVG Working Group — पेंट सर्वर — दोबारा इस्तेमाल योग्य ग्रेडिएंट रंग, स्टॉप और फैलाव व्यवहार निर्धारित करता है।
3. MDN — gradientTransform — ग्रेडिएंट निर्देशांक के अतिरिक्त ट्रांसफ़ॉर्म समझाता है।

रास्टर लोगो से शुरू कर रहे हैं? अपने लोगो को संपादन योग्य SVG पाथ में बदलें, अलग आकार देखें, फिर साझा ग्रेडिएंट दोबारा बनाएँ और अंतिम निर्यात खोलकर उसका संरेखण जाँचें।