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
마이구미 마시쪙