SVG 파일이란 무엇입니까?

SVG 파일은 이미지의 모양을 설명하기 위해 XML 기반 텍스트 형식을 사용하는 Scalar Vector Graphics 파일입니다. Scalable이라는 단어는 SVG가 품질을 잃지 않고 다양한 크기로 확장될 수 있다는 사실을 나타냅니다. 이러한 파일에 대한 텍스트 기반 설명은 파일을 해상도와 무관하게 만듭니다. 확장성을 달성하기 위해 웹 사이트를 구축하고 그래픽을 인쇄하는 데 가장 많이 사용되는 형식 중 하나입니다. 형식은 2차원 그래픽에만 사용할 수 있습니다. SVG 파일은 Chrome, Internet Explorer, Firefox 및 Safari를 포함한 거의 모든 최신 브라우저에서 보거나 열 수 있습니다.

간략한 역사

SVG 사양은 1999년부터 W3C(World Wide Web Consortium)에서 공개 표준으로 사용할 수 있습니다. 그 전에는 1998년까지 6가지 다른 형식의 유사한 파일 형식 사양이 W3C에 제출되었습니다. 2011년 사양에 업데이트가 적용되어 1.1 버전이 되었습니다. . 2016년에 SVG 2는 SVG 1.1에 추가된 기능을 포함하는 최신 버전으로 게시되었습니다.

파일 형식 사양

SVG DOM(Document Object Model)은 사양의 특정 섹션에 해당하는 모든 사양 및 인터페이스의 기반을 마련합니다. SVG 뷰어는 W3C 사양 전체에 정의된 대로 SVG DOM 인터페이스를 구현해야 합니다. 그것의 DOM은 다양한 데이터 유형과 요소에 대한 여러 인터페이스를 노출합니다.

SVG 모양

SVG에는 개발자가 사용할 수 있는 몇 가지 미리 정의된 모양 요소가 있습니다.

  • 직사각형
  • 원
  • 타원
  • 선
  • 폴리라인
  • 다각형
  • 길

이러한 모양과 사양을 기반으로 SVG의 기능 영역은 다음과 같습니다.

경로 - 경로는 단순 및 복합 모양 윤곽선을 나타내는 데 사용됩니다. 코딩은 작업의 특성을 정의하는 데 사용됩니다. 예를 들어 M은 이동에 사용되며 L은 행까지, Z는 경로를 닫는 데 사용됩니다.

기본 모양 - 닫힌 다각형, 원 및 타원뿐만 아니라 연결된 일련의 직선 세그먼트(폴리라인)로 구성된 직선 경로 및 경로를 그릴 수 있습니다. 직사각형 및 모서리가 둥근 직사각형도 표준 요소입니다.

텍스트 - 텍스트 표현은 많은 시각 효과를 텍스트에 적용할 수 있는 XML 문자 데이터로 표현됩니다. 사양을 통해 양방향 텍스트, 세로 텍스트 및 곡선 경로를 따라 문자를 처리할 수 있습니다.

페인팅 - 모양을 색상, 그라디언트 또는 패턴으로 채우거나 윤곽선을 지정할 수 있으므로 불투명하게 만들거나 어느 정도의 투명도를 가질 수 있습니다. 다각형의 꼭짓점에 나타나는 화살촉이나 기호와 같은 선 끝 기능은 마커로 표시됩니다.

색상 - SVG 사양을 통해 직접 또는 채우기, 획 및 기타 속성을 통해 보이는 모든 SVG 요소에 색상을 적용할 수 있습니다. 검정 또는 파랑, 16진수 표현, 10진수 또는 RGB 형식의 백분율과 같은 지정에 다른 색상 코딩을 사용할 수 있습니다.

그라디언트 및 패턴 - SVG 파일의 모양은 단색, 그라디언트 또는 반복 패턴으로 채우거나 윤곽선을 지정할 수 있습니다.

필터 효과 - 실제로 수정된 결과를 생성하기 위해 주어진 소스 벡터 그래픽에 적용되는 일련의 그래픽 작업입니다.

상호작용 - 사용자는 초점 변경, 마우스 클릭, 이미지 스크롤 또는 확대/축소를 통해 SVG 파일과 상호 작용할 수 있습니다. 상호 작용을 통해 SVG 이미지는 앞서 언급한 것처럼 다양한 방식으로 사용자와 상호 작용할 수 있습니다.

링크 - SVG 이미지에 다른 문서에 대한 하이퍼링크가 있을 수 있습니다. 이것은 XML Linking Language 또는 XLink를 통해 달성됩니다. 이를 통해 특정 영역을 확대/축소하거나 특정 요소로 보기를 제한하는 데 사용되는 특정 보기 상태를 만들 수 있습니다.

스크립팅 - HTML과 마찬가지로 SVG 문서의 모든 측면은 스크립트를 사용하여 조작할 수 있습니다. SVG DOM 개체는 SVG 요소와 속성을 사용하여 이를 달성하기 위한 지침을 제공합니다. 스크립트는 script 태그 요소로 묶여 있으며 필요에 따라 포인터, 키보드 또는 문서 이벤트에 대한 응답으로 실행할 수 있습니다.

애니메이션 - DOM 요소 , 그리고 SVG 콘텐츠에 애니메이션을 포함할 수 있습니다. 물론 이것은 스크립트와 내장 타이머를 사용하지 않고는 달성할 수 없습니다. 이러한 애니메이션은 연속적일 수 있으며 사용자 이벤트에 응답하는 동시에 반복될 수 있을 뿐만 아니라 루프에 놓일 수도 있습니다.

글꼴 - SVG의 텍스트는 시스템 글꼴과 같은 외부 글꼴 파일을 참조할 수 있습니다. 이러한 글꼴이 없으면 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>

다음 코드 줄은 사용 방법을 보여줍니다. 텍스트를 SVG로 렌더링하기 위한 블록입니다.

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>

참조

See Also