SVG: Scalable Vector Graphics

SVG 시작하기

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다.

SVG 이미지와 그 동작 방식은 XML 텍스트 파일로 정의합니다. 따라서 검색, 색인, 스크립트 적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능합니다.

JPEG와 PNG 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서 쉽게 처리할 수 있습니다. 적절한 라이브러리를 함께 사용하면 SVG 파일을 필요에 따라 즉각 현지화하는 것도 가능합니다.

SVG는 World Wide Web Consortium(W3C)가 1999년부터 개발하고 있습니다.

SVG 자습서도 방문해보세요.

문서

SVG 요소 참고서

각각의 SVG 요소에 대한 세부 정보입니다.

SVG 특성 참고서

각각의 SVG 특성에 대한 세부 정보입니다.

SVG DOM 인터페이스 참고서

JavaScript 상호작용을 위한 SVG DOM 인터페이스의 세부 정보입니다.

HTML 콘텐츠에 SVG 효과 적용하기

SVG는 HTML, CSS, JavaScript와 사용할 수 있습니다. SVG를 사용해서 평범한 HTML 페이지나 웹 어플리케이션을 향상하세요.

도구

예제