SVG

SVG(Scalable Vector Graphics)는 W3C가 표준화한 2차원 벡터 그래픽용 XML 기반 형식입니다. 파일 확장자는 .svg이고, 미디어 타입은 image/svg+xml입니다.

SVG 파일은 픽셀을 저장하지 않습니다. 대신 도형, 경로, 텍스트, 그라디언트, 필터를 마크업으로 기술하고, 뷰어가 이 기술을 읽어 어떤 크기로든 그립니다.

SVG는 텍스트이므로 코드 편집기에서 수정할 수 있고, gzip으로 압축할 수 있으며, CSS로 스타일을 지정하고 JavaScript로 변경할 수 있습니다. 브라우저는 SVG를 기본으로 렌더링합니다. 디자인 도구는 아이콘, 로고, 일러스트를 SVG로 내보냅니다. SVG 파일에 래스터 이미지를 포함할 수도 있으며, 이 부분은 다른 비트맵과 같이 동작합니다.

벡터와 래스터 비교

	벡터(SVG)	래스터(PNG, JPG, WebP)
저장 대상	도형과 경로	픽셀
크기 조절	모든 크기에서 선명함	확대하면 흐려짐
적합한 용도	아이콘, 로고, 다이어그램	사진, 스크린샷
파일 크기	복잡도에 따라 커짐	픽셀 수에 따라 커짐

SVG를 사용하는 곳

• 웹사이트 로고와 아이콘 세트 제작에 쓰임.
• 코드로 생성하는 차트와 다이어그램에 쓰임.
• 웹 페이지의 일러스트와 간단한 애니메이션에 쓰임.
• SVG 파비콘을 지원하는 브라우저에서 파비콘으로 쓰임.

SVG와 스크린샷

스크린샷은 픽셀 격자이므로 본질적으로 래스터 이미지입니다. SVG 파일 안에 저장해도 확장 가능한 이미지가 되지 않으며, 포함된 비트맵은 확대하면 여전히 흐려집니다. 추적(tracing) 도구로 스크린샷을 벡터 경로로 변환할 수 있지만, 결과가 작은 인터페이스 텍스트와 맞지 않는 경우가 많고 파일 크기도 훨씬 커집니다.

스크린샷 작업 흐름에서 SVG가 쓰이는 곳

SVG는 스크린샷 주변 요소에 적합합니다. 화살표, 설명 상자, 로고, 이미지를 설명하는 다이어그램이 여기에 해당합니다. 일반적인 구성은 인터페이스를 담은 PNG 또는 WebP 스크린샷 위에 SVG 아이콘과 주석을 웹 페이지에서 배치하는 방식입니다.

자주 하는 실수

• 큰 PNG를 SVG에 넣고 벡터 파일이라고 함.
• PNG 또는 JPG만 허용하는 플랫폼에 SVG를 업로드함.
• 신뢰할 수 없는 SVG 파일을 확인 없이 엶. SVG에는 스크립트가 포함될 수 있음.

지금 고쳐야 할 이미지가 있나요?

Image Converter로 스크린샷을 PNG, JPG, WebP 사이에서 변환할 수 있습니다. Image Compressor로 파일 크기를 줄일 수 있습니다.

자주 묻는 질문

스크린샷을 SVG로 저장할 수 있나요?

SVG 파일로 감쌀 수는 있지만 비트맵 상태는 그대로입니다. 스크린샷에는 PNG를 사용합니다.

SVG가 PNG보다 작은가요?

단순한 도형에서는 보통 그렇습니다. 세부 묘사가 많은 이미지와 스크린샷에서는 보통 그렇지 않습니다.

출처

• Scalable Vector Graphics (SVG) 2 (W3C)
• SVG (MDN)

관련 자료

• 이미지 변환기: PNG, JPG, WebP 변환.
• 스크린샷 주석 도구: 스크린샷에 화살표와 라벨을 추가.
• 내보내기 형식: Temposhot이 내보내는 래스터 형식.