SVG 활용하기

📢SVG란? 

SVG는 'Scalable Vector Graphics' 의 약어로
각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식을 이야기한다.

 

 

 

✅SVG를 사용하는 이유는?

PNG나 JPG는 비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현이다.

반면 SVG는 벡터 기반으로 각 좌표에 점을 이어서 만들어지는 개념이다. 벡터 기반의 아이콘은 확대나 축소를 해도 깨지지 않는 것과 같은 원리이다. 

 

✅프로젝트에서의 SVG 활용 사례

내가 참여한 프로젝트에서는 MobileFooter 컴포넌트에 SVG 아이콘을 활용하여 사용자 경험을 개선했다

하단 네비게이션 메뉴에서 각 아이콘을 클릭하면 fill이 채워지도록 하졌고 css의 scale을 이용해 크기를 자연스럽게 커지도록 하였다. 

 

export default function MobileFooter() {
   const menuItems = [
    {
      href: '/',
      label: '카드',
      icon: (
        <svg
          className={styles.svg}
          width="51"
          height="38"
          viewBox="0 0 51 38"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 19.8676C1 11.2095 1 6.88046 3.83129 4.19071C6.66261 1.50098 11.2195 1.50098 20.3333 1.50098H30C39.1137 1.50098 43.6708 1.50098 46.502 4.19071C49.3333 6.88046 49.3333 11.2095 49.3333 19.8676C49.3333 28.5257 49.3333 32.8549 46.502 35.5445C43.6708 38.2343 39.1137 38.2343 30 38.2343H20.3333C11.2195 38.2343 6.66261 38.2343 3.83129 35.5445C1 32.8549 1 28.5257 1 19.8676Z"
            stroke="#9ca3af"
            strokeWidth="3"
          />
          <path
            d="M20.3332 30.1982H10.6665"
            stroke="#9ca3af"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M15.4998 23.3105H10.6665"
            stroke="#9ca3af"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M1 15.2764H49.3333"
            stroke="#9ca3af"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M30 26.7548C30 24.5902 30 23.508 30.7078 22.8355C31.4157 22.1631 32.5549 22.1631 34.8333 22.1631C37.1118 22.1631 38.251 22.1631 38.9588 22.8355C39.6667 23.508 39.6667 24.5902 39.6667 26.7548C39.6667 28.9193 39.6667 30.0015 38.9588 30.674C38.251 31.3464 37.1118 31.3464 34.8333 31.3464C32.5549 31.3464 31.4157 31.3464 30.7078 30.674C30 30.0015 30 28.9193 30 26.7548Z"
            stroke="#9ca3af"
            strokeWidth="3"
          />
        </svg>
      ),
    },
    {
      href: '/travel',
      label: '여행',
      icon: (
        <svg
          className={styles.svg}
          width="30"
          height="32"
          viewBox="0 0 30 33"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.3851 31.288L14.0056 28.2425C14.5494 27.7763 15.4506 27.7763 15.9945 28.2425L19.6149 31.288C20.4539 31.7075 21.4795 31.288 21.7902 30.3868L22.4739 28.3202C22.6448 27.8229 22.4739 27.0926 22.101 26.7197L18.5738 23.177C18.3097 22.9284 18.1077 22.4312 18.1077 22.0738V17.6454C18.1077 16.9928 18.5894 16.682 19.1953 16.9306L26.8246 20.2247C28.0211 20.7375 29 20.1004 29 18.7952V16.7908C29 15.7497 28.2231 14.5533 27.2597 14.1493L18.5738 10.4045C18.3252 10.2958 18.1077 9.96947 18.1077 9.68978V5.0283C18.1077 3.5677 17.0355 1.84295 15.7303 1.17481C15.2642 0.941731 14.7203 0.941731 14.2542 1.17481C12.949 1.84295 11.8768 3.58324 11.8768 5.04384V9.70532C11.8768 9.98501 11.6593 10.3113 11.4106 10.4201L2.74029 14.1648C1.77691 14.5533 1 15.7497 1 16.7908V18.7952C1 20.1004 1.97891 20.7375 3.17536 20.2247L10.8047 16.9306C11.3951 16.6665 11.8923 16.9928 11.8923 17.6454V22.0738C11.8923 22.4312 11.6903 22.9284 11.4417 23.177L7.91454 26.7197C7.54162 27.0926 7.3707 27.8074 7.54162 28.3202L8.2253 30.3868C8.50499 31.288 9.53052 31.7231 10.3851 31.288Z"
            stroke="#9ca3af"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ),
    },
    {
      href: '/banking',
      label: '뱅킹',
      icon: (
        <svg
          className={styles.svg}
          width="36"
          height="36"
          viewBox="0 0 36 36"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1.3335 21.3333C1.3335 15.048 1.3335 11.9052 3.28611 9.95262C5.23875 8 8.38143 8 14.6668 8H21.3335C27.6188 8 30.7617 8 32.7142 9.95262C34.6668 11.9052 34.6668 15.048 34.6668 21.3333C34.6668 27.6187 34.6668 30.7615 32.7142 32.714C30.7617 34.6667 27.6188 34.6667 21.3335 34.6667H14.6668C8.38143 34.6667 5.23875 34.6667 3.28611 32.714C1.3335 30.7615 1.3335 27.6187 1.3335 21.3333Z"
            stroke="#9ca3af"
            strokeWidth="2"
          />
          <path
            d="M24.6668 7.99967C24.6668 4.85697 24.6668 3.28562 23.6905 2.30932C22.7142 1.33301 21.1428 1.33301 18.0002 1.33301C14.8575 1.33301 13.2861 1.33301 12.3098 2.30932C11.3335 3.28562 11.3335 4.85697 11.3335 7.99967"
            stroke="#9ca3af"
            strokeWidth="2"
          />
          <path
            d="M18.0003 26.8882C19.8413 26.8882 21.3337 25.6445 21.3337 24.1105C21.3337 22.5763 19.8413 21.3327 18.0003 21.3327C16.1593 21.3327 14.667 20.089 14.667 18.5548C14.667 17.0208 16.1593 15.7772 18.0003 15.7772M18.0003 26.8882C16.1593 26.8882 14.667 25.6445 14.667 24.1105M18.0003 26.8882V27.9993M18.0003 15.7772V14.666M18.0003 15.7772C19.8413 15.7772 21.3337 17.0208 21.3337 18.5548"
            stroke="#9ca3af"
            strokeWidth="2"
            strokeLinecap="round"
          />
        </svg>
      ),
    },
  ];
  
  return (
    <div className={styles.mobile}>
      <footer className={styles.footer}>
        <nav className={styles.nav}>
          <ul className={styles.menuList}>
            {menuItems.map((item) => {
              const isActive =
                item.href === '/'
                  ? pathname === item.href
                  : pathname.includes(item.href!);

              return (
                <li key={item.href} className={styles.menuItem}>
                  <Link href={item.href || '/'} className={styles.menuLink}>
                    <span
                      className={`${styles.iconWrapper}  ${isActive ? styles.active : ''}`}
                    >
                      {item.icon}
                    </span>
                    <span
                      className={`${styles.label} ${isActive ? styles.active : ''}`}
                    >
                      {item.label}
                    </span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </footer>
    </div>
  );
}

 

 

✅SVG 임포트 방식 비교

React와 Next.js에서는 여러 방법으로 SVG를 사용할 수 있다. 각각의 장단점을 살펴보자!

 

1. Inline SVG

const MyIcon = () => ( 
	<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
		<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" /> 
	</svg> 
);

• 장점:
  • 직접 JSX에 작성하므로 외부 파일 의존성이 없다. 
  • 동적으로 속성을 조정하기 용이하다. 
• 단점:
  • 코드 가독성이 떨어질 수 있다. 
  • 복잡한 SVG의 경우 JSX 코드가 길어질 수 있다. 

 

2. 파일 임포트

import MyIcon from './icon.svg'; 

const App = () => <MyIcon />;

• 장점:
  • SVG 파일을 별도로 관리할 수 있어 코드가 간결해진다. 
  • SVGR을 설정하면 SVG를 React 컴포넌트처럼 사용할 수 있다. 
• 단점:
  • 빌드 도구(Webpack, Vite 등)에 추가 설정이 필요하다. 

 

3. CSS 백그라운드 이미지

.icon { 
   background-image: url('./icon.svg');
   width: 24px; 
   height: 24px; 
 }

• 장점:
  • 스타일 파일에서 SVG를 관리하므로 레이아웃과 스타일을 분리할 수 있다. 
• 단점:
  • SVG의 색상이나 크기를 동적으로 변경하기 어렵다. 

 

✅React에서 SVG 스타일링

1. 속성을 활용한 동적 스타일링

React에서는 width, height, fill, stroke 같은 SVG 속성을 props로 전달하여 동적으로 조정할 수 있다. 

const DynamicIcon = ({ size = 24, color = 'black' }) => ( 
 <svg width={size} height={size} fill={color} xmlns="http://www.w3.org/2000/svg"> 
 	<circle cx="12" cy="12" r="10" stroke="black" strokeWidth="2" /> 
 </svg> 
 );

 

 

2. CSS를 통한 스타일링

CSS 모듈 또는 Tailwind CSS를 사용하면 SVG에 스타일을 쉽게 적용할 수 있다. 

import styles from './Icon.module.css'; 

const StyledIcon = () => ( 
    <svg className={styles.icon} xmlns="http://www.w3.org/2000/svg"> 
    	<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" /> 
    </svg> 
);

/* Icon.module.css */ 
.icon { fill: blue; transition: fill 0.3s; } 
.icon:hover { fill: red; }

 

 

✅SVG 최적화

1. SVGO를 활용한 최적화

SVG 파일을 최적화하면 불필요한 속성과 코드가 제거되어 성능이 향상된다. 

• 도구: SVGO
• 최적화 방법:

npx svgo ./icon.svg --output ./icon.optimized.svg

 

2. 컴포넌트화

SVG를 React 컴포넌트로 변환하면 재사용성과 코드 관리가 편리해진다. 

import React from 'react'; 

const Icon = ({ color = 'black' }) => ( 
    <svg fill={color} xmlns="http://www.w3.org/2000/svg"> 
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" /> 
    </svg> 
); 

export default Icon;

 

✅Next.js 환경에서의 SVG 사용 팁

1. 서버 사이드 렌더링 (SSR)

Next.js에서 SVG 컴포넌트를 SSR로 렌더링하려면 SVGR 설정을 추가해야 한다. 
next.config.js

module.exports = { 
	webpack(config) { 
        config.module.rules.push({
            test: /\.svg$/, 
            use: ['@svgr/webpack'], 
        }); 
	return config; 
   }, 
};

 

2. Lazy Load와 Dynamic Import

SVG 아이콘을 동적으로 로드하면 초기 로딩 속도를 개선할 수 있다. 

import dynamic from 'next/dynamic'; 

const DynamicIcon = dynamic(() => import('./MyIcon'), { ssr: false }); 

const App = () => <DynamicIcon />;

 

✅실제 사용 사례와 확장

애니메이션 추가 - SVG에 간단한 애니메이션을 추가하면 더욱 생동감 있는 UI를 만들 수 있다. 

const AnimatedIcon = () => ( 
    <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red">
            <animate attributeName="r" from="40" to="20" dur="1s" repeatCount="indefinite" /> 
        </circle>
    </svg> 
);

 

참고자료 

• https://brunch.co.kr/@ggk234/11