시작하기
이 튜토리얼은 SVG를 시작할 수 있도록 도움을 줄 것입니다.
이 튜토리얼은 SVG를 시작할 수 있도록 도움을 줄 것입니다.
확장가능한 벡터 그래픽 (SVG)은 2차원의 벡터 그래픽을 기술하기 위한 XML 마크업 언어이다. SVG는 본질적으로 어떤 XHTML을 그래픽화 하기 위해 텍스트화 하기 위한 것이다.
SVG는 Adobe사가 소유한 Flash 기술과 유사하지만, W3C 권고라는 점에서 Flash 기술과는 차별된다(즉, 표준이다). 그리고 플래시가 폐쇄적인 바이너리 형식인 데 반해 SVG는 XML 기반 포맷이다. 이는 CSS, DOM, SMIL과 같은 다른 W3C 표준들과 함께 작업하는 것을 고려해서 설계되었다는 것을 보여준다.
문 서
- SVG 요소 레퍼런스
- SVG 요소들에 대한 상세한 정보를 담고있다.
- SVG 속성 레퍼런스
- SVG 속성들에 대한 상세한 정보를 담고있다.
- SVG DOM 인터페이스 레퍼런스
- 전체 SVG DOM API에 대한 상세한 정보를 담고있다.
- HTML 컨텐츠에 SVG 효과 적용하기
- SVG는 HTML, CSS, JavaScript와 함께 동작한다. SVG를 사용해 일반적인 HTML와 웹애플리케이션을 개선할 수 있다.
- Mozilla 에서 SVG
- Mozilla에서 어떻게 SVG가 구현되었는지에 대한 참고 자료와 정보를 담고있다.
커뮤니티
도구들
예제들
- Google Maps (경로 중첩) & 문서들 (스프레드시트 차트)
- SVG 버블 메뉴
- SVG 제작 가이드라인
- Mozilla SVG 프로젝트의 개요
- SVG와 Mozilla 관련한 FAQ : 자주 묻는 질문들
- SVG Open 2009에 SVG 와 Mozilla와 관련된 슬라이드와 데모들
- 이미지로서 SVG
- SMIL로 SVG 애니메이션
- SVG 아트 갤러리
- 그 외의 예제들 (SVG 예제 croczilla.com, carto.net)
애니메이션과 상호작용들
HTML과 마찬가지로 SVG은 도큐먼트 모델(DOM)와 이벤트를 가지고 있으며, JavaScript로 접근할 수 있다. 이를 통해 개발자는 풍부한 애니메이션과 이미지들의 상호작용을 생성할 수 있다.
- svg-wow.org 에서 몇몇 실제 눈요기 SVG
- SMIL 애니메이션 지원을 확장하기 위한 Firefox 확장 (Grafox)
- 상호작용하는 사진 조작
- SVG의
foreignObject를 사용하는HTML 변환들
매핑, 차트, 게임 그리고 3D 실험들
While 웹 컨텍스트를 향상히기는 방법으로 작은 SVG는 먼길을 갈 수 있는 동안 여기 많은 SVG 사용법들에 대한 몇몇 예제가 있다..
