SVG-Loader : 외부 SVG와 함께 작업하는 다른 방법

SVG는 굉장합니다 : 그들은 작고, 어떤 규모로든 날카 로워 보이며 별도의 파일을 만들지 않고도 사용자 정의 할 수 있습니다. 그러나 오늘날 웹 표준에는 누락 된 것이 있습니다.이를 형식의 사용자 정의 능력을 유지하는 외부 파일로 포함시키는 방법입니다.

예를 들어, 웹 로그로 저장된 웹 사이트 로고를 Web-Logo.svg로 사용한다고 가정 해 봅시다. 할 수 있습니다 :

 <img  src="/images/logo.svg" alt="SVG-Loader : 외부 SVG와 함께 작업하는 다른 방법" >

로고가 어디에서나 똑같이 보이면 괜찮습니다. 그러나 대부분의 경우 동일한 로고의 2-3 개의 변형이 있습니다. 예를 들어 슬랙에는 두 가지 버전이 있습니다.

위의 로고의 채우기 색상을 사용자 정의 할 수있는 방법이 있다면 모든 변형을 렌더링하기 위해 임의의 색상을 전달할 수 있습니다.

아이콘의 경우도 가져 가십시오. 당신은 이런 일을하고 싶지 않을 것입니다.

 <img  src="/icons/heart-blue.svg" alt="SVG-Loader : 외부 SVG와 함께 작업하는 다른 방법" >
<img  src="/icons/heart-red.svg" alt="SVG-Loader : 외부 SVG와 함께 작업하는 다른 방법" >

외부 SVG를 인라인 요소로로드하십시오

이를 해결하기 위해 SVG-Loader라는 라이브러리를 만들었습니다. 간단히 말해서, XHR을 통해 SVG 파일을 가져와 인라인 요소로로드하여 인라인 SVG와 마찬가지로 충전 및 스트로크와 같은 속성을 사용자 정의 할 수 있습니다.

예를 들어, 측면 프로젝트 SVGBox에 로고가 있습니다. 모든 변형에 대해 다른 파일을 작성하는 대신 하나의 파일을 갖고 채우기 색상을 사용자 정의 할 수 있습니다.

SVG 파일의 URL을 설정하기 위해 Data-SRC를 사용했습니다. 채우기 속성은 원래 SVG 파일의 채우기를 대체합니다.

라이브러리를 사용하기 위해서는 제가 보장해야 할 유일한 것은 제공되는 파일에 XHRS가 성공하기에 적절한 CORS 헤더가 있다는 것입니다. 도서관은 또한 파일을 로컬로 캐시하여 후속가 훨씬 빠릅니다. 첫 번째 부하의 경우에도 성능은 태그를 사용하는 것과 비슷합니다.

이 개념은 새로운 것이 아닙니다. SVG 인젝트는 비슷한 일을합니다. 그러나 SVG-Loader는 코드 어딘가에 라이브러리를 포함시켜야하므로 ( 태그를 통해 또는 JavaScript 번들) 사용하기가 더 쉽습니다. 추가 코드가 필요하지 않습니다.

동적으로 구분 된 요소와 속성의 변경도 자동으로 처리되므로 모든 웹 프레임 워크와 함께 작동합니다. React의 예는 다음과 같습니다.

하지만 왜?

이 접근법은 JavaScript 의존성을 소개하고 Inline 및 외부 소스를 포함하여 SVG를 사용하는 여러 가지 방법이 있기 때문에 정통을 느낄 수 있습니다. 그러나 이런 식으로 SVG를 사용하는 좋은 사례가 있습니다. 일반적인 질문에 대답하여 검토합시다.

우리는 단지 SVG 스스로 인라인 할 수 없습니까?

인라인은 SVG를 사용하는 가장 간단한 방법입니다. HTML에 SVG 코드를 복사하여 붙여 넣으십시오. 그것이 SVG-Loader가 궁극적으로하는 일입니다. 그렇다면 왜 다른 곳에서 SVG 파일을로드하는 추가 단계를 추가해야합니까? 두 가지 주요 이유가 있습니다.

1. 인라인 SVG는 코드를 장악하게 만듭니다. SVGS는 몇 줄에서 수백까지 일 수 있습니다. 인라인 SVG는 필요한 것이 몇 가지 아이콘이고 모두 작다면 잘 작동 할 수 있습니다. 그러나 상당한 규모가 있거나 많은 경우 큰 고통이됩니다. 왜냐하면 그들은 "비즈니스 로직"이 아닌 코드로 긴 텍스트가 길어지기 때문입니다. 코드는 구문 분석하기가 어려워집니다.
   
   

