SVG 요소의 데이터 URL에서 이전

코카츠 준
코카츠 준
트위터

SVG <use> 요소의 data: URL 지원이 중단되도록 SVG 사양이 최근 업데이트되었습니다. Webkit가 SVG <use> 요소에서 data: URL을 지원하지 않기 때문에 이를 통해 웹 플랫폼의 보안 및 브라우저 간 호환성이 향상됩니다.

삭제 사유

SVG <use> 요소는 외부 SVG 이미지를 가져와 현재 문서에 클론할 수 있습니다. 이 기능은 강력한 기능이므로 동일 출처 SVG 이미지로 제한됩니다. 그러나 data: URL은 신뢰할 수 있는 유형 및 Sanitizer API의 우회와 같은 여러 보안 버그를 일으키는 동일 출처 리소스로 취급됩니다. 이러한 보안 버그를 해결하기 위한 최선의 방법이 논의되었습니다. 또한 Mozilla 및 Apple의 브라우저 공급업체 간에 최선의 방법은 SVG <use> 요소에서 data: URL에 대한 지원을 삭제하는 것이라는 합의에 이르렀습니다.

SVG <use> 요소에서 data: URL을 사용하는 사이트의 경우 몇 가지 대안이 있습니다.

동일 출처 SVG 이미지 사용

<use> 요소를 사용하여 동일 출처 SVG 이미지를 로드할 수 있습니다.

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

인라인 SVG 이미지 사용

<use> 요소를 사용하여 인라인 SVG 이미지를 참조할 수 있습니다.

<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>

blob과 함께 SVG 이미지 사용: URL

페이지의 HTML 또는 동일 출처 리소스 (예: 자바스크립트 라이브러리)를 제어할 수 없는 경우 <use> 요소에서 blob: URL을 사용하여 SVG 이미지를 로드할 수 있습니다.

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에서 이러한 대안의 라이브 예시를 확인할 수 있습니다.