SVG파일 다루기

배성규·2024년 1월 17일
프로젝트
0

프로젝트

목록 보기
6/10


1. 목표🧐

프로젝트에서 사용하는 이미지 중에 svg파일이 있는 경우가 많습니다.
어떻게 하면 내부에 있는 값을 컴포넌트 처럼 쉽게 핸들링할 수 있을 지 정리해봤습니다.

2. SVG란 무엇인가?

  • SVG(Scalable Vector Graphics) 파일 포멧은 웹 사이트에서 차트, 일러스트레이션, 그래픽 등을 표현할 때 사용됩니다.
  • 벡터 파일이기 때문에 확대나 축소를 해도 해상도가 저하되지 않습니다.
  • SVG는 XML 코드로 작성되기 때문에 정보를 텍스트 형태로 저장합니다. 따라서 구글과 같은 검색엔진에서 SVG 그래픽을 키워드로 읽을 수 있고 이는 웹 사이트 검색 순위를 높이는 데 도움이 됩니다.

2-1. 장점과 단점

SVG파일을 사용하면 아래와 같은 장점이 있습니다.

  • 크기에 상관없이 항상 해상도를 유지합니다.
  • 기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다는 크기가 작습니다.
  • 텍스트 그대로 처리하기 때문에, 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있습니다.

그에 비해 단점은 아래와 같습니다.

  • 최신브라우저만 SVG 이미지를 지원하여 IE8 이전 브라우저에서는 호환이 어렵습니다.
  • SVG 파일 픽셀이 부족하여 고품질 디지털 사진을 표현하기에는 어렵습니다.

3. 리액트에서 SVG 파일 사용하기

리액트에서 SVG 파일을 사용하는 여러 방법 중에서 몇 가지 방법을 소개드리겠습니다.

  1. img태그 내부에 삽입 
import React from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import NoticeSVG from "../../assets/imgs/notice.svg";
import RecommendSVG from "../../assets/imgs/recommend.svg";
import mypage from "../../assets/imgs/mypage.svg";
import lookup from "../../assets/imgs/lookup.svg";

const MobileViewFooter = () => {
  const navigate = useNavigate();
  return (
    <FooterSection>
      <FooterDiv onClick={() => navigate("/Notice")}>
        <img src={NoticeSVG} alt="공지사항" />
        <p>공지사항</p>
      </FooterDiv>
      <FooterDiv onClick={() => navigate("/KyRecommend")}>
        <img src={RecommendSVG} alt="교양추천" />
        <p>인기교양추천</p>
      </FooterDiv>
      <FooterDiv onClick={() => navigate("/Graduate")}>
        <img src={lookup} alt="졸업요건조회" />
        <p>졸업요건조회</p>
      </FooterDiv>
      <FooterDiv onClick={() => navigate("/mypage")}>
        <img src={mypage} alt="마이페이지" />
        <p>마이페이지</p>
      </FooterDiv>
    </FooterSection>
  );
};
  • 크기를 지정하지 않는 경우에는 원본 SVG 파일 크기로 표시됩니다.
  • 크기를 변경하고 싶으면 CSS를 이용하여 수정하면 됩니다.
  1. 리턴시켜서 사용하기 
import React from 'react';

interface IconProps {
  fill: string;
}