2. 외부 SVG는 훨씬 더 편리합니다. 복사 및 붙여 넣기가 종종 작업을 수행하지만 외부 SVG는 정말 편리 할 수 ​​있습니다. 앱에서 사용할 아이콘을 실험하고 있다고 가정 해 봅시다. 인라인 SVG를 사용하는 경우 SVG 코드를 얻기 위해 앞뒤로 이동하는 것을 의미합니다. 그러나 외부 SVG를 사용하면 파일 이름 만 알아야합니다.
   
   이 예를 살펴보십시오. GitHub에서 가장 광범위한 아이콘 저장소 중 하나는 재료 설계 아이콘입니다. SVG-Loader 및 UNPKG를 사용하면 5,000 개의 아이콘을 즉시 사용할 수 있습니다.

모든 SVG에 대한 HTTP 요청을 트리거하는 것보다 스프라이트를 만드는 것이 효과적이지 않습니까?

설마. HTTP2를 사용하면 HTTP 요청을하는 비용이 덜 관련이되었습니다. 그렇습니다. 번들링 (예 : 압축)의 이점은 여전히 ​​있지만 비 차단 리소스 및 XHR의 경우 전문가는 실제 시나리오에서 거의 존재하지 않습니다.

위와 같은 방식으로 50 개의 아이콘을로드하는 펜이 있습니다. (파일이 기본적으로 캐시되므로 시크릿 모드에서 열립니다) : :

태그 (SVG 기호)는 어떻습니까?

SVG 기호는 SVG 파일의 정의를 사용하여 분리합니다. 모든 곳에서 SVG를 정의하는 대신 다음과 같은 것을 가질 수 있습니다.

 <svg>
  <xlink : href="#heart-icon"></xlink>
</svg>

문제는 타사 도메인에서 호스팅되는 Symbols 파일을 사용하여 브라우저를 지원하지 않는다는 것입니다. 그러므로 우리는 다음과 같이 할 수 없습니다.

 <svg>
  <xlink : href="https://icons.com/symbols.svg#heart-icon"></xlink>
</svg>

Safari는 동일한 도메인에서 호스팅되는 기호 파일조차 지원하지 않습니다.

SVGS를 인간화하는 빌드 도구를 사용할 수 없습니까?

SVG를 URL에서 가져 와서 웹 팩 및 grunt와 같은 일반적인 번들러에서 내리는 명백한 방법을 찾지 못했지만 로컬로 저장된 SVG 파일을 인화하는 데 존재합니다. 이를 수행하는 플러그인이 존재하더라도 번들러를 설정하는 것이 간단하지는 않습니다. 사실, 나는 프로젝트가 복잡한 수준에 도달 할 때까지 종종 그것들을 사용하지 않습니다. 또한 인터넷의 대다수는 웹 팩 및 반응과 같은 것들과 외계인이라는 것을 알아야합니다. 간단한 스크립트는 훨씬 더 넓은 매력을 가질 수 있습니다.

태그는 어떻습니까?

그러나 단점은 동일한 도메인에서 호스팅되지 않는 한 SVG의 속성을 사용자 정의 할 수 없다는 것입니다 (및 태그는 CORS 헤더를 존중하지 않습니다). 파일이 동일한 도메인에서 호스팅 되더라도 다음과 같이 채우기를 조작하려면 JavaScript가 필요합니다.

요컨대, 외부 SVG 파일을 이러한 방식으로 사용하면 아이콘 및 기타 SVG 자산을 사용하는 것이 매우 훌륭합니다. 앞에서 다루었 듯이, UNPKG로, 우리는 추가 코드가 필요하지 않고 Github에서 아이콘을 사용할 수 있습니다. 번들러에서 파이프 라인을 만들어 SVG 파일이나 모든 아이콘에 대한 구성 요소를 처리하지 않고 CDN에서 아이콘을 호스팅하지 않을 수 있습니다.

SVG 파일을 이런 방식으로로드하면 비용이 거의 들지 않고 많은 이점이 있습니다.

위 내용은 SVG-Loader : 외부 SVG와 함께 작업하는 다른 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!