찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >SVG로

SVG로

WBOY
WBOY원래의
2016-09-29 09:19:071314검색

SVG란 무엇인가요? 아마도 많은 사람들이 SVG에 대해 들어봤을지 모르지만 SVG가 무엇인지 반드시 아는 것은 아닙니다. SVG(Scalable Vector Graphics 이해할 수 없는 영어 무리) 확장 가능한 벡터 그래픽으로 XML 형식을 사용하여 네트워크용 벡터 기반 그래픽을 정의하며, 이미지를 확대하거나 크기를 변경해도 그래픽 품질이 손실되지 않는 것이 특징이며 동시에 DOM과 같은 W3C 표준입니다.

비트맵과 벡터 그래픽에 대한 설명은 다음과 같습니다.

우리가 흔히 보는 그림인 비트맵은 평면상에 촘촘하게 배열된 매장들의 집합체로, 점들로 구성되어 있다는 뜻이다. 그리고 확대하면 해당 지점도 확대되어 사진이 매우 불명확하고 거칠게 보입니다.

객체지향 이미지, 드로잉 이미지라고도 알려진 벡터 그래픽은 수학적으로 선으로 연결된 일련의 점으로 정의됩니다. 벡터 파일의 그래픽 요소를 개체라고 합니다. 각 개체는 색상, 모양, 윤곽선, 크기 및 화면 위치와 같은 속성을 가진 독립된 엔터티입니다. 확대 후에도 이미지가 왜곡되지 않으며 해상도와 관련이 없다는 것이 특징이며 그래픽 디자인, 텍스트 디자인, 일부 로고 디자인, 레이아웃 디자인 등에 적합합니다. 벡터 그래픽 형식에는 CGM, SVG, AI(Adobe Illustrator), CDR(CorelDRAW), PDF, SWF, VML 등이 포함됩니다.

(ps: 이 에세이 아래 내용의 일부는 W3Cschool에서 발췌)

간단한 SVG

<span style="color: #0000ff;"><?</span><span style="color: #ff00ff;">xml version="1.0" standalone="no"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">circle </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="black"</span><span style="color: #ff0000;">
  stroke-width</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span>

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 문서의 너비와 높이를 설정합니다. version 속성은 사용된 SVG 버전을 정의하고, xmlns 속성은 SVG 네임스페이스를 정의합니다.

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

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

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

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

SVG의 장점

  • SVG는 다양한 도구로 읽고 수정할 수 있습니다(메모장도 쉽게 열고 수정할 수 있습니다)
  • SVG는 JPEG 및 GIF 이미지보다 작고 압축률이 높습니다.
  • SVG는 확장 가능합니다
  • SVG 이미지는 어떤 해상도에서도 고품질로 인쇄할 수 있습니다
  • SVG는 화질 저하 없이 확대 가능
  • SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합)
  • SVG는 Java와 같은 기술로 실행될 수 있습니다
  • SVG는 개방형 표준입니다
  • SVG 파일은 순수 XML입니다

, 또는