이미지 형식

SVG

도형, 텍스트와 선택적 애니메이션을 포함하는 XML 기반 벡터 그래픽입니다. 래스터 출력 시 특정 픽셀 해상도를 선택합니다.

형식 알아보기

SVG 형식에서 변환

SVG 이미지의 대상 형식을 선택하세요.

전체 변환 22개

표시된 경로에서는 레이어 병합, 래스터화, 톤 매핑 등의 처리가 필요하거나 애니메이션이 손실될 수 있습니다.

SVG 형식으로 변환

SVG 형식으로 변환할 원본 형식을 선택하세요.

전체 변환 39개

표시된 경로에서는 레이어 병합, 래스터화, 톤 매핑 등의 처리가 필요하거나 애니메이션이 손실될 수 있습니다.

SVG 소개

Scalable Vector Graphics

SVG는 XML로 2차원 그래픽을 설명하는 W3C 언어입니다. 경로, 도형, 텍스트, 그라데이션과 변환으로 고정 픽셀 배열만 기록하는 대신 그림을 그리는 방법을 기술합니다. 다양한 크기로 렌더링해야 하는 도표, 인터페이스 기호와 일러스트의 확장 가능한 그래픽에 적합합니다.

불투명도, 클리핑과 마스킹으로 투명한 합성을 만들 수 있습니다. SVG는 래스터 이미지, 글꼴, 스타일과 외부 리소스를 참조할 수도 있으며 이러한 의존성이 이식성에 영향을 줍니다. 적절한 환경에서는 애니메이션과 대화형 스크립트가 가능하지만 정적 이미지로 불러온 SVG는 더 제한된 처리 모드에서 실행될 수 있습니다.

도형이 선명하게 확대·축소되어야 하는 도표, 로고와 기호에 SVG를 사용하세요. SVG 안에 넣은 사진은 여전히 래스터 데이터이며 벡터 세부 정보를 얻지 못합니다. PNG나 JPEG로 내보낼 때 크기, 글꼴과 배경을 정하세요. 렌더링은 벡터, 텍스트와 애니메이션의 의미를 픽셀로 고정합니다.

주요 기능

압축
픽셀 코덱이 아님
투명도
지원
애니메이션
지원
확장자
.svg
MIME 유형
image/svg+xml
메타데이터
XML 메타데이터, title, desc
권장 용도
도표 및 확대·축소 가능한 기호
벡터 그래픽
경로, 도형 및 텍스트

SVG는 손실·무손실 픽셀 코덱 대신 기하 도형을 기술합니다. 전송용으로 XML을 압축할 수 있지만, 래스터화는 해상도를 고정하고 편집 기능을 잃을 수 있는 별도 작업입니다.

SVG의 역사

SVG는 구조화된 웹 그래픽을 위한 W3C 사양을 통해 발전하며, 이후 개정에서는 웹 플랫폼 기능과 더 긴밀하게 통합됩니다.

  1. 2001

    SVG 1.0

    SVG 1.0이 W3C 권고안이 되어 벡터 그래픽, 텍스트와 래스터 이미지 삽입을 위한 XML 언어를 정의합니다.

  2. 2003

    SVG 1.1

    SVG 1.1은 핵심 그래픽 모델을 유지하면서 사양을 개정하고 모듈화합니다. 모듈은 구현에서 여러 프로파일로 지원할 수 있는 기능을 설명합니다.

  3. 2011

    SVG 1.1 제2판

    제2판은 2011년 8월 16일 권고안으로 공개되었습니다. 다른 래스터 형식을 만드는 대신 명확화와 수정 사항을 반영합니다.

  4. 2018

    SVG 2 후보 권고안

    2018년 10월 4일 SVG 2 문서는 후보 권고안입니다. CSS 및 DOM과의 통합을 갱신합니다. 이 상태를 완성된 W3C 권고안과 혼동해서는 안 됩니다.

SVG 비교

형식마다 장점과 제약이 다릅니다. 이미지와 작업 목적에 맞게 선택하세요.

PNG

SVG 및 PNG 비교

PNG는 디코딩된 픽셀을 무손실로 보존하며 알파 채널을 담을 수 있습니다. 투명한 그래픽과 스크린샷에 유용하지만, 편집 가능한 문서 레이어나 카메라 센서 데이터를 보존하지는 않습니다. 사진 파일은 커질 수 있습니다.

PDF

SVG 및 PDF 비교

PDF는 텍스트, 벡터 경로와 래스터 이미지를 함께 담을 수 있는 페이지 기술을 보존합니다. 고정 레이아웃 문서에 적합합니다. 이미지를 추출하거나 페이지를 래스터화하려면 페이지, 해상도와 색상 처리 방법을 선택해야 합니다.

WebP

SVG 및 WebP 비교

WebP는 손실 또는 무손실 8비트 이미지 인코딩에 알파와 애니메이션을 결합합니다. 이러한 기능이 필요한 웹용 이미지에 적합하며, 고정밀 샘플과 편집 가능한 원본 구조에는 다른 작업 형식이 필요합니다.

ICO

SVG 및 ICO 비교

ICO는 여러 아이콘 크기를 하나의 리소스에 담습니다. Windows 애플리케이션 아이콘과 호환되는 파비콘에 적합합니다. 하나의 전체 크기 이미지에는 일반 이미지 형식이 더 간단하며, 아이콘을 내보낼 때는 크기를 정해야 합니다.

SVG 자주 묻는 질문

이 형식은 무엇을 저장하나요?

SVG는 XML로 2차원 그래픽을 설명하는 W3C 언어입니다. 경로, 도형, 텍스트, 그라데이션과 변환으로 고정 픽셀 배열만 기록하는 대신 그림을 그리는 방법을 기술합니다. 다양한 크기로 렌더링해야 하는 도표, 인터페이스 기호와 일러스트의 확장 가능한 그래픽에 적합합니다.

압축은 화질에 어떤 영향을 주나요?

SVG는 손실·무손실 픽셀 코덱 대신 기하 도형을 기술합니다. 전송용으로 XML을 압축할 수 있지만, 래스터화는 해상도를 고정하고 편집 기능을 잃을 수 있는 별도 작업입니다.

사진을 SVG로 변환하면 자유롭게 확대할 수 있나요?

사진을 넣으면 래스터 픽셀을 감쌀 뿐입니다. 경로를 복원하려면 별도의 트레이싱 과정이 필요하며 임의의 사진 세부 정보를 정확히 재현할 수 없습니다.

파일을 열기 전에 무엇을 확인해야 하나요?

글꼴, 연결 이미지, 필터와 처리 모드를 확인하세요. 독립적인 대화형 SVG와 이미지 요소로 사용하는 동일 파일은 제공하는 기능이 다를 수 있습니다.

다른 형식으로 내보내면 무엇이 달라지나요?

래스터 출력은 이미지 크기와 정적인 렌더링 상태를 선택합니다. 경로와 편집 가능한 텍스트를 잃으며 JPEG는 투명도도 병합합니다. 내장 래스터 이미지는 확대 시 제공 가능한 세부 정보를 제한합니다.

이 형식은 언제 유용한가요?

도형이 선명하게 확대·축소되어야 하는 도표, 로고와 기호에 SVG를 사용하세요. SVG 안에 넣은 사진은 여전히 래스터 데이터이며 벡터 세부 정보를 얻지 못합니다. PNG나 JPEG로 내보낼 때 크기, 글꼴과 배경을 정하세요. 렌더링은 벡터, 텍스트와 애니메이션의 의미를 픽셀로 고정합니다.

참고 자료