इनलाइन SVG के नीचे की जगह CSS लेआउट से हटाएँ

SVG के नीचे पतली खाली जगह उसे रखने वाली HTML पंक्ति से आ सकती है। इनलाइन ग्राफ़िक टेक्स्ट लेआउट में भाग लेता है, जहाँ बेसलाइन और लाइन ऊँचाई उसके बॉक्स के नीचे जगह छोड़ सकती हैं। अकेली इमेज के लिए display: block आज़माएँ। टेक्स्ट के साथ रहने वाले ग्राफ़िक का इनलाइन संरेखण सोचकर चुनें।

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

पता करें कि जगह किस बॉक्स में है

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

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

हरे SVG बॉक्स के नीचे आड़ू रंग जारी रहे तो रैपर का लाइन लेआउट, पैडिंग, बॉर्डर, ऊँचाई और पड़ोसी एलिमेंट जाँचें। दिखती ड्रॉइंग के नीचे हरा जारी रहे तो चित्र का viewBox, रंगी सीमाएँ और व्यूपोर्ट में उसका फ़िट देखें।

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

एम्बेड विधि भी महत्वपूर्ण है। इनलाइन <svg> HTML दस्तावेज़ का हिस्सा है; <img src="logo.svg"> बाहरी इमेज लोड करता है। उनकी स्टाइलिंग सीमाएँ अलग हैं, जैसा इनलाइन SVG और इमेज गाइड समझाती है। इस जाँच में हर SVG फ़ाइल एक ही तरीके से एम्बेड मानने के बजाय HTML पंक्ति में रखे एलिमेंट को देखें।

बेसलाइन नीचे जगह क्यों छोड़ सकती है

टेक्स्ट पंक्तियों में बेसलाइन के नीचे जाने वाले अक्षरों, जैसे g और p, के लिए जगह चाहिए। इनलाइन ग्राफ़िक उस बेसलाइन से संरेखित हो सकता है, जबकि उसे रखने वाली पंक्ति उसके नीचे भी बढ़ती है। इसलिए इमेज का मार्जिन शून्य करने से कुछ न बदले, यह संभव है।

CSS लाइन-हाइट गणना नियम भाग लेने वाले बॉक्स और उनके संरेखण से लाइन बॉक्स तय करते हैं। दिखाई सामग्री ग्राफ़िक होने पर भी पैरेंट का फ़ॉन्ट और लाइन हाइट योगदान देते हैं। इसलिए पट्टी आसपास की स्टाइल का परिणाम है, SVG का निश्चित मार्जिन नहीं।

इस बेसलाइन को SVG के अंदर बनाए अक्षरों की बेसलाइन से न मिलाएँ। SVG टेक्स्ट एलिमेंट पर dominant-baseline बदलने से अंदर के अक्षर बदलते हैं। इससे पूरे ग्राफ़िक की HTML पंक्ति में स्थिति नहीं चुनी जाती।

खाली SVG कैनवास बिना मापा उदाहरण

हमने एक मूल HTML पृष्ठ बनाया जिसमें वही SVG तीन बार है। हर SVG का 240 × 100 viewBox किनारे तक आयत से भरा है और 240 × 100 CSS पिक्सेल पर रेंडर होता है। पंक्तियाँ 40px Arial और 48px लाइन हाइट लेती हैं। केवल SVG डिस्प्ले या संरेखण बदलता है।

ब्राउज़र ने ये एलिमेंट माप दिए:

ये एक ब्राउज़र में इस पृष्ठ के माप हैं, हर लेआउट में 10.5px अंतर का वादा नहीं। हमने रैपर का निचला निर्देशांक SVG के निचले निर्देशांक से मिलाया। तीनों स्थितियों में SVG ऊँचाई 100px रही, इसलिए सुधार से ड्रॉइंग छोटी या क्रॉप नहीं हुई।

अकेले ग्राफ़िक के लिए ब्लॉक डिस्प्ले लें

लोगो अपनी पंक्ति में होना चाहिए तो उसी इमेज पर लेआउट नियम लगाएँ:

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

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

नियम लगाने के बाद रैपर फिर जाँचें। वह अब भी इमेज से नीचे बढ़े तो स्पष्ट ऊँचाई, पैडिंग, दूसरा चाइल्ड, सूडो-एलिमेंट या अतिरिक्त पंक्ति खोजें। ब्लॉक ग्राफ़िक के बाद लाइन ब्रेक या टेक्स्ट नोड अपनी सामग्री जोड़ सकता है। ऊपर का कोई ऐन्सेस्टर भी दिखती जगह के लिए ज़िम्मेदार हो सकता है।

सिलेक्टर सीमित रखें। पूरी साइट पर svg { display: block; } लगाने से जानबूझकर लेबल या वाक्य में रखे आइकन खिसक सकते हैं। अकेला ग्राफ़िक चाहिए ऐसा कंपोनेंट चुनें और उसके दूसरे उपयोग देखें।

टेक्स्ट पंक्ति के ग्राफ़िक इनलाइन रखें और संरेखण चुनें

