PerfectVector
लेखक: Irene Kim

रिस्पॉन्सिव SVG लोगो: छोटे आकार पर संयोजन बदलें

picture media शर्तों से विस्तृत या संक्षिप्त SVG लोगो चुनें। तीन viewport चौड़ाइयों पर चुना स्रोत जाँचें और डिज़ाइन चयन को स्केलिंग से अलग रखें।

8 मिनट का पठन
इस पेज पर

रिस्पॉन्सिव SVG लोगो हर हिस्सा साथ छोटा करने के बजाय विस्तृत संयोजन और संक्षिप्त चिह्न के बीच बदल सकता है। पहले दोनों संयोजन बनाएँ, फिर media शर्त वाले <picture> source से चुनें। समर्थित चौड़ाइयों पर चित्र का currentSrc जाँचें।

यह उदाहरण काल्पनिक Cove का हमारा मूल संयोजन लेता है: खींचे अक्षरों वाला खोखला हीरा और केवल चिह्न वाला संस्करण। बदलाव दस्तावेज़ viewport चौड़ाई पर निर्भर है। चौड़े पेज में संकरा कंटेनर वही बदलाव नहीं कराता।

स्केलिंग और डिज़ाइन चयन अलग काम हल करते हैं

साधारण स्केलिंग पूरा संयोजन रखती है: प्रतीक, अक्षर और दूरी साथ छोटे होते हैं। Art direction अलग बनाया संयोजन चुनता है। अक्षर हटाना या चिह्न फिर सजाना डिज़ाइन निर्णय है; SVG स्केलेबल होने भर से वह निर्णय अपने-आप नहीं करता।

HTML picture संदर्भ media शर्तों से वैकल्पिक स्रोत और img fallback बताता है। यहाँ 599 पिक्सेल या कम पर संक्षिप्त SVG और बाकी पर विस्तृत SVG देते हैं। चित्र फ़्रेम का आकार वही रहता है, सामग्री बदलती है।

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

दो संपादन योग्य फ़ाइलें बनाएँ

यह मूल विस्तृत संयोजन detailed.svg सहेजें। अक्षर खींचे पाथ हैं, इसलिए छोटे उदाहरण को फ़ॉन्ट फ़ाइल नहीं चाहिए:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>

संक्षिप्त संस्करण compact.svg सहेजें:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>

दोनों में हीरा पाथ समान है। विस्तृत फ़ाइल में पाँच पाथ हैं, संक्षिप्त में एक। किसी में इमेज एलिमेंट या लाइव टेक्स्ट नहीं है। दोनों viewBox चौड़ाइयाँ संयोजन अलग होने से अलग हैं, किसी एक फ़ाइल के समान स्केल होने से नहीं।

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

पूरा picture उदाहरण चलाएँ

इसे दोनों SVG के पास starter.html सहेजें और फ़ोल्डर स्थानीय सर्व करें। Python हो तो python3 -m http.server 8766 एक विकल्प है; फिर ब्राउज़र में http://localhost:8766/starter.html खोलें।

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>

Media शर्त (max-width: 599px) है। CSS का width media feature viewport चौड़ाई देखता है। 600 पिक्सेल पर शर्त false है, इसलिए विस्तृत img स्रोत चुना जाता है। संख्या इस लेआउट का उदाहरण breakpoint है, ब्रांड डिज़ाइन नियम नहीं।

CSS चित्र ऊँचाई 80 पिक्सेल सुरक्षित रखता है और चुना चित्र उसके एलिमेंट बॉक्स में फ़िट करने के लिए object-fit: contain लेता है। इससे दोनों संयोजन समान अनुपात में खिंचे बिना दिखते हैं। फ़िट शैली img पर लगाएँ, जो चुना स्रोत प्रस्तुत करता है।

alt="Cove" दोनों मामलों में काल्पनिक ब्रांड पहचानता है। HTML img संदर्भ के अनुसार अपने चित्र को उचित वैकल्पिक पाठ दें। दिखाई देते अक्षर हटें तो संक्षिप्त चिह्न का सुलभ नाम नहीं खोना चाहिए।

तीन चौड़ाइयों पर ब्राउज़र ने क्या चुना

हमने Chrome में ठीक यही उदाहरण 480, 600 और 960 पिक्सेल दस्तावेज़ viewport चौड़ाइयों पर खोला। हर चौड़ाई पर तीनों चित्र लोड हुए। मुख्य कंटेनर 200 पिक्सेल और संकरा नियंत्रण 120 पिक्सेल चौड़ा रहा।

दस्तावेज़ viewportडिज़ाइन-चयन चित्र, 200-पिक्सेल कंटेनरसाधारण स्केलिंग, 200-पिक्सेल कंटेनरडिज़ाइन-चयन चित्र, 120-पिक्सेल कंटेनर
480 पिक्सेलcompact.svgdetailed.svgcompact.svg
600 पिक्सेलdetailed.svgdetailed.svgdetailed.svg
960 पिक्सेलdetailed.svgdetailed.svgdetailed.svg

हमने चुना URL HTMLImageElement.currentSrc से और लोड चित्र के आयाम जाँचे। अकेला चुना URL सफल लोड की जाँच नहीं है: complete और natural आयाम भी देखें। हमारे संक्षिप्त स्रोत ने 96×96 और विस्तृत स्रोत ने 300×96 बताया।

