"SVG 기초: 소개" 또는 "SVG 필수 요소: 소개"

SVG는 Scalable Vector Graphics의 약자로, 픽셀 대신 수학적 공식을 사용하여 이미지를 정의하는 XML 기반 마크업 언어입니다. 따라서 SVG는 크기 조절 시 품질 저하 없이 더 작은 파일 크기를 유지할 수 있기 때문에 아이콘, 로고, 선 그림에 이상적입니다. SVG 이미지는 CSS를 사용하여 색상 및 애니메이션과 같은 표현 방식을 변경할 수 있습니다. 웹 페이지에 SVG 이미지를 표시하는 방법에는 직접 포함, img 요소, object 요소 또는 iframe 요소를 사용하는 등 여러 가지가 있습니다. 각 방법에는 캐싱 및 자바스크립트 조작과 같은 고유한 장점과 한계가 있습니다. SVG 코드는 대소문자 구분, 닫는 태그, 따옴표로 묶인 속성 값을 포함하여 XML 언어 규칙을 따릅니다. SVG 이미지 구조에는 루트 요소, viewBox 및 나중에 참조될 스타일 또는 요소를 정의하는 defs 요소가 포함됩니다. viewBox는 추상적인 단위로 그림 영역을 정의하는 반면, 너비와 높이는 svg 태그 내부에서 설정할 수 있습니다. defs 요소는 스타일 요소, 도형, 그라디언트 및 심볼을 포함할 수 있으며 나중에 코드에서 참조할 수 있습니다. 마지막으로, path, circle, rect, line, ellipse, polygon과 같은 실제 드로잉 요소를 사용하여 이미지를 만듭니다.