계층 탐색

• Animation

  애니메이션 요소

  • <animate>

    지정된 시간에 따라 요소의 속성에 애니메이션을 적용하는 방법을 제공한다.

  • <animateMotion>

    요소가 모션 경로를 따라 이동하는 애니메이션을 정의한다.

  • <animateTransform>

    요소에 대한 변형(변환, 크기, 회전, 기울기) 애니메이션을 설정한다.

  • <mpath>

    외부 <path> 요소를 동작 경로의 정의로 참조하는 기능을 제공한다.

• Container

  컨테이너 노드

  • <foreignObject>

    다른 네임스페이스의 요소를 포함하는 컨테이너를 만든다. 주로 HTML 요소를 삽입하는 용도로 사용된다.

  • <g>

    관련된 그래픽 요소들을 그룹화한다.

  • <svg>

    새 SVG 요소를 생성하는 새 좌표계와 뷰포트를 정의한 가장 바깥쪽 요소로서 여러 Shape을 하위 요소로 가지고 있다.

• Declaration

  • <defs>

    재사용이 가능한 그래픽 개체를 정의한다.

• Definition

  정의 관련 노드

  • <clipPath>

    clip-path 속성에 사용할 클리핑 경로를 지정한다.

  • <marker>

    <path>, <line>, <polyline> 또는 <polygon> 요소에 화살촉이나 다중 마커를 그리는 데 사용할 그래픽을 정의한다.

  • <mask>

    현재 개체를 배경에 합성하기 위한 알파 마스크를 정의한다.

  • <radialGradient>

    원형 그라데이션을 정의한다.

• Filter

  효과를 적용하기 위한 요소

  • <feBlend>

    두 개의 SVG 요소가 겹쳐 있는 경우 혼합되는 방식을 정의한다.

  • <feColorMatrix>

    변환 매트릭스 데이터를 기반으로 색상을 변경한다. 모든 픽셀의 색상 값 [R,G,B,A]는 새로운 색상 [R`,G`,B`,A`]를 생성하기 위해서 5x5 색상 매트릭스로 행렬을 곱한 것이다.

  • <feComponententTransfer>

    각 픽셀에 대한 데이터의 색상 구성 요소 방식 재매핑을 실행한다. 밝기, 대비 조정, 색상 균형 또는 임계값과 같은 작업을 허용한다.

  • <feComposite>

    Porter-Duff 합성 작업(over, in, atop, out, xor, lighter 또는 산술) 중 하나를 사용하여 이미지 공간에서 두개의 입력 이미지를 픽셀 단위로 결합한다.

  • <feConvolveMatrix>

    매트릭스 컨볼루션 필터 효과를 적용한다. 컨볼루션 효과는 입력 이미지의 픽셀을 인접 픽셀과 결합하여 결과 이미지를 생성한다.

  • <feDiffuseLighting>

    알파 채널을 범프 맵으로 사용하여 이미지를 비춘다. RGBA 불투명 이미지인 결과 이미지는 조명 색상, 조명 위치 및 입력 범프 맵의 표면 형상에 따라 달라진다.

  • <feDisplacementMap>

    in2의 이미지에서 픽셀 값을 사용하여 in의 이미지를 공간적으로 변위시킨다.

  • <feFlood>

    플러드 색상 및 플러드 불투명도로 정의된 색상 및 불투명도로 필터 하위 영역을 채운다.

  • <feFuncA>

    상위 <feComponentTransfer> 요소의 입력 그래픽에 대한 알파 구성 요소에 대한 전달 함수를 정의한다.

  • <feFuncB>

    상위 <feComponentTransfer> 요소의 입력 그래픽에 대한 파란색 구성 요소에 대한 전달 함수를 정의한다.

  • <feFuncG>

    상위 <feComponentTransfer> 요소의 입력 그래픽에 대한 녹색 구성 요소에 대한 전달 함수를 정의한다.

  • <feFuncR>

    상위 <feComponentTransfer> 요소의 입력 그래픽에 대한 빨간색 구성 요소에 대한 전달 함수를 정의한다.

  • <feGaussianBlur>

    벨 커브를 정의하는 stdDeviation에 지정된 값만큼 입력 이미지를 흐리게 한다.

  • <feImage>

    외부 소스에서 이미지 데이터를 가져오고 픽셀 데이터를 출력으로 제공한다. 다시 말해 외부 이미지 소스가 SVG 이미지인 경우 픽셀화 된다.

  • <feMerge>

    필터 효과를 순차적이 아닌 동시에 적용할 수 있다.

  • <feMergeNode>

    상위 <feMerge >에서 처리할 다른 필터의 결과를 가져온다.

  • <feMorphology>

    입력 이미지를 침식하거나 팽창시킨다. 대상을 뚱뚱하게 하거나 날씬하게 하는 효과가 있다. 

  • <feOffset>

    입력 이미지를 오프셋한다. 전체적으로 입력 이미지는 dx 또는 dy 속성에 지정된 값으로 오프셋된다.

• Fonts

  폰트 처리 노드

• Graphics

  그래픽 요소를 생성하는 요소

• Shape

  그래픽 요소

  • <circle>

    중심점과 반지름을 기준으로 원을 생성한다.

  • <ellipse>

    x, y 방향의 반지름을 기반으로 타원을 생성한다.

  • <rect>

    사각형의 기본 도형을 생성한다. 또한 모서리가 둥근 사각형을 생성할 수도 있다.

• TextContext

  텍스트 컨텍스트 요소

• Uncategorized

  분류되지 않은 노드들

  • <a>

    다른 웹페이지, 파일, 같은 페이지 내의 특정 위치, 이메일 주소 또는 기타 URL에 대한 하이퍼링크를 생성한다. HTML <a> 요소와 유사하다.

  • <desc>

    모든 SVG 컨테이너 요소 또는 그래픽 요소에 대한 액세스 가능한 긴 텍스트 설명을 제공한다.

  • <metadata>

    SVG 콘텐츠에 메타데이터를 추가한다.