HTML5 Inline SVG
HTML5는 inline SVG를 지원합니다.
SVG란?
1. SVG는 Scalable Vector Graphics의 약자 입니다.
2. SVG는 웹에서 벡터 기반의 그래픽을 표현할때 사용합니다.
3. SVG는 XML형식으로 그래픽을 정의합니다.
4. SVG 그래픽은 줌이나 리사이즈를 하더라고 품질에 영향을 미치지 않습니다.
5. SVG 파일에서 모든 요소와 모든 속성은 애니메이션 이미지가 될 수 있습니다.
6. SVG는 W3C에서 권장하고 있습니다.
SVG의 이점
JPEG이나 GIF와 같은 이미지 포맷대신 SVG를 이용하면 좋은점
1. SVG 이미지는 text editor로 만들 수 있습니다.
2. SVG 이미지는 검색, 인덱싱, 스크립팅, 압축을 할 수 있습니다.
3. SVG 이미지는 확장 가능 합니다.
4. SVG 이미지는 어떤 해상도에서도 고품질로 프린트 할 수 있습니다.
5. SVG 이미지는 줌이 가능합니다.
브라우저 지원
IE9, FireFox, Opera, Chrome, Safari에서 지원합니다.
HTML 페이지에 SVG 바로 포함 시키기
HTML5에서는 HTML 페이지에 SVG element를 바로 포함시킬 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html><html><body> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg></body></html> |
위 그림은 소스의 예제입니다.
'그밖의 정보' 카테고리의 다른 글
| oracle 인스턴스란?! (0) | 2014.08.21 |
|---|---|
| WPS (WiFi Positioning System) (0) | 2013.08.16 |
| HTML5 - Canvas Vs. SVG (0) | 2013.08.16 |
| rpc (2) | 2013.07.03 |
| [펌]텍스트 파일과 바이너리 파일, 오브젝트 파일 (0) | 2012.12.21 |