SVG

문 서

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

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

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

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

SVG 요소 레퍼런스
SVG 요소들에 대한 상세한 정보를 담고있다.
SVG 속성 레퍼런스
SVG 속성들에 대한 상세한 정보를 담고있다.
SVG DOM 인터페이스 레퍼런스
전체 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 사용법들에 대한 몇몇 예제가 있다..