[HTML] SVG etc.

1. SVG란 ⭐️

• SVG(Scalable Vector Graphics): 확장 가능한 벡터 그래프
  • 픽셀을 이용해 그림 그리는 png, jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현함
  • 그러다 보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식
• 장점
  • SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수도 있음
  • 벡터를 기반으로 그려지므로 사이즈를 크게 해도 깨지지 않음(scalable → 따라서 어떤 해상도에서 사용하든 동일)
  • SVG 버전 1.1은 2011년 W3C 표준이 됨
  • XML 포맷으로 파일이 작성되므로 JS나 CSS로 조작이 가능
• 단점
  • 이미지가 복잡할수록 SVG만의 장점 감소
• Q) SVG 내부 도형 예시?
• A) <rect>, <circle>, <polyline>,<path>
  
  • <path> - 선과 곡선, 호 등 다양한 형태를 그릴 수 있는 가장 강력한 엘리먼트 (참고)

// <rect> - 사각형
<rect x="10" y="10" width="30" height="30" />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" />

/*
x - 사각형의 좌측 상단의 x 값
y - 사각형의 좌측 상단의 y 값
width - 사각형의 폭
height - 사각형의 높이
rx - 사각형의 둥근 꼭짓점의 x 방향으로의 반지름
ry - 사각형의 둥근 꼭짓점의 y 방향으로의 반지름
*/


//<circle> - 원
<circle cx="25" cy="75" r="20" />

/*
r - 원의 반지름
cx (circle x) - 원의 중심 중 x 값을 의미
cy (circle y)- 원의 중심 중 y 값을 의미
*/


// <polyline> - 연결된 직선들의 그룹
<polyline
  points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"
/>

/*
points - 포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분됨
각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 함
따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있음
*/

 

Tips. 

• Q) 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법은?
• A) 이미지를 최적화 시킴(이미지의 용량을 줄이기), 이미지 스프라이트 활용, 벡터 이미지(SVG) 이용
• Q) UI란?
• A) 유저 인터페이스의 약자로, 다양한 사용자가 사용할 수 있도록 보편성을 지녀야하며 전체적으로 사용에 있어 큰 불편함이 없어야 함.