इस टूल के बारे में
SVG viewBox टूल अंदरूनी निर्देशांकों और बाहर दिखने वाले आकार का अंतर समझने में मदद करता है। शुरुआती बिंदु और आयाम देखने के लिए मौजूदा viewBox डालें, या चार मान भरकर नया एट्रिब्यूट बनाएँ। इसके लिए SVG फ़ाइल होना ज़रूरी नहीं है।
इस्तेमाल कैसे करें
- मौजूदा viewBox भरें या SVG फ़ाइल अथवा स्रोत से निर्देशांक क्षेत्र पढ़ें।
- न्यूनतम X, न्यूनतम Y, अंदरूनी चौड़ाई और ऊँचाई जाँचें।
- ज़रूरत के अनुसार निर्देशांक क्षेत्र बदलें। अनुपात की तुलना के लिए प्रदर्शन की चौड़ाई और ऊँचाई भरें।
- बना हुआ viewBox एट्रिब्यूट कॉपी करें और जाँचें कि चित्र अब भी पूरा दिखता है।
सुविधाएँ
- शुरुआती निर्देशांक धनात्मक या ऋणात्मक हो सकते हैं। अंदरूनी चौड़ाई और ऊँचाई शून्य से अधिक होनी चाहिए।
- चौड़ाई और ऊँचाई का अनुपात दिखाता है; उदाहरण के लिए 0 0 800 600 का अनुपात 4:3 है।
- अंदरूनी क्षेत्र और प्रदर्शन आकार की तुलना से पता चलता है कि दोनों का अनुपात समान है या अलग।
निर्देशांक प्रणाली समझें
- viewBox में क्रम है: min-x, min-y, width, height। पहले दो मान दिखने वाले निर्देशांक क्षेत्र का शुरुआती बिंदु हैं। अगले दो उस क्षेत्र की चौड़ाई और ऊँचाई हैं।
- उदाहरण के लिए, -100 -50 200 100 का मतलब है (-100, -50) से शुरू होने वाला क्षेत्र, जिसकी चौड़ाई 200 और ऊँचाई 100 है। इसका अनुपात 2:1 है।
- यदि प्रदर्शन क्षेत्र 400 × 300 और viewBox 0 0 800 600 हो, तो दोनों दिशाओं में हर अंदरूनी इकाई 0.5 CSS पिक्सेल के बराबर होगी। अनुपात अलग होने पर खाली जगह या कटने वाला हिस्सा preserveAspectRatio पर भी निर्भर करता है।
SVG सुरक्षा संबंधी जानकारी
प्रीव्यू के लिए सुरक्षा फ़िल्टर वाली स्थिर प्रति इस्तेमाल होती है। इसमें स्क्रिप्ट, क्लिक इवेंट या एनिमेशन नहीं चलते और बाहरी चित्र, फ़ॉन्ट या स्टाइल लोड नहीं होते। बाहरी संदर्भ, एम्बेड किए गए वेब पेज और असमर्थित सामग्री हटा दी जाती है, इसलिए प्रीव्यू मूल फ़ाइल से अलग हो सकता है। DOCTYPE या कस्टम एंटिटी वाले दस्तावेज़ समर्थित नहीं हैं।
SVG फ़ाइल या UTF-8 सोर्स कोड की सीमा 2 MiB है। तत्वों और टेक्स्ट सहित अधिकतम 20000 नोड और नेस्टिंग के 96 स्तर हो सकते हैं। बहुत बड़ी या जटिल फ़ाइल को पहले सरल करें।
निजता
आपकी SVG सामग्री केवल आपके ब्राउज़र में संसाधित होती है। इसे सर्वर पर अपलोड नहीं किया जाता।
इनपुट और परिणाम अपने आप नहीं सहेजे जाते। टूल खाली करने या पेज छोड़ने से पहले ज़रूरी फ़ाइलें डाउनलोड करें और मूल प्रति संभालकर रखें।
अक्सर पूछे जाने वाले प्रश्न
SVG viewBox के चार मानों का क्या मतलब है?
क्रम से ये न्यूनतम X, न्यूनतम Y, अंदरूनी चौड़ाई और अंदरूनी ऊँचाई हैं। शुरुआती निर्देशांक ऋणात्मक हो सकते हैं; चौड़ाई और ऊँचाई शून्य से अधिक होनी चाहिए।
viewBox="0 0 100 100" का क्या मतलब है?
यह (0, 0) से शुरू होने वाला 100 × 100 का क्षेत्र बताता है, जिसका अनुपात 1:1 है। वास्तव में कितने पिक्सेल में दिखेगा, यह बाहरी आयाम तय करते हैं।
viewBox का width और height से क्या संबंध है?
viewBox अंदरूनी निर्देशांकों का क्षेत्र तय करता है, जबकि width और height प्रदर्शन क्षेत्र तय करते हैं। ब्राउज़र अंदरूनी क्षेत्र को प्रदर्शन क्षेत्र में फिट करता है।
preserveAspectRatio क्या है?
अनुपात अलग होने पर यह चित्र की स्थिति और स्केल तय करता है। meet पूरा चित्र दिखाता है और खाली जगह छोड़ सकता है। slice क्षेत्र को पूरा भरता है और कुछ हिस्सा काट सकता है। none दोनों दिशाओं का स्केल अलग-अलग बदल सकता है।