โลโก้ SVG ตอบสนอง: เปลี่ยนองค์ประกอบเมื่อขนาดเล็ก

โลโก้ SVG แบบตอบสนองสลับจากองค์ประกอบละเอียดเป็นตรากะทัดรัดได้ แทนย่อทุกส่วนพร้อมกัน สร้างสององค์ประกอบก่อน แล้วใช้ต้นทาง <picture> ที่มีเงื่อนไข media เลือก ตรวจ currentSrc ภาพที่ความกว้างที่ตั้งใจรองรับ

ตัวอย่างใช้รูปแบบ Cove แบรนด์สมมติต้นฉบับของเรา เป็นข้าวหลามตัดโปร่งกลางกับตัวอักษรวาด และเวอร์ชันตราอย่างเดียว การสลับขึ้นกับความกว้าง viewport เอกสาร ตัวครอบแคบในหน้ากว้างไม่กระตุ้นการสลับเดียวกัน

ย่อขนาดกับเลือกองค์ประกอบแก้คนละงาน

การย่อปกติเก็บองค์ประกอบทั้งหมด สัญลักษณ์ ตัวอักษร และระยะห่างเล็กลงพร้อมกัน การกำกับแบบเลือกอีกองค์ประกอบที่สร้างไว้ การลบตัวอักษรหรือจัดตราใหม่เป็นการตัดสินใจออกแบบ ไฟล์ SVG ไม่ตัดสินใจเองเพียงเพราะปรับขนาดได้

เอกสาร HTML picture อธิบายต้นทางทางเลือกตามเงื่อนไข media และ img สำรอง ที่นี่ให้ SVG กะทัดรัดเมื่อกว้างไม่เกิน 599 พิกเซล และละเอียดในกรณีอื่น กรอบภาพยังขนาดเดิมแต่เนื้อหาเปลี่ยน

ย่อแบบเดิมหรือเลือกองค์ประกอบอื่น

ทำสองไฟล์ที่แก้ไขได้

บันทึกองค์ประกอบละเอียดต้นฉบับเป็น 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 ครบชุด

บันทึกเป็น starter.html ข้าง SVG สองไฟล์และให้บริการโฟลเดอร์ในเครื่อง หากมี 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) คุณลักษณะ media width ของ CSS ประเมินความกว้าง viewport ที่ 600 พิกเซลเงื่อนไขเป็นเท็จ จึงเลือกต้นทางละเอียดของ img ตัวเลขเป็น breakpoint ตัวอย่างของเค้าโครงนี้ ไม่ใช่กฎออกแบบแบรนด์

CSS เผื่อความสูงภาพ 80 พิกเซลและใช้ object-fit: contain ปรับภาพที่เลือกในกรอบองค์ประกอบ ทำให้ทั้งสองแบบเห็นโดยไม่ยืดเป็นสัดส่วนเดียวกัน ใช้สไตล์ปรับกับ img ที่แสดงต้นทางที่เลือก

alt="Cove" ระบุแบรนด์สมมติทั้งสองกรณี ให้ภาพของคุณมีข้อความทดแทนเหมาะสมตามเอกสาร HTML img ตรากะทัดรัดไม่ควรสูญชื่อที่เครื่องมือช่วยเข้าถึงอ่านได้เมื่อตัวอักษรที่เห็นหาย

เบราว์เซอร์เลือกอะไรที่สามความกว้าง

เราเปิดตัวอย่างตรงนี้ใน Chrome ที่ viewport เอกสารกว้าง 480, 600 และ 960 พิกเซล ทุกความกว้างโหลดภาพทั้งสามเสร็จ ตัวครอบหลักยังกว้าง 200 พิกเซล และตัวควบคุมแคบ 120 พิกเซล

เราตรวจ URL ที่เลือกผ่าน HTMLImageElement.currentSrc พร้อมขนาดภาพที่โหลด URL ที่เลือกอย่างเดียวไม่ทดสอบว่าโหลดสำเร็จ ตรวจ complete และขนาดธรรมชาติด้วย ต้นทางกะทัดรัดรายงาน 96×96 ส่วนละเอียด 300×96

องค์ประกอบภาพหลักยัง 200×80 ทั้งสามความกว้าง ตัวควบคุมแคบยัง 120×80 ที่ 480 พิกเซล ตรากะทัดรัดอยู่กลางแต่ละกรอบ ส่วนตัวควบคุมย่อปกติยังแสดงองค์ประกอบเต็ม ที่ 600 และ 960 พิกเซล การบีบตัวครอบเป็น 120 พิกเซลทำให้แบบละเอียดเล็กลง ไม่ได้เลือกไฟล์กะทัดรัด

ความต่างสำคัญในแถบข้างหรือคอมโพเนนต์ใช้ซ้ำ เงื่อนไข media HTML นี้ตอบ viewport ไม่ใช่ความกว้างตัวครอบที่วัด หากการเลือกโลโก้ต้องอิงพื้นที่คอมโพเนนต์ ให้วางแผนและทดสอบกลไกแยกแทนสมมติว่า breakpoint นี้ดูคอมโพเนนต์

