श्रेणी: डेवलपर टूल

SVG viewBox एडिटर

हमारा अपना विचारकोई टूल नहीं मिला?

किसी SVG का viewBox हाथ से पढ़ें और फिर से लिखें

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

SVG पूर्वावलोकन
आउटपुट
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" rx="16" fill="#0f766e" />
  <circle cx="60" cy="60" r="34" fill="#f4d35e" />
</svg>

कुछ भी अपलोड नहीं होता। मार्कअप को केवल इसी पेज पर पार्स करके फिर से लिखा जाता है।

इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।

यह टूल क्या करता है

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

इस्तेमाल कैसे करें

  1. <svg> टैग वाला SVG मार्कअप पेस्ट करें।
  2. चारों फ़ील्ड पहले से भरने के लिए "मौजूदा viewBox लोड करें" पर क्लिक करें, या अपने खुद के min-x, min-y, चौड़ाई और ऊँचाई टाइप करें।
  3. पूर्वावलोकन देखें, फिर फिर से लिखा गया SVG मार्कअप कॉपी करें।

निजता

यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।

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

क्या इससे मेरा SVG कहीं अपलोड होता है?
नहीं। मार्कअप को आपके ब्राउज़र टैब में साधारण स्ट्रिंग मिलान से पार्स और फिर से लिखा जाता है; कुछ भी सर्वर पर नहीं भेजा जाता।
चौड़ाई और ऊँचाई एट्रिब्यूट का क्या होता है?
वे बिल्कुल वैसे ही रहते हैं। viewBox बदलने से मौजूदा व्यूपोर्ट के भीतर जो बना है वह फिर से स्केल होता है, ठीक उसी तरह जैसे ब्राउज़र इसे लागू करता है, न कि तत्व का आकार ही बदल जाता है।
पूर्वावलोकन कभी-कभी खाली क्यों दिखता है?
शून्य चौड़ाई या ऊँचाई, या ऐसा viewBox जो आर्टवर्क से ओवरलैप ही न हो, उसे क्रॉप करके कुछ भी नहीं छोड़ता। बॉक्स चौड़ा करें या min-x/min-y मान जाँचें।