शब्दों के पास आइकन या छोटे निशान के लिए इनलाइन रहना इच्छित लेआउट हो सकता है। vertical-align: bottom उसका निचला मार्जिन किनारा लाइन के नीचे से मिलाता है। vertical-align: middle पैरेंट की बेसलाइन और x-height लेता है; यह हर कंटेनर में हर इमेज को ज्यामितीय केंद्र में रखने का कमांड नहीं। MDN की vertical-align परिभाषाएँ देखें।

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

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

हमारे उदाहरण की नीचे-संरेखित स्थिति में केवल ग्राफ़िक था। इससे सिद्ध होता है कि उस खास पंक्ति में इस संरेखण ने पट्टी हटाई। इससे हर मिश्रित टेक्स्ट और आइकन पंक्ति की ऊँचाई या दिखावट समान होना सिद्ध नहीं होता।

पहले सुधार के तौर पर साझा टेक्स्ट कंटेनर पर line-height: 0 न लगाएँ। इससे इमेज दूरी के साथ टेक्स्ट लेआउट भी बदलता है। यह तत्काल लक्षण छिपा सकता है, लेकिन बाद में लेबल जोड़ने पर कंपोनेंट को नए ओवरराइड पर निर्भर छोड़ सकता है। पैरेंट की टाइपोग्राफ़ी बदलने से पहले इच्छित डिस्प्ले या संरेखण चुनें।

चित्र बदले बिना सुधार सत्यापित करें

एक बार में एक बदलाव करें, फिर जाँचें:

1. एलिमेंट सीमा: दिखता अंतर अब SVG बॉक्स के अंदर है या बाहर?
2. माप: क्या SVG की इच्छित चौड़ाई, ऊँचाई और अनुपात बने रहे?
3. पड़ोसी: क्या लेबल, लिंक और आइकन अब भी सही जगह हैं?
4. रिस्पॉन्सिव लेआउट: कंपोनेंट छोटे और बड़े आकारों पर ठीक काम करता है?
5. गणना की स्टाइल: इच्छित घोषणा प्रभावी है या अधिक विशिष्ट नियम उसे बदलता है?

बिना बॉर्डर या पैडिंग के सरल रैपर में उसका निचला निर्देशांक इमेज के निचले निर्देशांक से मिलाना उपयोगी जाँच है। वास्तविक कंपोनेंट में अंतर को त्रुटि कहने से पहले इच्छित पैडिंग और दूसरी सामग्री का हिसाब रखें।

छोटी स्क्रीन पर पृष्ठ की अलग व्यवस्था चाहिए तो वह भी जाँचें। एक अकेले लोगो पर काम करने वाला सुधार लपेटते टेक्स्ट वाली नेविगेशन पंक्ति के अनुकूल न हो सकता है। सीमा स्पष्ट होने पर अस्थायी पृष्ठभूमि रंग हटा दें।

इस कार्यप्रवाह में वेक्टराइज़ेशन कब उपयोगी है

मौजूदा संपादन योग्य SVG को यहाँ आम तौर पर CSS या कैनवास सुधार चाहिए। उसे फिर बनाने से पहले फ़ाइल रखें और प्लेसमेंट का कारण जाँचें।

निशान केवल PNG या JPG में हो और संपादन योग्य सीमाएँ चाहिएँ तो PerfectVector से स्रोत छवि को वेक्टर चित्र बनाएँ, फिर पृष्ठ पर रखने से पहले सीमा, खुली जगहें और स्रोत कैनवास देखें। ट्रेस गुणवत्ता स्कोरकार्ड उस अलग ज्यामिति जाँच में मदद करता है। वेक्टराइज़ेशन आकृतियाँ तैयार करता है; HTML लाइन बॉक्स अब भी पृष्ठ का CSS नियंत्रित करता है।

आम सवाल

margin: 0 मेरे SVG के नीचे का अंतर क्यों नहीं हटाता? जगह SVG मार्जिन के बजाय उसे रखने वाली टेक्स्ट लाइन की हो सकती है। SVG और रैपर सीमाएँ देखें, फिर अकेली इमेज के लिए ब्लॉक डिस्प्ले या इनलाइन ग्राफ़िक के लिए उपयुक्त ऊर्ध्व संरेखण आज़माएँ।

क्या display: block SVG की खाली जगह क्रॉप करता है? नहीं। यह HTML लेआउट में एलिमेंट की भागीदारी बदलता है। viewBox के अंदर खाली जगह बचती है और उसके लिए अलग चित्र या फ़िटिंग जाँच चाहिए।

vertical-align: bottom लूँ या middle? वही मान लें जो असली पंक्ति के अनुकूल है। Bottom लाइन के नीचे से मिलाता है; middle पैरेंट की बेसलाइन और x-height लेता है। किसी मान को हर जगह केंद्र मानने के बजाय अंतिम फ़ॉन्ट और पड़ोसी टेक्स्ट के साथ परिणाम देखें।

स्रोत

1. W3C — CSS लाइन-हाइट और ऊर्ध्व संरेखण — भाग लेने वाले बॉक्स, संरेखण और पैरेंट टाइपोग्राफ़ी लाइन ऊँचाई में कैसे योगदान देते हैं।
2. MDN — display — फ़्लो लेआउट में ब्लॉक और इनलाइन भागीदारी का अंतर।
3. MDN — vertical-align — बेसलाइन, निचला और मध्य संरेखण तथा वे बॉक्स जिन पर प्रॉपर्टी लागू होती है।

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