मूल मास्टर बचाकर लोगो दृष्टिगत केंद्र में रखें

लोगो को दृष्टिगत केंद्रित करने के लिए पहले उसकी दिखाई आकृति इच्छित फ़्रेम में ज्यामितीय रूप से केंद्रित करें। फिर गाइड छिपाकर और लोगों को दिखने वाले आकार पर छोटा स्थिति बदलाव मिलाएँ। दोनों में लोगो की आकृति समान रखें। स्वीकृत ऑफ़सेट को स्थिति निर्णय की तरह दर्ज करें ताकि वेक्टर मास्टर न बदले।

दृष्टिगत केंद्रण तब किया गया दृश्य स्थिति बदलाव है जब बराबर ज्यामितीय मार्जिन इच्छित संतुलन नहीं देते। यह उसी आकृति और संदर्भ का निर्णय है। क्षेत्रफल-केंद्र की गणना या तय पिक्सेल खिसकाव शुरुआती जगह सुझा सकते हैं, लेकिन कोई सार्वभौमिक सर्वोत्तम दृश्य स्थिति नहीं बताता।

उदाहरण 200 गुणा 140 फ़्रेम में एक मूल असममित चिह्न लेता है। चौड़ा बायाँ भाग और पतली दाईं नोक समान सीमा मापना और विकल्प मिलाना आसान करते हैं। नीचे की फ़ाइलें भुगतान वाले डिज़ाइन ऐप के बिना बना सकते हैं।

संतुलन आँकने से पहले ज्यामितीय आधार बनाएँ

बाउंडिंग बॉक्स मापी ज्यामिति का सबसे छोटा निर्देशांक-संरेखित आयत है। उसका मध्यबिंदु शुरुआती स्थिति में उपयोगी है। वह नहीं बताता कि हर ओर कितना भरा क्षेत्र है या कौन-सा भाग ध्यान खींचता है।

Rafal Tomal के ऑप्टिकल-डिज़ाइन उदाहरण ऐसे मामले दिखाते हैं जहाँ दृश्य स्थिति संख्यात्मक संरेखण से अलग है। वे असली परिणाम तुलना को समर्थन देते हैं, हर लोगो का एक सुधार नहीं।

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

SVG माप में getBBox() एलिमेंट के यूज़र निर्देशांक में सीमा देता है; अपना या पैरेंट का ट्रांसफ़ॉर्म शामिल नहीं करता। ब्राउज़र viewport माप अलग प्रश्न है। SVG बाउंडिंग-बॉक्स गाइड इन्हें अलग रखने का तरीका बताती है।

समान फ़्रेम में वही अछूता चिह्न मिलाएँ

नीचे का मूल पाथ x = 20 से 140 और y = 20 से 80 है। सीमा 120 गुणा 60 और मध्यबिंदु (80, 50) है। फ़्रेम का मध्य (100, 70) है। समूह को (20, 20) खिसकाने से सीमाएँ केंद्रित होती हैं।

कोड logo-geometric.svg सहेजकर ब्राउज़र में खोलें। हल्का आयत स्थिति फ़्रेम है, लोगो का हिस्सा नहीं।

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="0 0 200 140">
  <rect x="0.5" y="0.5" width="199" height="139"
        rx="8" fill="#f7f9fc" stroke="#cad4e2"/>
  <g transform="translate(20 20)">
    <path fill="#193b59"
          d="M20 20H70V35H140L70 55V80H20Z"/>
  </g>
</svg>

दिखती आकृति अब x = 40 से 160 और y = 40 से 100 है, जिससे क्षैतिज और लंबवत दोनों मार्जिन 40 इकाई हैं। यह आधार है, अंतिम जगह वहीं रहने की शर्त नहीं।

परीक्षण दृष्टिगत स्थिति के लिए दूसरी फ़ाइल transform="translate(32 20)" के साथ सहेजें। 12-इकाई दाएँ बदलाव केवल स्थिति बदलता है। पाथ का d, फ़िल, फ़्रेम और प्रदर्शन आकार समान रखें। SVG ट्रांसलेशन निर्देशांक तंत्र खिसकाता है; पाथ फिर लिखना नहीं चाहिए।

इस फ़्रेम में हमारी संपादकीय पसंद दाएँ वाला परीक्षण है: चौड़ा बायाँ भाग फ़्रेम के बीच के पास आता है और पतली नोक दूर दाएँ जाती है। दूसरे लेआउट में आपको ज्यामितीय रूप पसंद हो सकता है। चुनाव दर्ज करने से पहले असली आसपास के कंटेंट में दोनों मिलाएँ।

गाइड छिपाकर और उपयोग आकार पर स्थिति देखें

वास्तविक फ़्रेम और बैकग्राउंड में तुलना करें। निर्णय से पहले केंद्र रेखाएँ और बाउंडिंग-बॉक्स ओवरले छिपाएँ, वरना चिह्न के बजाय मापे मार्जिन देखते रह सकते हैं।

