SVG의 모든 요소와 그 설명을 표로 정리한 후, 각 요소별 속성을 속성과 설명이 포함된 표로 정리하겠습니다. --- ## 1. SVG 요소 목록 | 요소 | 설명 | |------|------| | `` | SVG 그래픽을 정의하는 루트 요소 | | `` | 여러 요소를 그룹화하는 컨테이너 | | `` | 재사용 가능한 요소(예: 패턴, 필터)를 정의하는 요소 | | `` | 독립적인 그래픽을 정의하고 `` 요소로 재사용할 수 있도록 함 | | `` | ``이나 다른 요소를 참조하여 재사용하는 요소 | | `` | 사각형을 그림 | | `` | 원을 그림 | | `` | 타원을 그림 | | `` | 한 점에서 다른 점까지 선을 그림 | | `` | 여러 선을 연결한 열린 경로를 그림 | | `` | 여러 선을 연결한 닫힌 도형을 그림 | | `` | 복잡한 곡선 및 선을 그릴 수 있는 자유로운 경로를 정의 | | `` | 텍스트를 그림 | | `` | `` 내에서 텍스트의 위치나 스타일을 변경하는 요소 | | `` | 경로를 따라 텍스트를 배치하는 요소 | | `` | 외부 이미지를 SVG 내에 포함 | | `` | 일부 영역만 표시되도록 마스크 역할을 하는 요소 | | `` | 반투명한 마스킹 효과를 줄 때 사용 | | `` | 반복되는 패턴을 정의 | | `` | 선형 그라디언트를 정의 | | `` | 방사형 그라디언트를 정의 | | `` | 그라디언트의 색상 지점을 정의 | | `` | 블러, 그림자 등의 그래픽 효과를 정의 | | `` | 블러 효과를 적용 | | `` | 요소의 위치를 이동 | | `` | 색상을 변환 | | `` | 속성에 애니메이션 효과를 추가 | | `` | 변형(이동, 회전, 크기 변경) 애니메이션을 적용 | | `` | 특정 속성을 일정 시간 동안 변경 | | `` | SVG 내부에서 HTML 요소를 사용할 수 있도록 함 | --- ## 2. 요소별 속성 목록 ### 2.1 `` 요소 속성 | 속성 | 설명 | |------|------| | `width` | SVG의 너비 | | `height` | SVG의 높이 | | `viewBox` | 좌표 시스템을 정의하는 영역 (`min-x min-y width height`) | | `preserveAspectRatio` | 화면 크기에 따른 비율 조정 방식 | --- ### 2.2 `` 요소 속성 | 속성 | 설명 | |------|------| | `transform` | 그룹에 변환 효과(이동, 회전 등) 적용 | | `fill` | 그룹 내 요소의 기본 색상 지정 | | `stroke` | 그룹 내 요소의 테두리 색상 지정 | --- ### 2.3 `` 요소 속성 | 속성 | 설명 | |------|------| | `x` | 사각형의 좌측 상단 x 좌표 | | `y` | 사각형의 좌측 상단 y 좌표 | | `width` | 사각형의 너비 | | `height` | 사각형의 높이 | | `rx` | 사각형 모서리의 x 방향 둥근 정도 | | `ry` | 사각형 모서리의 y 방향 둥근 정도 | --- ### 2.4 `` 요소 속성 | 속성 | 설명 | |------|------| | `cx` | 원의 중심 x 좌표 | | `cy` | 원의 중심 y 좌표 | | `r` | 원의 반지름 | --- ### 2.5 `` 요소 속성 | 속성 | 설명 | |------|------| | `cx` | 타원의 중심 x 좌표 | | `cy` | 타원의 중심 y 좌표 | | `rx` | x 방향 반지름 | | `ry` | y 방향 반지름 | --- ### 2.6 `` 요소 속성 | 속성 | 설명 | |------|------| | `x1` | 선의 시작 x 좌표 | | `y1` | 선의 시작 y 좌표 | | `x2` | 선의 끝 x 좌표 | | `y2` | 선의 끝 y 좌표 | --- ### 2.7 `` 요소 속성 | 속성 | 설명 | |------|------| | `points` | 여러 점을 정의 (`x1,y1 x2,y2 ...`) | --- ### 2.8 `` 요소 속성 | 속성 | 설명 | |------|------| | `points` | 다각형을 구성하는 점 좌표 리스트 | --- ### 2.9 `` 요소 속성 | 속성 | 설명 | |------|------| | `d` | 경로 데이터 (M, L, C, Q 등 사용) | | `fill-rule` | 내부 영역 채우기 규칙 (`nonzero` 또는 `evenodd`) | --- ### 2.10 `` 요소 속성 | 속성 | 설명 | |------|------| | `x` | 텍스트의 시작 x 좌표 | | `y` | 텍스트의 시작 y 좌표 | | `dx` | x 방향 오프셋 | | `dy` | y 방향 오프셋 | | `text-anchor` | 텍스트 정렬 (`start`, `middle`, `end`) | --- ### 2.11 `` 요소 속성 | 속성 | 설명 | |------|------| | `href` | 이미지 경로 (SVG 2.0부터는 `xlink:href` 대신 사용) | | `x` | 이미지의 x 좌표 | | `y` | 이미지의 y 좌표 | | `width` | 이미지 너비 | | `height` | 이미지 높이 | --- ### 2.12 `` 요소 속성 | 속성 | 설명 | |------|------| | `clipPathUnits` | 좌표 시스템 단위 (`userSpaceOnUse` 또는 `objectBoundingBox`) | --- ### 2.13 `` 요소 속성 | 속성 | 설명 | |------|------| | `maskUnits` | 좌표 단위 (`userSpaceOnUse` 또는 `objectBoundingBox`) | | `maskContentUnits` | 마스크 내용의 좌표 단위 | --- ### 2.14 `` 요소 속성 | 속성 | 설명 | |------|------| | `x1`, `y1` | 그라디언트 시작점 좌표 | | `x2`, `y2` | 그라디언트 끝점 좌표 | --- ### 2.15 `` 요소 속성 | 속성 | 설명 | |------|------| | `cx`, `cy` | 방사형 그라디언트 중심 좌표 | | `r` | 반지름 | --- ### 2.16 `` 요소 속성 | 속성 | 설명 | |------|------| | `attributeName` | 애니메이션할 속성 이름 | | `from` | 애니메이션 시작 값 | | `to` | 애니메이션 종료 값 | | `dur` | 애니메이션 지속 시간 | --- 이 외에도 여러 속성이 있지만, 주요한 요소와 속성을 정리했습니다. 필요한 경우 추가 정보를 요청해 주세요!