SVG shape-rendering crispEdges: कब मदद करता है?

shape-rendering="crispEdges" तब इस्तेमाल करें जब SVG के किनारे जानबूझकर तीखे और अधिकांशतः सीधे हों तथा अंतिम प्रदर्शन आकार का परीक्षण उससे बेहतर दिखे। अंतर नगण्य हो तो डिफ़ॉल्ट auto रखें। वक्र चित्र में संकेत किनारा अधिक खुरदरा कर सकता है। यह रेंडरर के मौजूदा आकृतियों को रेंडर करने के तरीके को बदलता है, आकृतियों को नहीं। SVG 2 विनिर्देश इसे संकेत कहता है और रेंडरर को एंटी-अलियासिंग कम करने या कुछ किनारे डिवाइस पिक्सेल से मिलाने की अनुमति देता है।

छोटा आइकन धुँधला लगे या एक्सपोर्ट के बाद लोगो दाँतेदार दिखे तो यह अंतर मायने रखता है। crispEdges एम्बेडेड PNG को पाथ नहीं बना सकता, टूटा कंटूर ठीक नहीं कर सकता और हर ब्राउज़र में समान पिक्सेल का वादा नहीं कर सकता। पूरी फ़ाइल बदलने से पहले लोगों को दिखने वाले आकारों पर एक प्रतिनिधि आकृति की auto, crispEdges और geometricPrecision से तुलना करें।

crispEdges रेंडरर से क्या करने को कहता है

SVG में shape-rendering के चार मान हैं। वे प्राथमिकताएँ हैं, चार एक्सपोर्ट फ़ॉर्मैट नहीं। डिफ़ॉल्ट auto रेंडरर को गति, किनारे के कंट्रास्ट और ज्यामितीय सटीकता में संतुलन करने देता है। crispEdges तेज़ किनारे के कंट्रास्ट को प्राथमिकता देता है और एंटी-अलियासिंग रोक सकता है; geometricPrecision सही ज्यामिति को प्राथमिकता देता है। MDN का SVG एट्रिब्यूट संदर्भ बताता है कि रेंडरर सभी किनारे या केवल लगभग क्षैतिज तथा ऊर्ध्वाधर किनारे अलग तरीके से संभाल सकता है। कोई अनिवार्य शार्पनिंग फ़िल्टर नहीं है।

पैरेंट SVG का एट्रिब्यूट उसकी चाइल्ड आकृतियों को मिल सकता है, इसलिए रूट पर लगाने से उस वृत्त पर भी असर हो सकता है जिसे चिकना रहना चाहिए। इसके बजाय एक आयत या पाथ को लक्षित कर सकते हैं। SVG प्रस्तुति एट्रिब्यूट और CSS shape-rendering घोषणा दोनों लागू हों तो CSS प्रॉपर्टी को प्राथमिकता मिलती है।

हमने समान आकृतियाँ दो आकारों पर मिलाईं

हमने मूल SVG आकृतियों के रूप में एक आयताकार ग्रिड निशान और एक वक्र कंटूर बनाया। तीनों कॉलम में मार्कअप, फ़िल और viewBox समान थे; केवल shape-rendering मान बदला। हर आकृति Chromium में 100% ब्राउज़र ज़ूम पर 63 और 111 CSS पिक्सेल में रेंडर हुई। चित्र उस स्थानीय परीक्षण का ब्राउज़र कैप्चर है, काल्पनिक परिणाम का चित्रण नहीं।

समान SVG ज्यामिति, तीन संकेत, दो आकार

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

यह एक Chromium रेंडर था, ब्राउज़र अनुकूलता अध्ययन नहीं। PDF व्यूअर, डिज़ाइन एडिटर या दूसरी डिवाइस स्केल वाला ब्राउज़र समान पाथ अलग तरह रास्टर बना सकता है। SVG 2 परिभाषा जानबूझकर कार्यान्वयन चुनाव खुले रखती है।

हर जगह लगाने से पहले एक आकृति पर परखें

SVG की प्रति सेव करें, फिर प्रतिनिधि आकृति पर संकेत रखें। मसलन, आइकन के आयताकार हिस्से पर लागू करें और वक्र विवरण auto पर छोड़ें:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

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

वास्तविक लक्षण के अनुरूप सुधार चुनें

जिस PNG स्प्राइट में हूबहू पिक्सेल ग्रिड ही डिज़ाइन है, उसमें रास्टर रखना सबसे साफ़ चुनाव हो सकता है। CSS का image-rendering: pixelated स्केल की गई इमेज से नमूने लेने का तरीका नियंत्रित करता है; वह SVG shape-rendering से अलग प्रॉपर्टी है। पिक्सेल आर्ट रूपांतरण मार्गदर्शिका समझाती है कि ग्रिड कब रखें, वेक्टर टाइल कब बनाएँ या कंटूर कब जानबूझकर चिकना करें।

PerfectVector कब उपयोगी है

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

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

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

क्या crispEdges हर SVG आकृति से एंटी-अलियासिंग हटाता है? नहीं। वह रेंडरर से किनारे का कंट्रास्ट प्राथमिकता देने को कहता है। विनिर्देश अलग कार्यान्वयन अनुमति देता है, जिनमें केवल कुछ लगभग ऊर्ध्वाधर या क्षैतिज किनारे बदलने वाले भी हैं। जिस व्यूअर का इस्तेमाल करेंगे उसमें आउटपुट परखें।

क्या पूरे SVG पर shape-rendering="crispEdges" लगाना चाहिए? केवल तब जब हर चाइल्ड आकृति को लाभ हो। रूट स्तर का संकेत वक्र चाइल्ड आकृतियों पर भी असर कर सकता है। एक आयताकार आकृति पर एट्रिब्यूट लगाना जाँचना आसान है और वक्र खुरदरा करने की संभावना कम है।

क्या crispEdges सफ़ेद दरार या SVG के अंदर धुँधला PNG ठीक करेगा? वह वास्तविक अंतर बंद नहीं कर सकता और रास्टर पिक्सेल को वेक्टर पाथ से नहीं बदलता। पहले दरार की ज्यामिति पहचानें। स्केल किए PNG के लिए उपयुक्त रास्टर स्केलिंग तरीका लें या वास्तविक ज़रूरत हो तो संपादन योग्य वेक्टर पाथ बनाएँ।

स्रोत

1. W3C — SVG 2 shape-rendering प्रॉपर्टी — चार मान रेंडरर संकेत के रूप में परिभाषित करता है और उनके अनुमत संतुलन समझाता है।
2. MDN — SVG shape-rendering एट्रिब्यूट — लागू SVG आकृतियाँ, विरासत और CSS प्राथमिकता बताता है।
3. MDN — CSS shape-rendering प्रॉपर्टी — प्रॉपर्टी व्यवहार और वक्र रेंडरिंग अलग होने की वजह बताता है।
4. MDN — CSS image-rendering प्रॉपर्टी — रास्टर पिक्सेल स्केलिंग और वेक्टर आकृति किनारे रेंडर करने का अंतर बताता है।