1. ज्यामितीय और परीक्षण रूप समान आकार पर खोलें।
2. इच्छित लेआउट में एक समय एक देखें, फिर साथ मिलाएँ।
3. जहाँ लोगो वास्तव में दिखेगा वह छोटा रूप जाँचें। फ़्रेम अनुपात और आसपास की सामग्री समान रखें।
4. पुष्टि करें कि बदलाव स्वीकृत खाली जगह बचाए और क्लिप न हो।
5. चुना ऑफ़सेट और संबंधित उपयोग दर्ज करें। नया असंतुलन बने तो ज्यामितीय आधार पर लौटें।

200 px फ़्रेम चौड़ाई पर 12-इकाई बदलाव 12 px है। 100 px पर वही SVG बदलाव 6 px है। यह viewBox के साथ स्केल होता है। हर आकार पर अलग तय 12 px CSS ऑफ़सेट जोड़ने से अलग नियम बनेगा।

विधि टिप्पणी: हमने दोनों पूरे SVG Chromium में रेंडर किए, viewport सीमा 200 px और 100 px पर मिलाई और समान पाथ डेटा जाँचा। पूरे आकार में ज्यामितीय रूप के बाएँ-दाएँ मार्जिन 40 px थे। परीक्षण में बायाँ 52 px और दायाँ 28 px, आधे आकार पर सापेक्ष बदलाव 6 px था। ये ज्यामिति जाँच और संपादकीय तुलना हैं, मानव धारणा अध्ययन नहीं।

दोनों रूपों में लोगो आकार बदल गया हो तो मास्टर लौटाएँ और केवल स्थिति ट्रांसफ़ॉर्म बदलें। नोक क्लिप हो तो लोगो बदलने से पहले viewport और ऑफ़सेट देखें। दूसरा संयोजन या बैकग्राउंड संतुलन बदले तो वह उपयोग अलग समीक्षा करें। चौड़े या लंबे फ़्रेम में फिट के लिए responsive SVG logo-lockup गाइड देखें।

मूल मास्टर और स्थिति निर्णय रखें

स्रोत लोगो को लेआउट placement wrapper से स्वतंत्र रखें। फ़्रेम आयाम, संदर्भ आकार, ट्रांसफ़ॉर्म और बैकग्राउंड दर्ज करें। इस उदाहरण का उपयोगी नोट: “मूल चिह्न 120 गुणा 60; स्थिति फ़्रेम 200 गुणा 140; परीक्षण ट्रांसफ़ॉर्म (32, 20); दूसरे संयोजनों के लिए फिर देखें।”

स्वीकृत ब्रांड एसेट में पहले से आकृति या निर्यात सीमा में ऑप्टिकल सुधार हो सकते हैं। वही एसेट और स्थिति निर्देश लें। केवल मार्जिन असमान होने पर स्थापित लोगो फिर डिज़ाइन न करें।

पूरे चिह्न की स्थिति सक्रिय टेक्स्ट को आधाररेखा से केंद्रित करने से भी अलग है। नियंत्रण के भीतर लेबल की समस्या हो तो SVG टेक्स्ट लंबवत संरेखण गाइड लें। बाकी स्रोत और डिलीवरी के लिए ब्लॉग गाइडें देखें।

स्थिति से पहले PerfectVector कहाँ काम आता है

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

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

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

क्या असममित लोगो के मार्जिन बराबर होने चाहिए?

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

क्या लोगो का क्षेत्रफल-केंद्र उसका दृष्टिगत केंद्र है?

ज्यामितीय केंद्र किसी विशेष ज्यामिति या क्षेत्र वितरण को बताता है। परीक्षण स्थिति सुझा सकता है, हर लोगो और फ़्रेम तथा बैकग्राउंड का महसूस संतुलन नहीं।

लोगो खिसकाने के लिए पाथ बदलूँ?

स्थिति तुलना में मूल पाथ रखें और अलग ट्रांसफ़ॉर्म या लेआउट स्थिति लें। मास्टर बचता और बदलाव मिलाना या लौटाना आसान होता है।

स्रोत

1. Rafal Tomal — डिज़ाइन को दृष्टिगत सटीक बनाना — संख्यात्मक संरेखण से अलग दृश्य सुधार के डिज़ाइनर के मूल उदाहरण।
2. MDN — SVGGraphicsElement getBBox() — ज्यामितीय आधार के स्थानीय निर्देशांक की सीमा समझाता है।
3. MDN — SVG transform — placement समूह से अपरिवर्तित पाथ का खिसकाव बताता है।

लोगो केवल रास्टर बचा हो तो PerfectVector से वेक्टर आकृतियाँ वापस पाएँ। सिलुएट संदर्भ से मिलाएँ, फिर उपयोग आकार पर ज्यामितीय और दृष्टिगत स्थिति तुलना करें और चुना ऑफ़सेट मास्टर से अलग सहेजें।