SVG란

마이구미·2021년 10월 30일
0

SVG란?

Scalable Vector Graphics 로 확장가능한 벡터 그래픽이다. 픽셀을 이용하는 png, jpg 과는 다르게 벡터를 기반으로 이미지를 표현한다. 따라서 크기에 따라 깨지는 것이 없고 용량도 적다고 한다.

그럼 뭐가 좋은거지?

  • SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수도 있다.
  • 벡터를 기반으로 그려지므로 사이즈를 크게 해도 깨지지 않는다.
    scalable => 따라서 어떤 해상도에서 사용하든 동일
  • SVG 버전 1.1은 2011년 W3C 표준이 되었다.
  • XML 포맷으로 파일이 작성되므로 JS나 CSS로 조작이 가능하다.
    단, 이미지가 복잡할수록 SVG만의 장점은 감소한다.

SVG로 원 그려보기

<!DOCTYPE html>
<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> 태그로 시작하는데 이 태그는 width, height 속성으로 이미지의 가로, 세로 길이를 조절할 수 있다. 이미지의 마지막은 닫는 태그 </svg> 로 끝나야 한다.
  • <circle> 태그는 원을 그릴 때 사용하는 태그이다. 이 태그에 사용되는 cx cy 속성은 원의 중심으로부터의 x와 y의 좌표를 정의하고 r 속성은 원의 반지름을 정의한다.
  • cx cy가 생략되면 기본값으로 (0,0)이 된다.
  • stroke는 선의 색상, stroke-width는 선의 굵기를 조절한다. 위 코드에서는 4px 굵기의 초록색 선이 된다.
  • fill 속성은 내부 색상을 정한다.

참고자료

https://velog.io/@sbyeol3/SVG%EB%A5%BC-%EA%B3%B5%EB%B6%80%ED%95%B4%EB%B3%B4%EC%9E%90-1-SVG%EB%9E%80

profile
마이구미 마시쪙

0개의 댓글