SVG 예제

간단한 SVG 예제

간단한 SVG 그래픽 예 :

다음은 SVG 파일 (확장자 SVG의 SVG 파일로 저장)입니다 :

SVG 코드 분석 :

첫 번째 줄은 XML 선언이 포함되어 있습니다. 독립 속성이 있습니다! 이 속성은 SVG 파일이 "혼자 서있다", 또는 외부 파일에 대한 참조를 포함할지 여부를 지정합니다.

이 경우, DTD에 - = 독립 "더는"SVG 문서가 외부 파일에 대한 참조를 가지고 있음을 의미합니다.

두 번째 및 세 번째 행은 외부 SVG DTD를 참조한다. DTD는 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"에 있습니다. DTD는 모두 허용 SVG 요소를 포함, W3C에 위치해 있습니다.

<SVG> 태그와 닫는 태그 </ SVG>을 돌려 포함 SVG 코드 <SVG> 요소의 시작. 이 루트 요소이다. 폭과 높이이 SVG 문서의 폭과 높이를 설정할 수있는 속성. 버전 속성의 xmlns는 SVG 네임 스페이스를 정의하는 속성, 사용 된 SVG 버전을 정의합니다.

SVG <원>은 원을 만드는 데 사용됩니다. CX 및 CY 속성은 원 x 및 y 좌표의 중심을 정의합니다. 이러한 두 가지 특성을 무시하면, 점은 (0, 0)으로 설정된다. R 속성은 원의 반지름을 정의한다.

뇌졸중과 뇌졸중 폭 속성은 모양의 방법 윤곽을 제어합니다. 우리는 원의 개요는 넓은 검은 색 테두리를 2 픽셀로 설정됩니다.

채우기 색 속성은 모양에서 설정됩니다. 우리는 빨간색으로 채우기 색상을 설정합니다.

태그를 닫으면 루트 SVG 요소 및 문서 자체를 닫습니다.

참고 : 모든 열기 태그 닫는 태그가 있어야합니다!