const HomeIcon: React.FC<IconProps> = ({ fill }) => {
  return (
    <svg
      width="25"
      height="25"
      viewBox="0 0 25 25"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <mask
        id={`mask0_32_1915-${fill}`}
        style={{ maskType: 'alpha' }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="25"
        height="25"
      >
        <rect width="25" height="25" fill={`url(#home-${fill})`} />
      </mask>
      <g mask={`url(#mask0_32_1915-${fill})`}>
        <rect
          x="-2.14282"
          y="-2.14282"
          width="29.2857"
          height="29.2857"
          fill="#CACACA"
        />
      </g>
      <defs>
        <pattern
          id={`home-${fill}`}
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref={`#image0_32_1915-${fill}`} transform="scale(0.00390625)" />
        </pattern>
        <image
          id={`image0_32_1915-${fill}`}
          width="256"
          height="256"
          xlinkHref={`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFiQAABYkBbWid+gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAArpSURBVHic7d1bjJx1Gcfx7w5IjJYIciiJGjWoICYeImCkiSRGBAIeSECN0RuNohDBU7zTELjQO70gQmIM0RjkghCEiBJrG8AqEBQ8AJVDVGylQEspbW2puPXi7cp2u7M7s/O+/+f/zvP9JM9Fu9u+z8zm95vZmXdmZlAGq4EzgTOAk4ETgWOAVQe+vgvYCjwObAQ2AHcAzxTfVFIrXgVcQhPmWWD/mDML3Al8Hjiy8O6SVuhY4NvADsYP/bB5FrgKOLrg5ZA0hgFwMbCN9oK/cJ4GPgPMFLpMkkZwHPALugv+wlkLnFDkkkla0unAFsqFf242Ae8qcPkkDfFBYCflwz83O4D3d34pJR3iHGAPceGfmxeA8zu+rJLmqSX8loBUWG3htwSkQmoNvyUgdaz28FsCUkf6En5LQGpZ38JvCUgt6Wv4LQFpQn0PvyUgrdC0hN8SkMY0beG3BKQRTWv4LQFpGdMefktAGiJL+C0BaYFs4bcEpAOyht8SUHrZw28JKC3DbwkoKcNvCSgpw28JKCnDbwkoKcNvCSgpw28JKCnDbwkoKcNvCSgpw28JKCnDbwkoKcNvCSgpw28JKCnDbwkoKcNvCSgpw28JKCnDX8dYAirO8Nc1loCKMfx1jiWgzhn+uscSUGcMfz/GElDrDH+/xhJQawx/P8cS0MQMf7/HEtCKGf7pGEtAYzP80zWWgEZm+KdzLAEty/BP91gCGsrw5xhLQIcw/LnGEtD/Gf6cYwnI8CcfSyAxw+9YAkkZfmf+WAKJGH5nsbEEEjD8zlJjCUyxczH8zvLzAvAhNFUMvzPOWAJTxPA7KxlLYAoYfmeSsQR6zPA7bYwl0EOG32lzLIEeMfxOF2MJ9IDhd7ocS6Biht8pMZZAhQy/U3IsgYoYfidiLIEKGH4nciyBQIbfqWEsgQCG36lpLIGCDL9T4/SyBGaiFxjTucBNwMujF5EWsQ+4ELg1epFR9akADL/6oFcl0JcCMPzqk96UQB8KwPCrj3pRArUXgOFXn1VfAjUXgOHXNKi6BGotAMOvaVJtCdRYAIZf06jKEqitAAy/pll1JVBTARh+ZVBVCdRSAIZfmVRTAjUUgOFXRlWUQHQBGH5lFl4CkQVg+KXgEogqAMMvvSSsBCIKwPBLhwopgdIFYPil4YqXQMkCMPzS8oqWQKkCMPzS6IqVQIkCMPzS+IqUQNcFYPilleu8BLosAMMvTa7TEuiqAAy/1J7OSqCLAjD8Uvs6KYG2C8DwS91pvQTaSQjw2AB6O3kJSiI0D4LfRW0gKscEXA0k5vQgcO6B5i6ANwctIKmstsGPuVv/6yE0kFXcD+JZgUkZPA28A9szdA9gJXBO2jqSSrgb2gG8LLmVz0NuCz/9gkL009wTOD1hKUhmXAvfO/WHhZwMOgF8CZ5XcSFIRt9HcwO+f+ws/HFT
      </defs>
    </svg>
  );
};
  • 위 코드 처럼 변경하면 svg를 컴포넌트화시켜 props로 fill값을 내려 색깔을 변경해줄 수 있습니다. 
<HomeIcon fill = '#ffffff'/>
  1. ReactComponent 사용하기
    커스텀파일을 하나 만들어서 타입을 선언해줍니다. 
//custom.d.ts
declare module "*.svg" {
  import React = require("react");
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

그 후, tsconfig.json의 include옵션에 custom.d.ts를 추가해줍니다.

{
  "compilerOptions": {
    //code
  },
  "include": ["src", "custom.d.ts"]
}

그리고 ReactComponent를 사용하면 에러없이 사용할 수 있습니다.

아래 코드는 어느 페이지에 있냐에 따라 특정 SVG 색깔을 핸들링하는 코드입니다.
useLocation을 사용하여 path를 받아와 이에 해당하면 색깔을 핸들링할 수 있도록 만들었습니다. 

import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
import styled from "styled-components";
import { ReactComponent as Home } from "../../assets/imgs/home.svg";
import { ReactComponent as Mypage } from "../../assets/imgs/mypage.svg";
import { ReactComponent as Graduate } from "../../assets/imgs/graduate.svg";
import { ReactComponent as Recommend } from "../../assets/imgs/recommend.svg";
import theme from "../../constants/theme";

const MobileViewFooter: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const getFillValue = (path: string) => {
    return location.pathname === path ? theme.colors.selectFooter : "#cacaca";
  };

  return (
    <FooterSection>
      <FooterDiv onClick={() => navigate("/")}>
        <Home fill={getFillValue("/")} />
        <Text color={getFillValue("/")}>홈</Text>
      </FooterDiv>
      <FooterDiv onClick={() => navigate("/kyRecommend")}>
        <Recommend fill={getFillValue("/kyRecommend")} />
        <Text color={getFillValue("/kyRecommend")}>인기교양추천</Text>
      </FooterDiv>
      <FooterDiv onClick={() => navigate("/graduate")}>
        <Graduate fill={getFillValue("/graduate")} />
        <Text color={getFillValue("/graduate")}>졸업요건조회</Text>
      </FooterDiv>
      <FooterDiv onClick={() => navigate("/mypage")}>
        <Mypage fill={getFillValue("/mypage")} />
        <Text color={getFillValue("/mypage")}>마이페이지</Text>
      </FooterDiv>
    </FooterSection>
  );
};

export default MobileViewFooter;

변경할 svg값은 current로 변경해주면 적용됩니다.
아래 rect에서 current로 변경한 값을 확인할 수 있습니다. 

<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="mask0_32_1924" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
<rect width="25" height="25" fill="url(#mypage)"/>
</mask>
<g mask="url(#mask0_32_1924)">
<rect x="-10" y="-2.5" width="40" height="31.6667" fill="current"/>
</g>
<defs>
<pattern id="mypage" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_32_1924" transform="scale(0.00390625)"/>
</pattern>
<image id="image0_32_1924" width="256" height="256" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAABO+SURBVHic7d15kGdVecbx7wsjDPsiawk4yADjwhoYFRBwVMCF4BIqLHEJWzRGrQIlItFAIgjRKAZRwQ0MoJJIuWCxi6BBRgMFCsUUggQRZBk2nQGGWd78cW47PT3dQy+/c95z730+Vb+apkrvebq6z9Pn7ubuSDeY2ZbAdsDMYZ/NgHWAdZvP0NerAwubz4Jh/z4J/Ba4B7i7+fyfuy8u+b1IGaYCaCczWxfYG9gP2B/YmTS5c1hKKoSfAtcD17v77zKNJQWpAFrEzPYCDiFN+N2BaYFx7iWVwZXAD9z96cAsMkkqgMqZ2cuAI5rPtsFxxrIQ+D5wMXCVdhfaQwVQoWZ5fwzwbmDX4DgT9RhwCXC2u98ZHUZWTQVQETPbCPgA8CFg4+A4U+XApcDp7n5LdBgZnQqgAma2OXA88D5gveA4OVwBnObuP4sOIitSAQQyszWBE4GTgLWC45RwOfABd78nOogkKoAgZnYQcDbpXH2fLALOAM5w92ejw/SdCqAwM9sGOAt4W3SWYPeQVgOXRwfpMxVAQWZ2DPB5YO3oLBW5CHivuy+IDtJHKoACmtN6XwL+JjpLpe4CDnX3X0UH6ZvVogN0nZntBPwSTf5V2QGYa2bHRQfpGxVARmZ2NDAXmBWdpQWmA+ea2UXNikkK0C![](https://velog.velcdn.com/images/pangkyu/post/2175cbc6-c929-42e3-8ff8-4e2e233fb9a3/image.gif)
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"/>
</defs>
</svg>

4. 결과

  • 페이지 위치에 따라 푸터, 헤더의 색깔이 맞게 변경된다.

출처

profile
배성규
FE 유망주🧑‍💻
이전 포스트

리액트에 구글 애널리틱스를 연결해보자

다음 포스트

[React] 드래그 앤 드랍으로 파일 핸들링하기

0개의 댓글