frontendsvg

SVG 설명

graph, svg, vector
Views: 167

SVG란?

  • SVG는 Scalable Vector Graphics를 나타냅니다.
  • SVG는 웹에 대한 벡터 기반 그래픽을 정의하는 데 사용됩니다.
  • SVG는 XML 형식으로 그래픽을 정의합니다.
  • SVG 파일의 모든 요소와 속성을 애니메이션으로 만들 수 있습니다.
  • SVG는 W3C 권장 사항입니다.
  • SVG는 DOM 및 XSL과 같은 다른 W3C 표준과 통합되었습니다.

SVG 장점

  • SVG 영상은 임의의 텍스트 편집기로 생성 및 편집할 수 있습니다.
  • SVG 이미지를 검색, 인덱싱, 스크립팅 및 압축할 수 있습니다.
  • SVG 이미지 확장 가능합니다.
  • SVG 영상은 어떤 해상도에서도 고품질 인쇄 가능합니다.
  • SVG 영상을 확대/축소할 수 있습니다.
  • 확대/축소 또는 크기 조정 시 SVG 그래픽의 품질이 저하되지 않습니다.
  • SVG는 개방형 표준이다.
  • SVG 파일은 순수 XML입니다.

SVG 작성법

1
2
3
4
5
6
7
8
9
10
11
<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 기본 값은 width=”300” height=”150”으로 지정됩니다.

Share