ข้อมูลจำเพาะของ SVG เพิ่งอัปเดตเมื่อเร็วๆ นี้เพื่อเลิกรองรับ URL data: ในองค์ประกอบ <use> ของ SVG
ซึ่งจะช่วยปรับปรุงความปลอดภัยของแพลตฟอร์มเว็บ รวมถึงความเข้ากันได้ระหว่างเบราว์เซอร์ต่างๆ เนื่องจาก Webkit ไม่รองรับ URL data: ในองค์ประกอบ SVG <use>
สาเหตุในการนำออก
องค์ประกอบ SVG <use> จะดึงข้อมูลรูปภาพ SVG ภายนอกและโคลนลงในเอกสารปัจจุบันได้ การทำงานเช่นนี้มีประสิทธิภาพมาก ระบบจึงจำกัดไว้สำหรับรูปภาพ SVG ที่มีต้นทางเดียวกัน
แต่ระบบจะถือว่า URL data: เป็นทรัพยากรต้นทางเดียวกัน ซึ่งทําให้เกิดข้อบกพร่องด้านความปลอดภัยหลายอย่าง เช่น การข้ามประเภทที่เชื่อถือได้และ Sanitizer API
ข้อบกพร่องด้านความปลอดภัยเหล่านี้นำไปสู่การพูดคุยกันถึงวิธีที่ดีที่สุดในการแก้ไขปัญหาดังกล่าว เราเห็นพ้องกันระหว่างผู้ให้บริการเบราว์เซอร์ (จาก Mozilla และ Apple) ว่าวิธีที่ดีที่สุดในอนาคตคือการยกเลิกการรองรับ URL data: รายการในองค์ประกอบ <use> ของ SVG
สำหรับเว็บไซต์ที่ใช้ URL data: ในองค์ประกอบ <use> ของ SVG จะมีทางเลือกอีกหลายทาง
ใช้รูปภาพ 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 กับ BLOB: URL
หากควบคุม 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);