SVG 튜토리얼
SVG는 확장 가능한 벡터 그래픽의 약자입니다.
SVG는 XML 형식의 벡터 기반 그래픽을 정의합니다.
각 장의 예
"Try it Yourself" 편집기를 사용하여 SVG를 편집하고 버튼을 클릭하여 결과를 볼 수 있습니다.
SVG 예
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
당신이 이미 알고 있어야 할 것
계속하기 전에 다음 사항에 대한 기본적인 이해가 있어야 합니다.
- HTML
- 기본 XML
이 주제를 먼저 공부하려면 홈 페이지 에서 자습서를 찾으십시오 .
SVG 란 무엇입니까?
- SVG는 확장 가능한 벡터 그래픽을 나타냅니다.
- SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
- SVG는 XML 형식의 그래픽을 정의합니다.
- SVG 파일의 모든 요소와 모든 속성은 애니메이션 가능
- SVG는 W3C 권장 사항입니다.
- SVG는 DOM 및 XSL과 같은 다른 W3C 표준과 통합됩니다.
SVG는 W3C 권장 사항입니다.
SVG 1.0은 2001년 9월 4일에 W3C 권장 사항이 되었습니다.
SVG 1.1은 2003년 1월 14일에 W3C 권장 사항이 되었습니다.
SVG 1.1(Second Edition)은 2011년 8월 16일에 W3C 권장 사항이 되었습니다.
SVG의 장점
다른 이미지 형식(예: JPEG 및 GIF)에 비해 SVG를 사용하면 다음과 같은 이점이 있습니다.
- SVG 이미지는 모든 텍스트 편집기로 만들고 편집할 수 있습니다.
- SVG 이미지는 검색, 인덱싱, 스크립팅 및 압축할 수 있습니다.
- SVG 이미지는 확장 가능합니다.
- SVG 이미지는 모든 해상도에서 고품질로 인쇄할 수 있습니다.
- SVG 이미지는 확대/축소 가능
- SVG 그래픽은 확대/축소하거나 크기를 조정해도 품질이 저하되지 않습니다.
- SVG는 개방형 표준입니다.
- SVG 파일은 순수 XML입니다.
SVG 이미지 만들기
SVG 이미지는 모든 텍스트 편집기로 만들 수 있지만 Inkscape 와 같은 그리기 프로그램을 사용하여 SVG 이미지를 만드는 것이 더 편리한 경우가 많습니다 .