ผลครอบคลุมไฟล์ต้นฉบับ หนึ่งเบราว์เซอร์ และสามความกว้าง viewport ที่ระบุ ไม่ยืนยันทุกเบราว์เซอร์ วิธีฝัง หรือปลายทางส่งออก ตัวอย่างยังไม่ทดสอบกฎ media ภายใน SVG ภายนอก

ตรวจกรอบและภาพแยกกัน

กรอบองค์ประกอบไม่ใช่ขอบเขตโลโก้ที่ระบาย ขอบเขตรูปทรงต้นทางละเอียดในเบราว์เซอร์คือ x8, y8, width274, height80 ภายใน viewBox 300×96 ส่วนกะทัดรัดคือ x8, y8, width80, height80 ภายใน viewBox 96×96 ขอบว่างเหล่านี้ยังเป็นส่วนของการคำนวณปรับต้นทาง

หากโลโก้ที่เลือกเล็กเกิน ให้ตรวจช่องว่างต้นฉบับก่อนเพิ่มขนาดองค์ประกอบ หากยืด ให้ตรวจกรอบภาพและกฎปรับ คู่มือ preserveAspectRatio อธิบายการคำนวณ viewport SVG ที่เกี่ยวข้อง การเปลี่ยนการแมปนั้นไม่ได้สร้างองค์ประกอบโลโก้อีกชุดด้วยตัวเอง

ตัวอย่างใช้ภาพ SVG ภายนอกผ่าน img ใช้คู่มือ SVG inline กับ img เมื่อเลือกวิธีฝังอื่น ไฟล์ SVG ที่ดาวน์โหลดหรือพิมพ์ไม่มีตัวห่อ HTML เลือกต้นทางนี้ ให้ส่งองค์ประกอบจริงที่ผู้รับต้องการและเก็บเวอร์ชันแก้ไขได้

เตรียมเวอร์ชันจากโลโก้แรสเตอร์

หากภาพแบรนด์เดียวเป็น PNG หรือ JPG และต้องการรูปทรงแก้ไขได้ ให้เตรียมโลโก้ SVG ด้วย PerfectVector ตรวจเงารูปร่างและช่องใน แล้วเก็บต้นฉบับสะอาด จากนั้นสร้างแบบละเอียดและกะทัดรัดแล้วทดสอบการเลือกในหน้า การแปลงเวกเตอร์เตรียมภาพ ไม่ตัดสินว่าลบอักษรใดหรือเลือก breakpoint SVG สะอาดเดิมไปจัดองค์ประกอบได้ทันที คู่มือแปลงเวกเตอร์ อธิบายว่าเมื่อใดแปลงช่วยได้

คำถามที่พบบ่อย

SVG ทำโลโก้เรียบง่ายบนจอเล็กเองหรือไม่? ตัวอย่างนี้เลือกระหว่าง SVG ที่สร้างสองไฟล์ การย่อหนึ่งไฟล์เก็บองค์ประกอบเดิม การลดรายละเอียดต้องตัดสินใจออกแบบแยก

ทำไมตัวครอบแคบยังแสดงโลโก้ละเอียด? เงื่อนไข width ของ source ใน picture ตรวจ viewport เอกสาร ใน viewport 600 และ 960 พิกเซลที่ทดสอบ แม้ตัวครอบ 120 พิกเซลยังใช้ต้นทางละเอียด

ยืนยันไฟล์ที่ใช้อย่างไร? ตรวจ currentSrc สถานะโหลด และขนาดธรรมชาติของภาพ ตัวอย่างพิมพ์ข้อมูลนี้พร้อมขนาดองค์ประกอบและตัวครอบ

การสลับตอบสนองจะรวมเมื่อดาวน์โหลด SVG หรือไม่? กฎเลือกต้นทางอยู่ในตัวห่อ HTML เก็บและส่ง SVG ละเอียดหรือกะทัดรัดที่ตรงการใช้จริงของผู้รับ

แหล่งข้อมูล

1. องค์ประกอบ HTML picture — ต้นทางทางเลือก เงื่อนไข media และพฤติกรรมสำรอง
2. คุณลักษณะ CSS media width — เงื่อนไข viewport เอกสารในตัวอย่าง
3. พร็อพเพอร์ตี currentSrc ภาพ — ตรวจ URL ต้นทางที่เลือก
4. CSS object-fit — ปรับองค์ประกอบที่เลือกในกรอบภาพ
5. องค์ประกอบ HTML img — การแสดงภาพและข้อความทดแทน

สำหรับโลโก้ PNG หรือ JPG ของคุณ ให้เตรียมต้นฉบับ SVG แก้ไขได้ ตรวจเส้นขอบและช่อง แล้วเก็บคู่แบบที่อนุมัติ จากนั้นตรวจต้นทางที่เลือกและองค์ประกอบที่เห็นที่ความกว้าง viewport ที่หน้าจะใช้