Webpack에서 SVG를 로드하는 방법

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

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

1. SVG는 비트맵보다 명확하며 임의 크기 조정 시 그래픽의 선명도를 파괴하지 않습니다. SVG는 고해상도 화면에서 이미지를 쉽게 해결할 수 있습니다.

2. 그래픽 선이 상대적으로 단순하면 SVG 파일의 크기가 비트맵보다 작습니다. 오늘날 플랫 UI가 대중화되면 SVG는 대부분 더 작아집니다.

3. 동일한 그래픽을 사용하는 SVG는 해당 고화질 그래픽보다 렌더링 성능이 더 좋습니다.

4. 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: ['file-loader']
   }
  ]
 },
};

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

raw-loader

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

예를 들어 JavaScript로 작성하면

import svgContent from './svgs/alert.svg';

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

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

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

window.document.getElementById('app').innerHTML = svgContent;

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

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

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: ['svg-inline-loader']
   }
  ]
 }
};

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

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

관련 기사:

vue.js에 vux를 통합하여 풀업 로딩 및 풀다운 새로 고침을 구현하는 방법

webpack의 vue 프로젝트 리소스 파일과 관련된 404 문제 보고(자세한 튜토리얼)

사용 webpack+vue2 프로젝트 구성

vue에서 두 번째 수준 연결을 구현하는 방법에 대해 기본적으로 첫 번째 값이 선택됩니다

ui-route를 사용하여 AngularJS에서 다중 계층 중첩 라우팅 구현(자세한 튜토리얼)

위 내용은 Webpack에서 SVG를 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!