[Next.js] Next.js에서 svg 이용하기 feat styled-component를 이용한 반응형

1. SVG란?

svg란 W3C가 개발한 개방형 표준으로 2차원 벡터 그래픽을 표현을 위한 XML 마크업 언어이다.

확대나 축소를 해도 픽셀이 깨지지 않고 화질이 유지되며 용량이 PNG, GIF 등 보다 작다는게 특징이다.

SVG 파일 형식의 가장 큰 특징이라 하면 벡터화된 그래픽 이미지라는 특징을 가진다.

벡터방식은 기존의 PNG, JPG 등이 가진 레스터 방식과는 다른 방식이다.

레스터 방식이란 이미지 모양과 색을 픽셀로 표현하는 방식으로 확대하면 깨질 수 있고 픽셀의 수가 많아지면 크기가 커진다.

수학적 함수를 이용하여 도형이나 선을 그려서 표시하는 방식으로 확대하였을 경우에 계단현상이 일어나지 않고 선명함을 유지한다. 그렇기 때문에 용량이 훨씬 작다.

하지만 벡터방식에는 자연스러운 색변화나 세밀한 표현이 어렵다는 단점이 존재한다.

2. Next.js에서 SVG사용하기

Next.js에서 SVG를 사용하기 위해서는 다음과 같은 라이브러리를 설치하여야 한다.

Install

$ npm i --dev @svgr/webpack

물론 이미지 소스에 그냥 넣어서 사용할 수 있으나 권장되는 방식이 아니기 때문에 여기서 따로 언급하지는 않겠다.

이후 next.config.js에 아래와 같은 코드를 추가해준다.

webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },

이제 svg 사용을 위한 준비는 끝났다.

컴포넌트로 들어가서

import TestSvg from "svg파일 경로"

const TestPage = () => {
	return(
    <TestSvg/>  
    )
}

위의 코드처럼 기존의 컴포넌트 불러오듯이 사용하면 된다.

3. styled-component 적용하기

svg파일에 styled-component를 적용하여 수정을 하고 싶다면 다음과 같이 사용할 수 있다.

import TestSvg from "svg파일 경로"
import styled from "styled-components";

const TestSvgStyled = styled(TestSvg)`
 width : ~~
`


const TestPage = () => {
	return(
    <TestSvgStyled/>  
    )
}

기존의 컴포넌트 불러오듯이 사용할 수 있다.

+반응형

svg에서 반응형을 하려면 svg 파일 자체를 좀 건드려야 한다.

svg파일로 들어가면 긴 코드들을 볼 수 있다.

이제 이 코드를 조금 수정해본다.

긴 코드 중에서 svg란 태그를 볼 수 있다.

svg 태그의 width, height를 current로 수정해준다.

<svg width="current" height="current" viewBox="0 0 324 348" fill="current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

이후 컴포넌트로 돌아와서 svg이미지를 감싸는 박스를 만들어준다.

import TestSvg from "svg파일 경로"
import styled from "styled-components";

const TestSvgBox = styled.div`
 width : 30rem,
height : 30rem
`


const TestPage = () => {
	return(
      <TestSvgBox>
	    <TestSvg width={"100%"} height={"100%"}/>  
      </TestSvgBox>
    )
}

로 감싸줘서 반응형 처리를 할 수 있다.