벡터 이미지 파일 제어하기

비트맵 이미지와 백터 이미지의 차이

• 비트맵 이미지는 수많은 픽셀 단위로 구성
  
  • 사진처럼 많은 색상을 표현하면 비트맵을 사용
• 벡터 이미지는 좌푯값을 수식으로 연결해 선을 그림
  
  • 아이콘 모양같이 명확하고 표현할 색상 수가 적으면 벡터 사용

 

SVG 파일을 웹 브라우저에 출력하기

• viewBox : x의좌푯값, y의좌푯값, 영역의 너빗값, 영역의 높잇값

See the Pen SVG by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

SVG의 path 스타일 변경

• fill :  배경 색 
• stroke : 선의 색
• stroke-width : 선의 굵기

See the Pen SVG path by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

패스의 stroke-dasharray와 stroke-dashoffset 속성 이해하기

• 패스의 stroke-dasharray 는 선의 간격
• 패스의stroke-dashoffset 는 가시영역에 보이는 선의 시작 위치를 지정

See the Pen SVG path stroke by 신범식 (@ulqsqjpw-the-solid) on CodePen.