과거에는 JPEG, GIF 등과 같은 브라우저에 표시되는 그래픽은 비트 맵이었으며 이러한 이미지 형식은 래스터를 기반으로했습니다. 래스터 이미지에서 이미지 파일은 이미지에서 각 픽셀의 색상 값을 정의합니다. 브라우저는 이러한 값을 읽고 해당 조치를 취해야합니다. 이러한 종류의 이미지 재생 능력은 비교적 강하지만 경우에 따라 불충분하게 보일 것입니다. 예를 들어, 브라우저가 다른 크기의 이미지를 표시하면 일반적으로 들쭉날쭉 한 가장자리가 생성되고 브라우저는 원본 이미지에 존재하지 않는 픽셀의 값을 삽입하거나 추측해야합니다. 이로 인해 이미지 왜곡이 발생합니다. 또한 비트 맵에 대한 애니메이션은 뒤집힌 책형 애니메이션을 생성하는 것으로 제한되어 있으며, 즉 개별 이미지를 빠르고 지속적인 방식으로 표시합니다.
벡터 다이어그램은 값 자체를 지정하는 대신 각 픽셀의 값을 결정하는 데 필요한 지침을 지정하여 이러한 어려움 중 일부를 극복합니다. 예를 들어, 직경이 1 인치 인 원에 대한 픽셀 값을 제공하는 대신 벡터 그래픽은 브라우저에 직경이 1 인치 인 원을 만들고 브라우저 (또는 플러그인)가 나머지를 수행하도록 지시합니다. 이것은 래스터 그래픽의 많은 제한 사항을 제거합니다. 벡터 그래픽을 사용하면 브라우저는 원을 그려야한다는 것을 알고 있습니다. 이미지를 일반 크기의 3 배로 표시 해야하는 경우 브라우저는 래스터 이미지의 일반적인 삽입 방법을 수행하지 않고도 올바른 크기로 원을 그립니다. 마찬가지로, 브라우저가 수신 한 지침은 외부 정보 소스 (예 : 응용 프로그램 및 데이터베이스)에 더 쉽게 구속 될 수 있으며 이미지를 애니메이션하기 위해 브라우저는 속성 (예 : 반경 또는 색상)을 조작하는 방법에 대한 지침 만 수신하면됩니다.
HTML 시스템에서 벡터 그래픽을 그리는 데 가장 일반적으로 사용되는 기술은 SVG 및 HTML5의 새로 추가 된 캔버스 요소입니다. 두 기술 모두 드로잉 벡터 및 래스터 다이어그램을 지원합니다.
SVG 개요확장 가능한 벡터 그래픽 (확장 가능한 벡터 그래픽, SVG)은 XML을 사용하여 2 차원 그래픽을 설명하는 언어입니다 (SVG는 XML 구문을 엄격하게 따릅니다). SVG는 세 가지 유형의 그래픽 객체의 벡터 그래픽 모양 (예 : 직선 및 곡선으로 구성된 경로), 이미지 및 텍스트를 허용합니다. 그래픽 객체 (텍스트 포함)는 그룹화, 스타일링, 변환 및 이전에 렌더링 된 객체로 결합 할 수 있습니다. SVG 기능 세트에는 중첩 변환, 클리핑 경로, 알파 마스크 및 템플릿 객체가 포함됩니다.
SVG 도면은 대화식이고 역동적입니다. 예를 들어, 스크립트를 사용하여 애니메이션을 정의하고 트리거 할 수 있습니다. 이것은 플래시에 비해 매우 강력합니다. Flash는 이진 파일이며 동적으로 생성하고 수정하기가 어렵습니다. SVG는 텍스트 파일이지만 동적 작업은 매우 쉽습니다. 또한 SVG는 애니메이션을 완료하기위한 관련 요소를 직접 제공하며 작동하기에 매우 편리합니다.
SVG는 다른 웹 표준과 호환되며 Document Object Model Dom을 직접 지원합니다. 이것은 또한 HTML5의 캔버스와 비교하여 매우 강력한 지점입니다 (여기서 SVG는 SVG 그래픽을 표시하기 위해 캔버스와 유사한 것을 사용합니다. 나중에 많은 기능이 HTML5의 캔버스와 약간 유사하다는 것을 알게 될 것입니다. 따라서 SVG의 많은 고급 응용 프로그램은 스크립트를 사용하여 쉽게 구현할 수 있습니다. 또한 SVG의 그래픽 요소는 기본적으로 DOM의 표준 이벤트를 지원합니다. OnMouseOver 및 OnClick과 같은 많은 이벤트 처리기를 SVG 그래픽 객체에 할당 할 수 있습니다. SVG의 렌더링 속도는 캔버스 요소만큼 좋지는 않지만 DOM 작동이 매우 유연하기 때문에 더 좋습니다.이 장점은 속도의 단점을 완전히 보충 할 수 있습니다.
SVG는 프로토콜과 언어라고 말할 수 있습니다. HTML의 표준 요소와 이미지 형식입니다.
SVG는 HTML5의 것이 아니지만 페이지의 인기있는 기술 중 하나이기도합니다. 이 주제에 넣자.
SVG 및 기타 이미지 형식의 비교다른 이미지 형식과 비교할 때 SVG는 많은 장점이 있습니다 (많은 장점은 벡터 그래픽의 장점에서 나옵니다.
• SVG 파일은 순수한 XML이며 많은 도구 (예 : 메모장)로 읽고 수정할 수 있습니다.
• SVG는 크기가 작고 JPEG 및 GIF 이미지에 비해 압축 가능합니다.
• SVG는 확장 가능하고 이미지 품질을 저하시키지 않고 확대 될 수 있으며 모든 해상도에서 고품질로 인쇄 할 수 있습니다.
• SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다 (지도 제작에 매우 적합).
• SVG는 Java 기술로 실행할 수 있습니다.
• SVG는 개방형 표준입니다.
SVG와 플래시의 비교SVG의 주요 경쟁자는 플래시입니다. Flash와 비교할 때 SVG의 가장 큰 장점은 다른 표준 (예 : XSL 및 DOM)과 호환되며 작동하기 쉽지만 Flash는 Unor -Fen 소스 개인 기술이라는 것입니다. SVG는 또한 스토리지 형식, 동적 그래픽 생성 등과 같은 다른 측면에서 큰 이점을 가지고 있습니다.
SVG가 제시되는 방법HTML5 및 SVG를 지원하는 브라우저와 관련하여 여기서는 토론의 초점이 아닙니다. 기본적으로 최신 Chrome 또는 Firefox 브라우저로 거의 수행됩니다 (IE 사용자는 IE9를 설치해야합니다. IE9 이전 버전의 경우 SVG 플러그인을 설치 해야하는 경우 여기에서 건너 뛸 것입니다). SVG를 직접 지원하는 브라우저의 경우 SVG는 주로 양면 및 양면 렌더링 방법을 채택합니다.
HTML 인라인SVG는 표준 HTML 요소이며 HTML에 직접 쓰십시오. 다음 예를 참조하십시오.
<? xml 버전 = "1.0"encoding = "utf-8"?>
<! doctype html>
<html>
<헤드>
<!-<meta content = "text /html; charset = utf-8"http-equiv = "content-type" />->
<title> 첫 번째 SVG 페이지 </title>
</head>
<body>
<svg xmlns = "http://www.w3.org/2000/svg"버전 = "1.1"
너비 = "200px">
<rect x = "0"y = "0"
fill = "none"stroke = "black"/>
<circle cx = "100"cy = "100"r = "50"
Style = "Stroke : Black; Fill : Red;"/>
</svg>
</body>
</html>
SVG 네임 스페이스 XMLNS, 버전 및 기타 부품과 관련된 XML 선언의 시작 부분은 주로 호환성 문제를 고려합니다. 이 부품은 기본적으로 HTML5에서 필요하지 않습니다 (글을 쓰는지 여부를 직접하는 것이 좋습니다).
독립형 SVG 파일독립적 인 SVG는 SVG 파일 확장자를 사용하여 벡터 그래픽 파일 형식을 제공하는 것을 말합니다. 이 SVG 파일을 브라우저에 포함 시키면 사용할 수 있습니다.
1. 독립적 인 SVG 파일/페이지, 정의 된 템플릿은 기본적으로 다음과 동일합니다.
<SVG>
<!- SVG 마크 업. ->
</svg>
Sun.svg와 같은 확장자와 같은 SVG가있는 파일에 이러한 텍스트 파일을 저장하십시오. 이러한 파일은 브라우저에서 직접 열리고 브라우징하거나 다른 페이지에 참조로 내장 할 수 있습니다.
2. HTML 참조 외부 SVG 파일.
객체 또는 IMG 요소를 사용하여 SVG 그래프를 포함하십시오. 예를 들어 다음 작은 예입니다.
<! doctype html>
<html>
<헤드>
<title> 첫 번째 SVG 페이지 </title>
</head>
<body>
<객체 데이터 = "sun.svg"type = "image/svg+xml"
너비 = "300px">
<!-여기에서 폴백 코드를 구현하거나 메시지를 표시합니다.->
<p> 브라우저는 SVG를 지원하지 않습니다 - 최신 브라우저로 업그레이드하십시오. </p>
</객체>
<img src = "sun.svg" />
</body>
</html>
실제로 SVG는 다른 XML 문서에 배치되거나 다른 XML 문서와 같은 XML 관련 기술을 사용하여 포맷하고 확인할 수 있습니다. 이것은 요점이 아니므로 여기서 생략됩니다.
SVG의 렌더링 순서SVG는 요소를 정의하는 순서대로 엄격하게 렌더링되며, 이는 z- 인덱스 값에 의한 계층을 제어하는 HTML과 다릅니다. SVG에서는 앞쪽에 쓰여진 요소가 먼저 렌더링되고 뒷면에 작성된 요소는 나중에 렌더링됩니다. 나중에 렌더링 된 요소는 이전 요소를 덮어 씁니다. 때때로 투명성의 영향을 받고 덮어 쓰는 것처럼 보이지만 SVG는 실제로 순서대로 엄격하게 렌더링됩니다.
참고 : SVG는 XML로 정의되므로 HTML과 다른 경우에 민감합니다.
실제 참조 :공식 문서 : http://www.w3.org/tr/svg11/
스크립트 인덱스 : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
개발 센터 : https://developer.mozilla.org/en/svg
인기있는 참조 : http://www.chinasvg.com/