[WEB] SVG

SVG(Scalable Vector Graphics)?

벡터를 기반으로 이미지를 표현하는데, 이는 픽셀로 이미지를 표현하는 jpg, png와는 다른 방식입니다.

SVG 장점

• 벡터 기반이라 크기를 조절해도 이미지가 깨지지 않습니다. 즉, 어느 해상도에서도 동일하게 보입니다.
• 용량이 상대적으로 작습니다.
• 마크업으로 쓰이므로 텍스트 에디터로 작성하거나 수정할 수 있습니다.
• XML 포맷으로 작성되기 때문에 JS, CSS로도 조작이 가능합니다.

SVG 단점

• 이미지가 복잡해질수록 SVG의 장점이 감소합니다. 이유는 SVG가 수학적 계산을 기반으로 작동하기 때문에 이미지의 복잡성이 증가하면 파일 크기도 커지고, 더 많은 계산 수행으로 인해 렌더링 속도도 느려집니다.
• 일부 오래된 브라우저나 환경에서는 SVG가 표시되지 않을 수 있습니다. 한 예로, IE 8 이하 버전은 SVG를 지원하지 않습니다.

이런 이유로 SVG는 아이콘, 로고, 단순한 이미지 등에 적합하고, 복잡한 그래픽 혹은 고해상도 사진이 포함된 이미지는 비트맵 이미지 형식인 PNG, JPEG가 더 적합할 수 있습니다.

SVG 내부 도형들

• <rect> - 사각형
• <circle> - 원
• <polyline> - 연결된 직선들의 그룹
• <path> - 선과 곡선, 호 등 다양한 형태를 그릴 수 있는 가장 강력한 엘리먼트

참고자료

SVG는 진짜 정답일까? 그럼 PNG는? | 요즘IT

prepare_frontend_interview/html_css.md at main · junh0328/prepare_frontend_interview