Webpack에서 SVG를 로드하는 방법-JS 튜토리얼-php.cn

Webpack에서 SVG를 로드하는 방법

亚连

풀어 주다： 2018-06-15 14:18:13

원래의

2500명이 탐색했습니다.

이 글에서는 Webpack으로 SVG를 로딩하는 실제 방법을 주로 소개하고 참고하겠습니다.

SVG는 벡터 그래픽의 표준 형식으로 주요 브라우저에서 지원되었으며 웹에서는 벡터 그래픽의 대명사가 되었습니다. 웹 페이지에서 비트맵 대신 SVG를 사용하면 다음과 같은 이점이 있습니다.

SVG는 비트맵보다 명확하며 임의 크기 조정 시 그래픽의 선명도를 파괴하지 않습니다. SVG는 고해상도 화면에서 이미지를 쉽게 해결할 수 있습니다.
그래픽 선이 상대적으로 단순하면 SVG 파일의 크기가 비트맵보다 작습니다. 오늘날 플랫 UI가 대중화되면 SVG는 대부분 더 작아집니다.
동일한 그래픽을 사용하는 SVG는 해당 고화질 그래픽보다 렌더링 성능이 더 좋습니다.
SVG는 HTML과 일치하는 XML 구문 설명을 사용하므로 매우 유연합니다.

그리기 도구는 .svg 파일을 하나씩 내보낼 수 있습니다. SVG의 가져오기 방법은 다음과 같이 CSS에서 직접 사용할 수 있습니다.

body {
 background-image: url(./svgs/activity.svg);
}

로그인 후 복사

HTML에서도 사용할 수 있습니다.

<img src="./svgs/activity.svg"/>

로그인 후 복사

즉, 이미지를 사용할 때와 똑같은 방식으로 SVG 파일을 직접 이미지로 사용할 수 있다는 것입니다. 따라서 3-19 파일 로더를 사용하여 이미지 로드 및 url-로더를 사용하는 두 가지 방법은 SVG에 동일하게 효과적입니다. 로더 테스트 구성에서 파일 접미사를 .svg로 변경하기만 하면 됩니다.

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg/,
    use: [&#39;file-loader&#39;]
   }
  ]
 },
};

로그인 후 복사

SVG는 텍스트 형식의 파일이기 때문에 위의 두 가지 방법 외에도 다른 방법이 있는데, 이에 대해 아래에서 하나씩 설명하겠습니다.

raw-loader

raw-loader를 사용하여 텍스트 파일의 내용을 읽고 JavaScript 또는 CSS에 삽입하세요.

예를 들어 JavaScript로 작성하면

import svgContent from &#39;./svgs/alert.svg&#39;;

로그인 후 복사

raw-loader 처리 후의 출력 코드는 다음과 같습니다.

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 内容

로그인 후 복사

즉, svgContent의 내용은 SVG이므로 문자열 형식입니다. 자체는 HTML 요소이므로 After SVG 콘텐츠를 가져온 후 다음 코드를 통해 SVG를 웹 페이지에 직접 삽입할 수 있습니다.

window.document.getElementById(&#39;app&#39;).innerHTML = svgContent;

로그인 후 복사

raw-loader 사용 시 관련 Webpack 구성은 다음과 같습니다.

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: [&#39;raw-loader&#39;]
   }
  ]
 }
};

로그인 후 복사

raw-loader는 SVG의 텍스트 내용을 직접 반환하며 CSS를 통해 액세스할 수 없습니다. SVG의 텍스트 내용을 표시하므로 이 방법을 사용한 후에는 SVG를 CSS로 가져올 수 없습니다. 즉, background-image: url(./svgs/activity.svg) 와 같은 코드는 CSS에 나타날 수 없습니다. .

이 예제는 프로젝트의 전체 코드를 제공합니다

svg-inline-loader 사용

svg-inline-loader는 위에서 언급한 raw-loader와 매우 유사합니다. 차이점은 svg-inline-loader가 분석한다는 것입니다. SVG의 내용을 제거하고 불필요한 코드 부분을 포함하여 SVG의 파일 크기를 줄입니다.

Adobe Illustrator 및 Sketch와 같은 그리기 도구를 사용하여 SVG를 만든 후 이러한 도구는 내보낼 때 실행할 웹 페이지에 불필요한 코드를 생성합니다. 예를 들어 다음은 Sketch에서 내보낸 SVG의 코드입니다.

<svg class="icon" verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
   stroke="#000">
 <circle cx="12" cy="12" r="10"/>
</svg>

로그인 후 복사

svg-inline-loader에서 처리한 후 다음과 같이 간소화됩니다.

<svg viewBox="0 0 24 24" stroke="#000"><circle cx="12" cy="12" r="10"/></svg>

로그인 후 복사

즉, svg-inline-loader는 압축을 추가합니다. SVG용 함수.

svg-inline-loader를 사용할 때 관련 Webpack 구성은 다음과 같습니다.

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: [&#39;svg-inline-loader&#39;]
   }
  ]
 }
};

로그인 후 복사

이 예제는 프로젝트의 전체 코드를 제공합니다.

위 내용은 모든 사람에게 도움이 되기를 바랍니다. 미래.