집 > 기사 > 웹 프론트엔드 > Webpack이 실제로 SVG를 로드하는 방법에 대한 자세한 예

Webpack이 실제로 SVG를 로드하는 방법에 대한 자세한 예

小云云원래의: 2017-12-27 13:15:391394검색

이 글에서는 Webpack으로 SVG를 로딩하는 실용적인 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

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

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

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

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

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

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

raw-loader

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

예를 들어 JavaScript로 다음과 같이 작성합니다.

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

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

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

즉, svgContent의 내용은 문자열 형식의 SVG와 같습니다. , SVG 자체는 HTML 요소이므로 SVG 내용을 얻은 후 다음 코드를 통해 SVG를 웹 페이지에 직접 삽입할 수 있습니다.

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

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

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

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 코드입니다.

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

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

<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- 인라인 로더는 SVG 압축 기능에 대한 지원을 추가합니다.

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

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

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

Webpack이 실제로 SVG를 로드하는 방법에 대한 자세한 예

관련 기사