jpg, png, svg 차이, 리액트에서 svg 다루기

최근 리액트 material ui 라이브러리를 처음 써보면서 icon을 가져와서 사용 한적이 있다.

확인해 보니 svg파일 형태를 가져오는 걸 알게됨

리액트에서 svg파일을 어떻게 사용하는지! 여러 이미지 파일 확장자 들과 차이점이 무엇인지 알아보자!

 

우선 웹에서 사용하는 이미지는 크게 비트맵과 벡터로 구분됨!

 

 

비트맵(Bitmap)

• 픽셀 단위의 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다.
• 일반적으로 사용하는 대부분의 이미지가 비트맵 형식(jpg, png ...)
• 그림판, 포토샵 같은 툴로 편집
• 픽셀 단위로 작업하므로 자연스러운 이미지 표현가능(장점)
• 이미지 확대 / 축소 시 계단현상 발생, 픽셀 수 가 많아질 수록 파일 커지는 단점

벡터(vector)

• 수학적 함수를 이용하여 도형이나 선을 그려서 표시하는 방식
• 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 가지고 이를 화면에 렌더링
• 비트맵과 달리 확대/축소 시 이미지가 깨지지 않음(장점)
• 비트맵과 비교하여 자연스러운 변화나 세밀한 표현이 어려움(단점)
• 일러스트같은 툴로 편집

 

정리하자면 이미지 표현방식(비트맵  vs 벡터)에 따라 파일 확장자가 구분되는 것!

그렇다면 같은 비트맵방식의 jpg, png의 차이는?

가장 큰 차이는 이미지 저장 방식에서 차이가 남 세부적인 특징은 다음과 같음

* jpg 
  - 손실 압축 기법(원본 품질 손실하며 압축)
  - 높은 압축률과 적은 용량
  - 풍경이나 인물 사진 같은 복잡한 사진에 적합

* png
  - 비손실 압축 기법
  - 투명도 지원
  - 일반적으로 jpg 보다 용량이 큼(압축률 차이), 그러나 간단한 이미지는 png가 더 효율적

* svg
  - 마크업언어(HTML / XML) 기반의 그래픽 표현 포맷
  - 해상도의 영향에서 자유로움
  - CSS Styling 가능
  - Javascript로 Event Handling 가능
  - 코드 혹은 파일로 사용가능

 

 

* 리액트에서 svg 사용

사용하는 방법은 크게 3가지 이다

1. svg 파일을 직접 html안에 넣는 것

https://iconsvg.xyz/ 이 사이트에서 svg 아이콘의 코드를 복사해서 리액트 app.js에 넣어 주었다.

import logo from "./logo.svg";
import "./App.css";
import cookie from "./cookie_icon.svg";

function App() {
  return (
    <>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="#000000"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
        <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
        <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
        <line x1="12" y1="20" x2="12.01" y2="20"></line>
      </svg>
      <div>Simple Wife svg Icon</div>
    </>
  );
}

export default App;

결과

svg 태그의 속성을 통해 커스텀 가능하지만 이 태그를 컴포넌트화 해서 사용가능하다

 

WifiIcon.jsx

import React from 'react';

const WifiIcon = () => (
    <svg
    xmlns="http://www.w3.org/2000/svg"
    width="50"
    height="50"
    viewBox="0 0 20 20"
    fill="none"
    stroke="#000000"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
    <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
    <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
    <line x1="12" y1="20" x2="12.01" y2="20"></line>
  </svg>
);

export default WifiIcon;

app.js

import logo from "./logo.svg";
import "./App.css";
import cookie from "./cookie_icon.svg";
import WifiIcon from './WifiIcon';

function App() {
  return (
    <>
      <WifiIcon/>
      <div>Simple Wife svg Icon</div>
    </>
  );
}

export default App;

이런 방법 보다는 파일을 직접 다운 받아서 쓰는 방법이 더 간편한듯 하다

 

2. img 처럼 사용하는 방법

import logo from "./logo.svg";
import "./App.css";
import cookie from "./cookie_icon.svg";
import WifiIcon from './WifiIcon';

function App() {
  return (
    <>
      <img src={cookie} />
      <div>Simple cookie svg Icon</div>
    </>
  );
}

export default App;

인터넷에서 .svg 아이콘을 다운받아서 이미지형식으로 불러옴 

태그에 className 지정해서 css 스타일링도 가능하다

 

3. 리액트 컴포넌트로 사용하는 방법

import logo from "./logo.svg";
import "./App.css";
import { ReactComponent as Cookie } from "./cookie_icon.svg";
import WifiIcon from './WifiIcon';

function App() {
  return (
    <>
      <Cookie width="300" height="300" />
      <div>Simple cookie svg Icon</div>
    </>
  );
}

export default App;