SVG

문 서

시작하기
이 튜토리얼은 SVG를 시작할 수 있도록 도움을 줄 것입니다.

가변 가능한 벡터 그래픽 (SVG)은 2차원의 벡터 그래픽을 기술하기 위한 XML (en-US) 기반 마크업 언어이다.  HTML이 텍스트를 표현하는 것처럼, SVG는 본질적으로 그래픽을 표현한다.

SVG는 텍스트 기반의 오픈 웹 표준이다. SVG는 의심할바 없이 CSS, DOM, SMIL 같은 다른 웹 표준과 함께 작동하기 위해서 디자인 되었다.

SVG 이미지들, 그것과 관련된 작동들은 XML XML 텍스트 파일로 정의되어있다. 그렇기에 검색될 수 있고, 색인 가능하고, 스크립트 될 수 있고 압축 가능하다. SVG파일은 추가적으로 어떤 텍스트 에디터에서나 드로잉 소프트웨어에서도 만들어질 수 있다.

SVG 요소 레퍼런스
SVG 요소들에 대한 상세한 정보를 담고있다.
SVG 속성 레퍼런스
SVG 속성들에 대한 상세한 정보를 담고있다.
SVG DOM 인터페이스 레퍼런스 (en-US)
전체 SVG DOM API에 대한 상세한 정보를 담고있다.
HTML 컨텐츠에 SVG 효과 적용하기
SVG는 HTML, CSS, JavaScript와 함께 동작한다. SVG를 사용해 일반적인 HTML와 웹애플리케이션을 개선할 수 있다.
Mozilla 에서 SVG
Mozilla에서 어떻게 SVG가 구현되었는지에 대한 참고 자료와 정보를 담고있다.

커뮤니티

도구들

애니메이션과 상호작용들

HTML과 마찬가지로 SVG은 도큐먼트 모델(DOM)와 이벤트를 가지고 있으며, JavaScript로 접근할 수 있다. 이를 통해 개발자는 풍부한 애니메이션과 이미지들의 상호작용을 생성할 수 있다.

  • svg-wow.org 에서 몇몇 실제 눈요기 SVG
  • SMIL 애니메이션 지원을 확장하기 위한  Firefox 확장 (Grafox
  • 상호작용하는 사진 조작
  • SVG의 foreignObject를 사용하는 HTML 변환들

매핑, 차트, 게임 그리고 3D 실험들

While 웹 컨텍스트를 향상히기는 방법으로 작은 SVG는 먼길을 갈 수 있는 동안 여기 많은 SVG 사용법들에 대한 몇몇 예제가 있다..