'사진', '이미지' 를 떠올렸을 때, 우리에게 익숙한 확장자는 .jpg
, .png
일 것입니다.
하지만 개발 할 때 왜 디자이너들이 SVG
아이콘을 사용하는 것일까요?
깨지지 않고, 용량이 적고, 출력이 빠르며, 수정과 애니메이션이 가능 하기 때문입니다.
SVG란 'Scalable Vector Graphics' 의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식입니다.
💡
XML
은 또 뭐에요?
XML(Extensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.
요약하자면, 우리가 잘 알고 있는 HTML과 같은 마크업 언어이고 HTML이 브라우저가 분석할 수 있는 태그로 기술되어있는 문서라면, XML은 웹페이지에서 데이터를 주고받기(통신하기) 위한 태그들로 기술된 문서입니다. <>
를 이용한 태그로 감싸진 구조이며 SVG와 같은 경우에는 이미지가 코드로 표현되었다고 생각하면 되겠습니다.
SVG는 결국 xml 이라는 마크업 언어의 종류이므로 css와 javascript로 수정이 가능합니다.
앞서 언급했던 .png와 .jpg와 같은 경우는 비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현입니다. 하지만 비트맵으로 이뤄져 있기 때문에 원래의 크기보다 크게 보여지게 할 경우 이미지가 깨져서 보인다는 문제점이 있습니다.
그러나 SVG는 벡터 기반으로 각 좌표에 점을 이어서 만들어지기 때문에 벡터 기반의 아이콘은 확대나 축소를 해도 깨지지 않고 선명하게 볼 수 있습니다. 또한 코드로 이뤄져 있기 때문에 위에서도 언급했 듯 코드를 수정함으로써 크기와 색깔 등을 쉽게 변경할 수 있고 용량 또한 png
나 jpg
를 여럿 첨부하는 것 보다 훨씬 적게 가져갈 수 있습니다.
먼저 Create-React-App
에서 사용하는 경우 입니다 ❗️
1번과 2번 같은 경우는 Create-React-App으로 생성한 프로젝트가 아닌 경우 webpack의 file-loader에 대한 설정을 해줘야 사용이 가능합니다.
(방법은 reference에 언급한 여기 를 참고해주세요!)
1. img src에 이용하는 경우 (기존의 png
나 jpg
이미지를 가져오는 방식)
import Cookie from 'assets/cookie_icon.svg';
<img src={Cookie} />
가장 익숙한 방식입니다. 하지만, 이 경우는 색깔이나 크기만 조금 다르게 생성된 다른 아이콘을 사용하기 위해선
또 새로운 svg 파일을 갖고 있어야 합니다. 이는 svg를 100% 활용한다고 보기 어렵다고 생각해요😢
2. svg를 React 컴포넌트로 사용하기 (추천)
import { ReactComponent as Cookie } from 'assets/cookie_icon.svg';
<Cookie />
이 방식을 가장 추천합니다. 이 방법을 사용하면, 하나의 svg
파일로 다양한 크기, 색상을 가진 아이콘을 이용할 수 있습니다.
<svg
xmlns="http://www.w3.org/2000/svg"
width="current"
height="current"
viewBox="0 0 24 24"
>
<path fill="current" fill-rule="evenodd" d="...." />
</svg>
다음과 같은 형태의 SVG 코드에서 바꾸고자 하는 요소를 "current"
로 바꿔줍니다.
current
로 값을 바꿔준 property
는, 사용하는 컴포넌트에서 다음과 같이 props
로 사용자가 원하는 대로 custom 할 수 있습니다!
import { ReactComponent as Cookie } from 'assets/cookie_icon.svg';
<Cookie width="10" height="10" fill="orange"/>
3. svgr을 통해 React Component로 사용하기 (추천)
$ yarn add @svgr/webpack -D
먼저 svgr
을 devDependency로 설치해 준 다음, webpack.config.js에 다음과 같이 작성해 줍니다.
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
//...
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
],
},
//...
};
다음과 같이 세팅을 완료하면,
import React from 'react';
import Cookie from 'assets/cookie_icon.svg';
const App = () =>{
return(
<div className='App'>
<Cookie />
</div>
);
}
export default App;
다음과 같이 { ReactComponent as Cookie }
와 같이 사용하지 않고도 바로 React Component
처럼 사용하실 수 있습니다!
이전 프로젝트를 진행하면서 "SVG는 코드니까 용량이 적어서 쓴다!" 라고만 생각했지, 코드로 이뤄져서 그걸 custom하여 React Component 처럼 재사용 할 수 있다는 점은 알고있지 못했습니다. 앞으로 아이콘을 추가하는 일이 생긴다면, 적극 활용하여 더 효율적으로 개발할 수 있을 것 같습니다 😁
잘 읽고 갑니다 !!