SVG 예

간단한 SVG 예

간단한 SVG 그래픽 예:

다음은 SVG 파일입니다(SVG 확장자로 저장되는 SVG 파일).

SVG 코드 분석:

첫 번째 줄에는 XML 선언이 포함되어 있습니다. 독립형 속성을 참고하세요! 이 속성은 이 SVG 파일이 "독립형"인지 또는 외부 파일에 대한 참조를 포함하는지 여부를 지정합니다.

standalone="no"는 SVG 문서가 외부 파일(이 경우 DTD 파일)을 참조한다는 의미입니다.

두 번째와 세 번째 줄은 이 외부 SVG DTD를 나타냅니다. DTD는 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"에 있습니다. 이 DTD는 W3C에 있으며 허용되는 모든 SVG 요소를 포함합니다.

SVG 코드는 시작 태그 <svg> 및 닫는 태그 </svg>를 포함하여 <svg> 요소로 시작합니다. 이것이 루트 요소입니다. 너비와 높이 속성은 이 SVG 문서의 너비와 높이를 설정합니다. version 속성은 사용된 SVG 버전을 정의하고, xmlns 속성은 SVG 네임스페이스를 정의합니다.

SVG의 <원>은 원을 만드는 데 사용됩니다. cx 및 cy 속성은 원 중심의 x 및 y 좌표를 정의합니다. 이 두 속성을 생략하면 점이 (0, 0)으로 설정됩니다. r 속성은 원의 반경을 정의합니다.

획 및 획 너비 속성은 모양의 윤곽선이 표시되는 방식을 제어합니다. 원의 윤곽선을 검은색 테두리와 함께 2px 너비로 설정했습니다.

fill 속성은 도형 내의 색상을 설정합니다. 채우기 색상을 빨간색으로 설정했습니다.

닫는 태그는 SVG 요소와 문서 자체를 닫습니다.

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