이 파일은 여러 패스와 그라디언트를 사용하여 특정 형태와 색상의 아이콘이나 로고를 구성하는 파일이다. (그래픽 이미지를 나타내는 XML 기반의 벡터 이미지 형식)
SVG 파일은 여러 패스와 그라디언트를 사용하여 특정 형태와 색상의 아이콘이나 로고를 구성한다.
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">svg: SVG 이미지를 정의하는 루트 요소다.
width와 height: SVG의 너비와 높이를 지정한다. 여기서는 30x30 픽셀입니다.
viewBox: 0, 0에서 시작하여 30x30의 뷰포트를 설정한다.
fill: 기본 채우기 색상을 설정한다. none으로 설정되어 있어 기본적으로 채우기 색상이 없다.
xmlns: 네임스페이스를 선언, 이는 SVG의 표준 네임스페이스 URL이다.
<path d="M1.63954 13.3644L3.95187 11.052L3.95428 11.0496H8.30453L6.5736 12.7806L6.12669 13.2275L4.35415 15L4.57368 15.2201L14.5039 25.1498L24.6537 15L22.8805 13.2275L22.7557 13.102L20.7033 11.0496H25.0535L25.0559 11.052L26.8683 12.8644L29.0039 15L14.5039 29.5L0.00390625 15L1.63954 13.3644ZM14.5039 0.5L22.8823 8.87842H18.5321L14.5039 4.85024L10.4757 8.87842H6.12548L14.5039 0.5Z" fill="#096DD9"/>path: SVG 패스를 정의
d: 패스의 형태를 결정하는 명령어와 좌표를 포함한다.
fill: 패스의 채우기 색상을 지정한다.
<linearGradient id="paint0_linear_112102_1824" x1="5.62978" y1="11.5889" x2="2.57161" y2="14.6471" gradientUnits="userSpaceOnUse">
<stop stop-color="#023B95"/>
<stop offset="0.9637" stop-color="#096CD9" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_112102_1824" x1="23.2722" y1="11.6281" x2="25.7451" y2="14.4382" gradientUnits="userSpaceOnUse">
<stop stop-color="#023B95"/>
<stop offset="1" stop-color="#096DD9" stop-opacity="0"/>
</linearGradient>linearGradient: 선형 그라디언트를 정의(그라데이션 효과)
id: 그라디언트의 ID를 지정한다. 이를 통해 나중에 fill 속성에서 참조할 수 있다.
x1, y1, x2, y2: 그라디언트의 시작 및 끝 좌표를 지정한다.
stop: 그라디언트의 색상 전환 지점을 정의한다.
stop-color: 그라디언트 색상을 지정한다.
offset: 그라디언트 내에서의 위치를 지정한다. 0에서 1 사이의 값이다.
<path d="M4.35477 15.0002L6.12731 13.2276L6.57422 12.7807L4.84389 11.0498H3.9549L3.95249 11.0522L1.64016 13.3645L3.85961 15.5731L4.35477 15.0002Z" fill="url(#paint0_linear_112102_1824)"/>
<path d="M22.8814 13.2276L24.6545 15.0002L24.479 15.1757L24.4796 15.1763L26.8691 12.8646L25.0568 11.0522L25.0544 11.0498H24.8783L22.7565 13.1022L22.8814 13.2276Z" fill="url(#paint1_linear_112102_1824)"/>그라디언트가 적용된 path
fill="url(~)"을 통해 그라디언트 적용 (그라디언트의 id)
