SVG 강의

SVG 는 확대 가능한 벡터 그래픽(Scalable Vector Graphics)을 의미합니다

SVG 는 XML 벡터 기반 그래픽의 형식 정의

각 장의 예제

우리의 '본인이 직접 시도해 보세요' 편집기를 사용하여 SVG를 편집하고, 버튼을 클릭하여 결과를 확인할 수 있습니다.

SVG 예제

<html>
<body>
<h1>제 하나 번 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 벡터 기반 웹 그래픽을 정의하는 데 사용됩니다
  • SVG XML 형식으로 그래픽을 정의합니다
  • SVG 파일의 각 요소와 각 속성은 애니메이션을 설정할 수 있습니다
  • SVG 은 W3C 추천 표준입니다
  • SVG W3C 표준과의 통합, 예를 들어 DOM 와 XSL

SVG 은 W3C 추천 표준입니다

SVG 1.0은 2001년 9월 4일 W3C 추천 표준이 되었습니다.

SVG 1.1은 2003년 1월 14일 W3C 추천 표준이 되었습니다.

SVG 1.1(2판)은 2011년 8월 16일 W3C 추천 표준이 되었습니다.

SVG 의 장점

JPEG와 GIF와 같은 다른 이미지 형식에 비해, SVG 의 장점은:

  • SVG 이미지는 어떤 텍스트 편집기로도 생성 및 편집할 수 있습니다
  • SVG 이미지는 검색, 인덱싱, 스크립팅 및 압축될 수 있습니다
  • SVG 이미지는 확장 가능합니다
  • SVG 이미지는 어떤 해상도에서도 높은 품질로 인쇄할 수 있습니다
  • SVG 이미지는 확대 가능합니다
  • SVG 그래픽이 확대나 축소될 때도 품질이 손실되지 않습니다
  • SVG 이는 개방형 표준입니다
  • SVG 파일은 순수 XML

생성 SVG 이미지

SVG 이미지는 어떤 텍스트 편집기로도 생성할 수 있지만, 그래픽 프로그램(예를 들어 InkscapeSVG 이미지를 생성하는 것은 일반적으로 더 편리합니다.