Front-end/HTML 5, CSS3

.SVG 사용 이유, 렌더링 속도 개선

prden 2023. 7. 26. 20:17

1.  SVG란 : 

SVG란 Scalable Vector Graphics의 약자로 벡터 이미지를 뜻한다. jpg/jpeg, png파일을 크게 화대해 나타내면 이미지 테투리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라하는데 그런 이미지가 SVG이미지이다. 아이콘이나 로고 이미지에 SVG 이미지 파일 형식을 많이 사용한다. 복잡한 데이터를 웹에 표현해주는 d3.js나 Raphael.js 같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이 바로 SVG 이미지이다. 

 

'Front-end > HTML 5, CSS3' 카테고리의 다른 글

가운데 정렬  (0) 2023.07.26
Flexbox  (0) 2023.07.23
css 선택자  (0) 2023.07.23
세부적으로: 테두리 border vs. outline, 100% vs 100vs, 100vh  (0) 2023.07.21
반응형 css (Making our Website Responsive)  (0) 2023.07.16