SVG 파일이란? 열기, 만들기, 편집 및 변환 가이드
SVG는 XML로 도형을 설명하는 벡터 이미지입니다. 픽셀 격자 대신 경로, 채우기, 선을 저장하므로 로고, 아이콘, 차트와 일러스트가 어떤 크기에서도 선명합니다.
SVG의 기본
SVG는 Scalable Vector Graphics의 약자이며 W3C의 개방형 웹 표준입니다. PNG는 픽셀을 저장하지만 SVG는 그리기 명령을 저장합니다. viewBox는 내부 좌표계를, width와 height는 기본 표시 크기를 지정합니다.
사용하기 좋은 경우
로고, UI 아이콘, 지도, 다이어그램, 선화와 CSS 또는 JavaScript 애니메이션에 적합합니다. 사진과 질감은 PNG나 JPG가 더 적합하며 복잡한 자동 추적은 래스터보다 파일이 커질 수 있습니다.
SVG 파일 열기
Chrome, Firefox, Safari 또는 Edge로 파일을 끌어다 놓으면 됩니다. 확대, 잘림과 viewBox를 확인하려면 SVG Viewer를 사용하세요. Inkscape, Illustrator, Figma는 편집용이고 코드 편집기는 XML 확인용입니다.
SVG 만들기
벡터 프로그램에서 내보내거나 간단한 도형을 직접 작성할 수 있습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
<title id="title">Blue circle and orange square</title>
<circle cx="35" cy="40" r="24" fill="#2563eb" />
<rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>
독립 SVG에는 네임스페이스가 필요합니다. 의미 있는 이미지에는 title을 추가해 보조 기술이 내용을 설명할 수 있게 하세요.
편집과 변환
노드와 곡선은 벡터 프로그램에서 편집하고, 색상과 viewBox는 XML에서 직접 바꿀 수 있습니다. SVG Editor와 SVG Viewer에서 결과를 확인하고, 외부 파일은 SVG Sanitizer로 정리하세요.
- SVG to PNG: 투명한 고정 이미지.
- SVG to JPG: 투명도가 없는 미리보기.
- SVG to PDF: 검토와 인쇄.
- SVG to Data URI: CSS 또는 HTML 인라인.
게시 전 확인
렌더링, viewBox, 비율, 잘림과 대비를 확인하세요. 불필요한 메타데이터를 제거하고 신뢰할 수 없는 파일을 정리한 뒤 SVG Optimizer로 최종 파일을 압축합니다. 편집 가능한 원본은 별도로 보관하세요.
자주 묻는 질문
SVG가 PNG보다 좋은가요?
크기 조절이 필요한 도형은 SVG, 사진과 고정 픽셀은 PNG가 적합합니다.
디자인 프로그램 없이 열 수 있나요?
네. 브라우저나 SVG Viewer에서 바로 표시됩니다.
PNG를 SVG로 바꿀 수 있나요?
추적 기능으로 경로를 만들 수 있지만 근사 결과입니다. 단순한 그림일수록 좋습니다.
SVG가 빈 화면으로 보이는 이유는 무엇인가요?
viewBox, 잘림, 배경, 필터와 XML 문법을 확인하세요.
SVG는 안전한가요?
업로드 파일을 신뢰할 수 없는 XML로 취급하고 삽입 전에 정리하세요.
SVGView 작업 순서
SVG Viewer에서 확인하고 SVG Editor에서 편집한 뒤 SVG Sanitizer로 정리하고 SVG Optimizer로 최적화합니다. 목적에 필요할 때만 변환하세요.