SVG(Scalable Vector Graphics)란?

SVG(Scalable Vector Graphics)는 벡터 기반의 2D 그래픽을 표현하는 XML 기반의 이미지 형식이다.
즉, 크기를 조절해도 화질이 깨지지 않는 확장 가능한 벡터 그래픽을 제공하는 포맷이다.

📌 SVG의 특징

1️⃣ 확대/축소해도 품질 저하 없음

• 픽셀 기반 이미지(jpg, png)와 달리 벡터 형식이라 크기를 조절해도 깨지지 않음.
• 반면, PNG, JPG 같은 비트맵 이미지는 확대하면 깨짐(픽셀이 보임).

2️⃣ 파일 크기가 작고 성능이 좋음

• 텍스트 기반(XML)이라 코드만으로도 표현할 수 있음.
• 복잡한 그래픽도 가벼운 용량으로 표현 가능.

3️⃣ HTML, CSS, JavaScript로 조작 가능

• <svg> 태그를 이용해 직접 HTML에 삽입 가능.
• CSS 및 JavaScript를 활용하여 색상 변경, 애니메이션 적용 가능.

📌 SVG 예제

✅ 기본적인 원(circle) 그리기

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

 

🔹 설명

• <svg>: SVG 요소를 생성
• <circle>: 원을 그림
• cx="50", cy="50": 원의 중심 좌표
• r="40": 반지름
• stroke="black": 테두리 색상
• stroke-width="2": 테두리 두께
• fill="red": 내부 색상

📌 SVG와 PNG의 차이

                                                      SVG                                                     PNG

형식	벡터(graphics)	비트맵(raster)
확대 시 품질	깨지지 않음	깨짐 (픽셀화)
파일 크기	상대적으로 작음	크기가 클 수도 있음
애니메이션	가능 (CSS, JS로 제어)	불가능 (GIF 사용 필요)
수정 가능 여부	코드 수정 가능	불가능 (포토샵 같은 도구 필요)

📌 SVG 사용 방법

✅ HTML에서 직접 사용

<svg width="100" height="100">
  <rect width="100" height="100" fill="blue" />
</svg>

 

✅ CSS에서 배경으로 사용

background-image: url('image.svg');

✅ JavaScript로 동적 변경

document.querySelector("circle").setAttribute("fill", "blue");

📌 SVG는 언제 사용할까?

• 로고, 아이콘, 심볼 같은 확대해도 깨지지 않는 그래픽이 필요한 경우
• 애니메이션을 적용해야 하는 경우 (버튼 효과, 로딩 애니메이션 등)
• CSS나 JS를 이용해 동적으로 그래픽을 수정해야 할 때

SVG는 가벼우면서도 확장 가능한 그래픽 형식으로, 웹 UI, 아이콘, 로고, 애니메이션 등에 유용하게 활용됨.
PNG, JPG 같은 비트맵 이미지와는 다르게 벡터 방식이라, 확대해도 깨지지 않고 성능이 뛰어남.