[JS] SVG에 대해서

SVG

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

Scalable Vector Grapics(SVG)는 XML기반의 2차원 그래픽과 애니메이션을 위한 벡터 이미지 형식입니다. SVG 스펙은 W3C에 의해 표준으로 제정되었습니다.

SVG이미지는 XML로 정의되기 때문에 검색이 되고 인덱스되고 스크립팅되고 압축도 됩니다. 물론 어느 에디터로도 편집이 가능합니다.

현재 최신 버전은 2.x이라고 합니다

 

 

functionality

SVG 1.1 스펙에는 다음 14가지의 기능이 정의되어 있습니다.

• Paths
• Basic Shapes
• Text
• Painting
• Color
• Gradients and patterns
• Clipping, masking and compositing
• Filter effects
• Interactivity
• Linking
• Scripting
• Animation
• Fonts
• Metadata

 

 

example

SVG이미지 예시

위 이미지는 다음과 같이 코드로 표현할 수 있습니다.

 

<?xml version="1.0" encoding="UTF-8" ?>
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg">
  <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
  <circle cx="125" cy="125" r="75" fill="orange" />
  <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>

 

 

SVG on web

The use of SVG on the web was limited by the lack of support in older versions of Internet Explorer (IE).
Many web sites that serve SVG images, such as Wikipedia, also provide the images in a raster format, either automatically by HTTP content negotiation or by allowing the user directly to choose the file.

웹에서 SVG를 사용하는 것은 Internet Explorer (IE)의 이전 버전에서 지원이 부족하여 제한적이었습니다. 

Wikipedia와 같은 SVG 이미지를 제공하는 많은 웹 사이트는 자동으로, 혹은 사용자가 직접 파일을 선택할 수 있도록 하여, 래스터 형식 이미지 또한 제공합니다.