시작하기
이 튜토리얼은 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가 구현되었는지에 대한 참고 자료와 정보를 담고있다.
커뮤니티
도구들
예제들
- 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 사용법들에 대한 몇몇 예제가 있다..
