SVG <svg> 요소

SVG 이미지는 다양한 요소로 생성되며, 이 요소들은 벡터 이미지의 구조, 그리기 및 레이아웃에 적용됩니다. svg가 기본 요소가 아니면, svg 요소는 현재 문서(예: HTML 문서) 내에 독립적인 svg 부분을 내장할 수 있습니다. 이 독립적인 부분은 독립된视口 및 좌표 시스템을 가집니다.

svg 요소는 다음과 같은 규칙을 사용합니다

모든 SVG 이미지의 기본 요소는 <svg> 요소입니다. svg 요소는 다음과 같은 규칙을 사용합니다:

<svg xmlns="http://www.w3.org/2000/svg">//www.w3.org/2000/svg"　
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">　
</svg>

두 개의 이름 공간 선언을 잊지 마세요. 그렇지 않으면 Firefox는 SVG 파일을 이미지로 표시하지 않고, 다른 XML 파일로 설명합니다.

내장된 SVG 요소

SVG 요소는 이렇게 서로 내장될 수 있습니다:

svg xmlns="http://www.w3.org/2000/svg">//www.w3.org/2000/svg"
　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　svg>
　　　　</svg>
</svg>

내장된 SVG 요소는 SVG 형태를 그룹화하고 그를 집합으로 배치하는 데 사용될 수 있습니다. svg 요소 내에 내장된 모든 형태는 그가 포함된 svg 요소의 위치(x, y)에 대해 정위치됩니다. 포함된 svg 요소의 x와 y 좌표를 이동하면 모든 내장된 형태도 이동할 수 있습니다.
이 예제는 두 개의 svg 요소 내에 두 개의 사각형을 내장한 예제입니다. 두 개의 사각형은 색상 외에도 x, y, 높이, 너비 정의가 동일합니다. 포함된 svg 요소는 다른 x 값을 가집니다. 사각형의 x 위치는 그가 포함된 svg 요소의 x 위치에 비례하여 설명되므로, 두 개의 사각형은 다른 x 위치에서 표시됩니다.

온라인 예제

<svg xmlns="http://www.w3.org/2000/svg">//www.w3.org/2000/svg"
　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<svg x="10">
　　　　<rect x="10" y="10" height="100" width="100"
　　　　　　　　style="stroke:#ff0000; fill: #0000ff"/>
　　</svg>
　　<svg x="200">
　　　　<rect x="10" y="10" height="100" width="100"
　　　　　　　　style="stroke:#009900; fill: #00cc00"/>
　　</svg>
</svg>

이름 공간 속성은 루트 svg 요소에서만 필수적입니다. svg에 이름 공간이 설정되지 않았다면, 모든 내포 요소가 기본 이름 공간(루트 요소에서 설정) 내에 있다고 가정됩니다.
위 코드를 실행하여 생성된 SVG 이미지는 다음과 같습니다: