about SVG

Steve·2022년 4월 27일
0

SVG(Scalable Vector Graphics)
용량이 png,gif보다 작음.

레스터 방식으로 표현하는 jpg,png,gif,bmp와 달리 벡터화된 그래픽 이미지

레스터(비트맵 방식)
색상 정보가 담긴 픽셀로 표현하는 방식
각각의 픽셀을 이용해 작업하기에 자연스러운 이미지 표현 가능하지만, 확대할경우 그림이 깨져서 보이는 계단식 현상.
픽셀 수가 많아질수록 파일 크기가 커지는 단점.

벡터
수학적 함수 이용하여 동형 및 선을 그려서 표시하는 방식
선명함.
레스터에 비해 용량이 작음.
색상의 자연스러운 변화 표현은 어려움.
색표현의 한계, 수학계신이 필요하므로 이미지가 복잡할수록 로딩 시간이 오래걸림

백터 그래픽스이므로 확대/축소해도 화질 변화 없다.
깨지지 않는 그림을 위해 사용.
(간단한 이모티콘,그림 정도)표현하기에 용이함
xmlns : SVG 네임 스페이스를 정의하는 속성, 사용된 SVG 버전을 정의함.
width : 도형의 너비
height : 도형의 높이
Svg의 width와 height로 svg의 영역크기(뷰포트)를 설정.
viewBox : svg 내부 요소들의 좌표 영역과 비율, 뷰포트 내에서 도형을 보여줄 위치 설정
viewbox="0 0 24 24"
"min-x min-y width height"

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

만약에 viewBox만 설정하고 width와 height를 지정해주지 않았다면, 기본값이 100%이기 때문에 바깥 요소 안에서 꽉 찬 형태의 도형이 그려질 것이다.

정리

뷰박스는 width, height로 SVG의 뷰포트를 설정할 때, 그 기준점을 정하는 것이다.
뷰박스를 통해 SVG 내부 요소들의 좌표 영역과 비율, 그리고 뷰포트 내에서 도형을 보여줄 위치를 정할 수 있다.
뷰박스는 viewBox 속성을 통해 지정해줄 수 있으며, 순서대로 min-x, min-y, width, height를 받는다.

path
d
fill : 도형 채울 색상
fillRule

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path fill="none" stroke={fill || '#222'} d="M9 10.5L15 17L9 24"/>
</svg>

M(절대좌표),m(상대좌표)
직선 L 및 l 명령은 현재 점에서 다음 점까지 직선을 그립니다.
(대문자 L은 절대좌표, 소문자 l은 상대좌표)

XML로 기술하므로 웹 브라우저 상에서 열람할 수 있고 문서 편집기 등에서 편집할 수 있다.
XML(eXtensible Markup Language)
마크업언어

profile
Front-Dev

0개의 댓글