SVG 태그 정리

SVG

SVG 애니메이션

 

기본 태그

태그	설명
svg	SVG 문서의 루트 요소
g	요소들을 그룹화할 때 사용
defs	재사용 가능한 요소들을 정의
symbol	use로 재사용 가능한 심볼 정의
use	defs, symbol에서 정의한 요소를 사용
title	접근성을 위한 제목 (툴팁처럼 표시될 수 있음)
desc	요소에 대한 설명 (접근성용)

도형 태그

태그	설명
rect	사각형
circle	원
ellipse	타원
line	선
polyline	연결된 선들
polygon	닫힌 다각형
path	복잡한 도형

 

텍스트 태그

태그	설명
text	텍스트
tspan	텍스트 내부에서 스타일이나 위치 변경
textPath	텍스트를 경로에 따라 배치

그라데이션 태그

태그	설명
linearGradient	선형 그라데이션 정의
radialGradient	방사형 그라데이션 정의
stop	그라데이션 색상 지점 정의
pattern	패턴 ( 반복 이미지, 도형 ) 정의

 

마커 & 클리핑 태그

태그	설명
clipPath	자르기 경로 정의
mask	마스크 정의
marker	선 끝에 표시할 마커 정의

필터 태그

태그	설명
filter	필터 정의
feTurbulence	노이즈 패턴
feDisplacementMap	픽셀 왜곡 효과
feGaussianBlur	가우시안 블러 효과
feColorMatrix	색상 행렬 변환
feBlend	블렌드 효과

 

기타 태그

태그	설명
image	이미지 삽입
foreignObject	HTML 요소 ( div, p )
script	javascript 코드
style	css 코드

 

샘플 예제

<svg
      width="240"
      height="240"
      viewBox="0 0 240 240"
      fill="none"
    >
      <defs>
        <path
          id="move-path"
          d="M102.546 83.5C109.859 70.8333 128.141 70.8333 135.454 83.5L157.971 122.5C165.284 135.167 156.143 151 141.517 151H96.4833C81.8571 151 72.7158 135.167 80.0289 122.5L102.546 83.5Z"
          fill="#D9D9D9"
        />
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -32"
          />
        </filter>
      </defs>
      <g filter="url(#goo)">
        <circle cx="119" cy="74" r="20" stroke="#7c4dff" stroke-width="8" />
        <circle cx="79" cy="141" r="20" stroke="#7c4dff" stroke-width="8" />
        <circle cx="157" cy="141" r="20" stroke="#7c4dff" stroke-width="8" />
        <circle cx="0" cy="0" r="14" fill="#7c4dff">
          <animateMotion
            path="M102.546 83.5C109.859 70.8333 128.141 70.8333 135.454 83.5L157.971 122.5C165.284 135.167 156.143 151 141.517 151H96.4833C81.8571 151 72.7158 135.167 80.0289 122.5L102.546 83.5Z"
            dur="2s"
            repeatCount="indefinite"
          />
        </circle>
      </g>
    </svg>