분명히 PC 모니터에서는 선명했던 우리 회사 로고가, 아이폰이나 갤럭시 같은 스마트폰으로 보면 테두리가 자글자글하고 흐릿하게 깨져 보이는 현상을 겪어보셨나요?
이것은 여러분의 스마트폰 화면이 너무 좋아서(고해상도 디스플레이) 발생하는 현상입니다. 이를 완벽하게 해결하는 마법의 포맷, SVG를 소개합니다.

1. 웹사이트에 SVG를 써야만 하는 3가지 이유

• ✓ 무한대 화질 (Infinite Scalability): 가로 10px 크기로 쓰든, 건물 외벽만 한 스크린에 띄우든 1%의 화질 저하도 없이 쨍하고 선명합니다.
• ✓ 깃털처럼 가벼운 용량: 복잡한 색상 정보가 아닌 코드로 이루어져 있어, 용량이 PNG의 10분의 1 수준밖에 되지 않습니다. 홈페이지 속도가 비약적으로 빨라집니다.
• ✓ 투명 배경 완벽 지원: 배경이 투명하여 어떤 색상의 웹사이트 배경 위에서도 자연스럽게 어우러집니다.

2. 상황별 올바른 이미지 포맷 가이드 (실무 팁)

SVG가 좋다고 해서 모든 이미지를 SVG로 만들 수는 없습니다. 용도에 맞게 포맷을 분리해서 사용하는 것이 하이엔드 웹사이트 관리의 핵심입니다.

<!-- 일반 이미지처럼 쉽게 삽입할 수 있습니다 -->
<img src="logo.svg" alt="나눔웹 공식 로고">

<!-- CSS에서 배경으로 사용할 때 -->
.icon-box {
    background-image: url('icon-check.svg');
}