SVGR로 SVG를 React에 통합: viewBox 속성의 중요성

SVGR은 SVG(Scalable Vector Graphics) 파일을 React 컴포넌트로 변환하는 도구입니다. SVG 파일은 웹사이트에서 이미지를 표시하는 한 방법인데요. 크기를 늘리거나 줄여도 선명한 상태를 유지할 수 있는 이미지 파일입니다. SVGR을 사용하면 이 SVG 파일을 React 애플리케이션에서 쉽게 사용할 수 있는 컴포넌트로 바꿀 수 있습니다. 즉, SVG 파일을 가져와서 React 코드 안에서 바로 사용할 수 있게 도와주는 도구입니다.


  1. SVG 파일을 React 컴포넌트로 변환: SVGR은 SVG 파일을 React 컴포넌트로 변환하여 코드 내에서 직접 사용할 수 있도록 합니다. 이렇게 하면 SVG 파일을 React 코드 안에 포함시키고, 필요할 때마다 사용할 수 있습니다.

  2. SVG 최적화: SVGR은 SVG 파일을 최적화하여 파일 크기를 줄이고 로드 시간을 단축시킵니다. 최적화된 파일은 웹사이트를 빠르게 로드할 수 있게 도와줍니다.

  3. 사용자 정의 설정: SVGR은 다양한 설정 옵션을 제공하여 변환 과정을 사용자에 맞게 조정할 수 있습니다. 예를 들어, 특정 속성을 유지하거나 제거하는 등의 설정을 할 수 있습니다.

  4. 플러그인 및 API 지원: SVGR은 Webpack, Rollup 등의 번들러와 함께 사용할 수 있는 플러그인 및 CLI(Command Line Interface) 도구를 제공합니다. 이를 통해 프로젝트에 쉽게 통합할 수 있습니다.


주의사항: viewBox 속성

SVG 파일에는 viewBox라는 속성이 있습니다. viewBox는 SVG 이미지의 크기와 비율을 제어하는 데 사용되는데요. 이 속성이 있어야 이미지를 화면 크기에 맞게 조정할 수 있습니다. 그러나 SVGR의 기본 설정에서는 최적화를 위해 viewBox 속성을 자동으로 제거가 됩니다. 이렇게 되면 SVG 이미지 크기를 키웠을 때 퀄리티가 유지되지 않을수 있습니다. 즉 벡터 그래픽의 가장 큰 장점인 크기에 상관없이 선명한 화질을 유지하는 기능이 사라지는 것인데요.

이미지의 퀄리티가 중요하다면, viewBox 속성을 유지하는 것이 좋습니다. 따라서 Webpack 설정에서 removeViewBox: false로 설정하는것을 추천드립니다.


https://react-svgr.com/


SVGR - Transforms SVG into React Components. - SVGR

React-svgr

SVGR - Transforms SVG into React Components. - SVGR

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 6월 11일 오전 12:30

 • 

저장 48조회 3,014

댓글 2

함께 읽은 게시물

[오라클] 실제 환자 데이터분석 / AI 진단예측모델 개발 프로젝트 모집

I

... 더 보기

 • 

조회 82


< 가장 예쁜 사람이 아니라, 1등 할 사람에게 투표하라 >

1. 유명한 경제학자 케인스는 단기 투자 전략을 미인선발대회에 비유했다.

... 더 보기

고용노동부에서 주관하는 청년미래플러스 3기를 모집 중이라고 합니다.

구직자와 재직자 두 가지 트랙을 동시에 모집한다고 하네요.

  • 모집 기간: 6월 15일 ~ 8월 3일

... 더 보기

기술, 개발 학습 자료 7가지

최근 자주 사용하고 있는 기술, 개발 및 자기 계발 학습 자료를 모아서 공유합니다. 1️⃣ Educative.io 퀄리티가 상당히 높은 기술 관련 코스가 많은 것 같아요. 현재까지 코스 3개를 들었습니다. 책처럼 읽으면서 배우는 코스라 듣는 것보다 읽으면서 학습하는 걸 선호하는 분들에게 추천합니다. 주제를 깊이 파고들고 코드나 설계 예시가 많아서 잘 사용하는 것 같습니다. 최근에 Concurrency관련 코스를 듣고 있습니다. https://www.educative.io/ 2️⃣ Designing Data Intensi... 더 보기

Educative: Interactive Courses for Software Developers

Educative

Educative: Interactive Courses for Software Developers

 • 

댓글 9 • 저장 956 • 조회 22,026


성장이 어려운 환경에서의 개발자 생활

저런 개발자 생활도 한적이 있어서 다양한 생각이 든다.

“어이 신입, 탈출각이다” | 요즘IT

요즘IT

“어이 신입, 탈출각이다” | 요즘IT

길은 잃은 이력서



... 더 보기