SVG 개념

SVG란? 확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽입니다. HTML 태그의 집합으로 이루어져 있습니다. 즉, css와 javascript로 컨트롤이 가능합니다. SVG의 장점 아무리 확대를 해도 이미지가 깨지지 않습니다. 또한, 이미지의 크기를 키워도 용량이 늘어나지 않습니다. SVG의 단점 코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커집니다. 단순한 모양일수록 효율이 좋습니다. 복잡한 이미지를 굳이 SVG로 표현하고자 하면 오히려 용량이 너무 거대해져 역효과가 날 수 있습니다. 그렇기 때문에 주로 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용합니다. HTML에 SVG를 적용하는 방법들 이미지를 SVG로 변환해주는 사이트 https://convertio.co/kr/png-svg/ img 태그로 사용하기 (조작 불가) <img src="frog.svg" alt=""> css backgrou...

원문링크 : SVG 개념