मुख्य image एलिमेंट तीनों चौड़ाइयों पर 200×80 रहा। संकरा नियंत्रण 120×80 रहा। 480 पिक्सेल पर दोनों फ़्रेम में संक्षिप्त चिह्न केंद्रित था, जबकि साधारण-स्केल नियंत्रण पूरा संयोजन दिखाता था। 600 और 960 पिक्सेल पर कंटेनर 120 पिक्सेल करने से विस्तृत संयोजन छोटा हुआ; संक्षिप्त फ़ाइल नहीं चुनी।

साइडबार या पुन:प्रयोग योग्य कॉम्पोनेंट में यह अंतर महत्वपूर्ण है। यह HTML media शर्त viewport पर प्रतिक्रिया देती है, कंटेनर की मापी चौड़ाई पर नहीं। लोगो चयन कॉम्पोनेंट की उपलब्ध चौड़ाई से होना चाहिए तो उस अलग तंत्र की योजना और जाँच करें; न मानें कि breakpoint कॉम्पोनेंट देख रहा है।

परिणाम मूल फ़ाइलों, एक ब्राउज़र और तीन स्पष्ट viewport चौड़ाइयों तक हैं। हर ब्राउज़र, एम्बेडिंग विधि या निर्यात गंतव्य स्थापित नहीं करते। उदाहरण बाहरी SVG के भीतर media नियम भी नहीं जाँचता।

फ़्रेम और कलाकृति अलग जाँचें

एलिमेंट बॉक्स पेंट लोगो सीमा जैसा नहीं है। विस्तृत स्रोत की ब्राउज़र ज्यामिति सीमा 300×96 viewBox के भीतर x8, y8, width274, height80 थी। संक्षिप्त स्रोत की 96×96 viewBox में x8, y8, width80, height80 थी। मार्जिन स्रोत फ़िट गणना का हिस्सा रहते हैं।

चुना लोगो छोटा लगे तो एलिमेंट आयाम बढ़ाने से पहले स्रोत की खाली जगह देखें। खिंचा लगे तो चित्र बॉक्स और फ़िट नियम देखें। preserveAspectRatio गाइड संबंधित SVG viewport गणना समझाती है; वह मैपिंग बदलने से स्वयं दूसरा लोगो संयोजन नहीं बनता।

यह उदाहरण img से बाहरी SVG चित्र लेता है। एम्बेडिंग का दूसरा तरीका चुनना हो तो inline SVG बनाम img गाइड देखें। डाउनलोड या प्रिंट SVG में HTML स्रोत-चयन आवरण नहीं आता: प्राप्तकर्ता को वास्तविक ज़रूरी संयोजन दें और संपादन योग्य संस्करण रखें।

रास्टर लोगो से संस्करण तैयार करें

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

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

क्या SVG छोटे स्क्रीन पर लोगो अपने-आप सरल करता है? यह उदाहरण दो बनाए SVG चुनता है। एक फ़ाइल स्केल करने से मूल संयोजन रहता है; सरल करना अलग डिज़ाइन निर्णय है।

संकरा कंटेनर अभी विस्तृत लोगो क्यों दिखाता है? picture source की width शर्त दस्तावेज़ viewport देखती है। जाँचे 600 और 960 पिक्सेल viewport में 120-पिक्सेल कंटेनर ने भी विस्तृत स्रोत रखा।

कैसे पुष्टि करें कि कौन-सी फ़ाइल इस्तेमाल हुई? चित्र का currentSrc, लोडिंग अवस्था और natural आयाम जाँचें। उदाहरण इन्हें एलिमेंट व कंटेनर आयामों के साथ छापता है।

SVG डाउनलोड करने पर रिस्पॉन्सिव बदलाव भी मिलेगा? स्रोत-चयन नियम HTML आवरण में है। प्राप्तकर्ता के वास्तविक उपयोग के अनुसार विस्तृत या संक्षिप्त SVG रखें और दें।

स्रोत

  1. HTML picture एलिमेंट — वैकल्पिक स्रोत, media शर्तें और fallback व्यवहार।
  2. CSS width media feature — उदाहरण की दस्तावेज़-viewport शर्त।
  3. चित्र currentSrc property — चुने स्रोत URL का निरीक्षण।
  4. CSS object-fit — हर चुने संयोजन को चित्र फ़्रेम में फ़िट करना।
  5. HTML img एलिमेंट — चित्र प्रदर्शन और वैकल्पिक पाठ।

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

Blog से और

लोगो की खाली जगह: मार्जिन की गणना और संरक्षण

लोगो के लिए खाली जगह की इकाई चुनें, पूरा निषेध क्षेत्र निकालें और SVG में बचाएँ। आर्टवर्क के आकार को अतिरिक्त खाली कैनवस से अलग समझें।

लोगो को वेक्टराइज़ कैसे करें: ऑटो-ट्रेस बनाम दोबारा बनाना (और नकली वेक्टर कैसे पहचानें)

लोगो को वेक्टराइज़ करने के तीन तरीके: AI ऑटो-ट्रेस, Illustrator में दोबारा बनाना, या किसी डिजाइनर से करवाना। सही तरीका कैसे चुनें, और असली वेक्टर को नकली से कैसे अलग पहचानें।

PerfectVector

अपने लोगो या आर्टवर्क को
साफ़, एडिट करने योग्य SVG में बदलें

लोगो या आर्टवर्क वेक्टराइज़ करें

क्रेडिट कार्ड की ज़रूरत नहीं