หน้านี้ได้รับการแปลโดย Cloud Translation API

ย้ายข้อมูลออกจาก URL ข้อมูลในองค์ประกอบ SVG

Jun Kokatsu

ข้อกำหนด SVG ได้รับการอัปเดตเมื่อเร็วๆ นี้เพื่อนำการรองรับ URL data: ในองค์ประกอบ SVG <use> ออก ซึ่งจะช่วยปรับปรุงความปลอดภัยของแพลตฟอร์มเว็บและความสามารถในการใช้งานร่วมกันระหว่างเบราว์เซอร์ เนื่องจาก Webkit ไม่รองรับdata: URL ในองค์ประกอบ SVG <use>

สาเหตุในการนำออก

องค์ประกอบ SVG <use> สามารถดึงข้อมูลรูปภาพ SVG ภายนอกและโคลนลงในเอกสารปัจจุบัน ความสามารถนี้มีประสิทธิภาพสูง จึงจำกัดไว้สำหรับรูปภาพ SVG ต้นทางเดียวกันเท่านั้น อย่างไรก็ตาม ระบบจะถือว่า URL data: รายการเป็นทรัพยากรต้นทางเดียวกันซึ่งทำให้เกิดข้อบกพร่องด้านความปลอดภัยหลายประการ เช่น การข้าม Trusted Types และ Sanitizer API ข้อบกพร่องด้านความปลอดภัยเหล่านี้นำไปสู่การพูดคุยเกี่ยวกับแนวทางที่ดีที่สุดในการแก้ไข และเราได้มีความเห็นพ้องกันในหมู่ผู้ให้บริการเบราว์เซอร์ (จาก Mozilla และ Apple) ว่าวิธีที่ดีที่สุดหลังจากนี้คือการเลิกรองรับ data: URL ในองค์ประกอบ SVG <use>

สำหรับเว็บไซต์ที่ใช้ URL data: ในองค์ประกอบ SVG <use> จะมีทางเลือกหลายทาง

ใช้รูปภาพ SVG จากต้นทางเดียวกัน

คุณสามารถโหลดรูปภาพ SVG ต้นทางเดียวกันได้โดยใช้องค์ประกอบ <use>

<div class="icon">
  <svg width="1em" height="1em">
    <use xlink:href="svgicons.svg#user-icon"></use>
  </svg>
</div>

ใช้รูปภาพ SVG ในหน้า

คุณสามารถอ้างอิงรูปภาพ SVG ในบรรทัดโดยใช้องค์ประกอบ <use>

<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="user-icon" viewBox="0 0 32 32">
      <path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
    </symbol>
    <!-- And potentially many more icons -->
  </defs>
</svg>

<div class="icon">
  <svg width="1em" height="1em">
    <use xlink:href="#user-icon"></use>
  </svg>
</div>

ใช้รูปภาพ SVG กับ URL ประเภท BLOB

หากควบคุม HTML ของหน้าเว็บหรือทรัพยากรต้นทางเดียวกัน (เช่น ไลบรารี JavaScript) ไม่ได้ คุณสามารถโหลดรูปภาพ SVG โดยใช้ URL blob: ในองค์ประกอบ <use>

const svg_content = `<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="user-icon" viewBox="0 0 32 32">
        <path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
      </symbol>
      <!-- And potentially many more icons -->
    </defs>
  </svg>`;
const blob = new Blob([svg_content], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('href', url + '#user-icon');
svg.appendChild(use);
document.body.appendChild(svg);

ตัวอย่างที่เผยแพร่อยู่

คุณสามารถดูตัวอย่างการใช้งานจริงของทางเลือกเหล่านี้ใน GitHub