SVG CAN ZOAD 벡터 그래픽 (확장 가능한 벡터 그래픽)은 두 차원 벡터 그래픽을 설명하기위한 확장 가능한 태그 언어 (XML)를 기반으로 한 그래픽 형식입니다. SVG는 W3C에 의해 공식화 된 새로운 2 차원 벡터 그래픽 형식이며 사양의 네트워크 벡터 그래픽 표준이기도합니다. SVG는 XML 구문을 엄격하게 따르며 텍스트 형식의 설명 언어로 이미지 내용을 설명하므로 이미지 해상도와 관련이없는 벡터 그래픽 형식입니다.
SVG는 무엇입니까?SVG는 확장 가능한 벡터 그래픽을 나타냅니다
SVG는 네트워크 용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG는 XML 형식을 사용하여 그래픽을 정의합니다
SVG 이미지는 축소하거나 크기를 변경할 때 그래픽 품질을 잃지 않습니다.
SVG는 Wanwei Network Alliance의 표준입니다
DOM 및 XSL과 같은 SVG 및 W3C 표준은 전체입니다.
캔버스와 SVG의 차이점 : SVGSVG는 XML의 2D 그래픽을 설명하는 언어입니다.
SVG는 XML을 기반으로합니다. 즉, SVG DOM의 각 요소가 사용할 수 있습니다. 특정 요소에 JavaScript 이벤트 프로세서를 추가 할 수 있습니다.
SVG에서는 각각의 그래픽이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저가 그래픽을 자동으로 재생할 수 있습니다.
특징:
비 의존적 해상도
이벤트 프로세서를 지원합니다
넓은 렌더링 영역 (예 : Google지도)이있는 가장 적합한 응용 프로그램
높은 복잡성은 렌더링 속도를 늦출 것입니다 (과도한 DOM의 적용은 빠르지 않습니다))).
게임 응용 프로그램에는 적합하지 않습니다
캔버스캔버스는 JavaScript를 통해 2D 그래픽을 그립니다.
캔버스는 픽셀로 렌더링됩니다.
캔버스에서는 그래픽이 그려지면 브라우저의 관심을 계속 얻지 못합니다. 위치가 변경되면 그래픽으로 덮여있을 수있는 객체를 포함하여 전체 장면을 다시 삭제해야합니다.
특징:
의존성
이벤트 프로세서를 지원하지 마십시오
약한 텍스트 렌더링 능력
.png 또는 .jpg 형식에 결과 이미지를 저장할 수 있습니다.
가장 적합한 게임 -집약적 인 게임은 자주 그릴 것입니다.
Simple example:
<svg 너비 = 100% 높이 = 100%> <Circle CX = 300 cy = 60 r = 50 스트로크 =#ff0 스트로크-볼 = 3 fill = red /> < /svg>비트 다이어그램 및 벡터 다이어그램
과거에는 JPEG, GIF 등과 같은 브라우저에 표시되는 그래픽은 모두 그래픽을 기반으로합니다. 격자 이미지에서 이미지 파일은 이미지에서 각 픽셀의 색상 값을 정의합니다. 브라우저는 이러한 값을 읽고 해당 조치를 취해야합니다. 이 이미지는 재생산 능력이 강하지만 경우에 따라 불충분 해 보일 것입니다. 예를 들어, 브라우저가 다른 크기로 표시되면,이 시점에서 브라우저는 일반적으로 생성됩니다. 또한 비트 맵의 애니메이션은 롤링 북의 유형, 즉 별도의 이미지를 빠르고 지속적으로 표시하는 애니메이션으로 제한됩니다.
벡터 다이어그램은 지정된 값 자체 대신 각 픽셀 값에 필요한 지침을 결정하도록 지정되어 있으며 이러한 어려움의 일부를 극복합니다. 예를 들어, 벡터 그래픽은 더 이상 1 인치의 직경에 대한 픽셀 값을 제공하지 않지만 브라우저에 직경 1 인치 원을 생성하도록 지시 한 다음 브라우저 (또는 플러그인)가 나머지를 수행하도록합니다. 이로 인해 브라우저가 원을 그려야한다는 것을 알고있는 한 벡터 그래픽을 사용하여 많은 제한이 제거됩니다. 이미지를 정상 크기의 3 배로 표시 해야하는 경우 브라우저는 격자 이미지의 공통 삽입 방법을 수행하지 않고 올바른 크기에 따라 원을 그리는 데 사용됩니다. 마찬가지로 브라우저에서받은 지침은 외부 정보 소스 (예 : 응용 프로그램 및 데이터베이스)에 쉽게 바인딩 할 수 있습니다
HTML 시스템에서 가장 일반적으로 사용되는 벡터링 기술은 SVG 및 HTML5 새로 추가 된 캔버스 요소입니다. 두 기술 모두 드로잉 벡터 맵 및 격자를 지원합니다.
SVG 개요스케일링 벡터 그래픽 (SVG)은 두 차원 그래픽을 설명하는 언어입니다 (SVG는 XML 구문을 엄격하게 따릅니다). SVG는 세 가지 유형의 그래픽 객체의 벡터 그래픽 (예 : 선형 및 곡선으로 구성된 경로), 이미지 및 텍스트를 허용합니다. 그래픽 객체 (텍스트 포함)는 포장, 양식화, 변환 및 이전에 제시된 객체로 결합 할 수 있습니다. SVG 기능 세트에는 중첩 변환, 전단 경로, 알파 마스크 및 템플릿 객체가 포함됩니다.
SVG 드로잉은 대화식이고 역동적입니다. 예를 들어, 스크립트를 사용하여 애니메이션을 정의하고 트리거 할 수 있습니다. 이것은 플래시에 비해 매우 강력합니다. Flash는 이진 파일로 만들고 수정하기가 더 어렵습니다. SVG는 텍스트 파일이며 동적 작동은 매우 쉽습니다. 또한 SVG는 관련 요소를 직접 제공하여 애니메이션을 완성하는 데 매우 편리합니다.
SVG는 다른 웹 표준과 호환되며 문서 개체 모델 DOM을 직접 지원합니다. 이것은 HTML5의 캔버스에 비해 매우 강력합니다 (여기서 SVG는 비슷한 캔버스를 사용하여 SVG 그래픽을 보여줍니다. 많은 기능이 HTML5의 캔버스와 약간 유사하다는 것을 알게 될 것입니다. 그것이 SVG의 캔버스라고 명확하게 언급되지 않았으며, html5의 캔버스 요소를 나타냅니다). 따라서 SVG의 많은 고급 응용 프로그램을 달성하기 위해 스크립트를 사용하는 것이 편리 할 수 있습니다. SVG의 그래픽 요소는 기본적으로 DOM의 표준 이벤트를 지원합니다. 많은 이벤트 처리 프로그램 (예 : OnMouseOver 및 OnClick)을 SVG 그래픽 객체에 할당 할 수 있습니다. SVG의 렌더링 속도는 캔버스 요소만큼 좋지는 않지만이 장점은 속도의 단점을 완전히 보충 할 수 있습니다.
SVG는 프로토콜 또는 언어라고 할 수 있습니다.
SVG는 HTML5의 것이 아니지만 페이지의 기술 기술 중 하나이기도 하며이 주제에 적용하겠습니다.
SVG 및 기타 사진 형식 비교다른 그림 형식과 비교할 때 SVG는 많은 장점이 있습니다 (많은 장점은 벡터 맵의 장점에서 나옵니다).
• SVG 파일은 Pure XML로, 많은 도구 (예 : 메모장)로 읽고 수정할 수 있습니다.
• JPEG 및 GIF 이미지와 비교하여 SVG는 더 작고 압축, 벡터 다이어그램, 작은 메모리, 축소 및 축소입니다.
• SVG는 확장 가능하며 이미지 품질이 줄어들면 고품질로 인쇄 할 수 있습니다.
• SVG 이미지의 텍스트는 선택 사항이며 사용할 수 있습니다 (지도 제작에 적합).
• SVG는 Java 기술로 실행할 수 있습니다.
• SVG는 개방성의 표준입니다.
SVG와 플래시 비교SVG의 주요 경쟁자는 플래시입니다. Flash와 비교할 때 SVG의 가장 큰 장점은 다른 표준 (예 : XSL 및 DOM)과 호환되며 작동하기 편리하지만 Flash는 인기없는 개인 기술이라는 것입니다. SVG는 스토리지 형식 및 동적 그래픽과 같은 다른 것들도 큰 이점을 차지합니다.
SVG 프리젠 테이션 방법HTML5 및 SVG를 지원하는 브라우저는 기본적으로 초점을 맞추지 않습니다. SVG를 직접 지원하는 브라우저의 경우 SVG는 주로 양면과 두 가지 방법을 사용합니다.
내부 유나이티드에서 HTML
SVG는 표준 HTML 요소이며 아래의 예를보십시오.
<? XML 버전 = 1.0 인코딩 = UTF-8?> <! docType html> <html> <head> <!-<meta content = 텍스트 /html; -> <title> 내 첫 SVG 페이지 </title> </head> <body> <svg xmlns = http://www.w3.org/2000/svg 버전 = 1.1 너비 = 200px 높이 = 200px> <st> x = 0 y = 0 너비 = 100% 높이 = 100% 채우기 = 없음 스트로크 = 검은 색/> <Circle CX = 100 r = 50 스타일 : Fill;/> </svg> </svg > < /body> < /html>
처음에는 XML 문의 시작과 SVG, XMLNS, 버전 등의 이름 공간은 주로 호환성 문제를 고려할 수 있습니다
독립적 인 SVG 파일
독립적 인 SVG는 SVG 파일 확장을 확장하여 벡터 그래픽 파일 형식을 제공하는 것을 말합니다. 이 SVG 파일은 브라우저에 포함되어 있습니다.
1. 독립적 인 SVG 파일/페이지, 정의 된 템플릿은 기본적으로 다음과 같습니다.
<svg 너비 = 100% 높이 = 100%> <!-SVG 마크 업은 여기 .-> </svg>
이러한 텍스트 파일을 SVG가있는 파일에 Sun.svg와 같은 확장자로 저장하거나 다른 페이지에 내장을 내릴 수 있습니다.
2.html 외부 SVG 파일을 참조하십시오.
예를 들어 SVG 그래픽을 포함시키기 위해 객체 또는 IMG 요소를 사용하십시오.
<! 여기에서 폴백 코드를 구현하거나 메시지를 표시합니다 .-> <p> 브라우저는 최신 브라우저로 업그레이드되지 않습니다. = 10 너비 = 30 높이 = 30 스트로크 = 30 스트로크 = 검은 색 채우기 = 투명한 뇌졸중 낭비 = 5/> <rad = 10 rx = 10 너비 = 30 높이 = 30 트로크 = 검은 색 채우기 = 투명한 뇌졸중 width = 5/> <Circle CX = 25 cy = 75 r = 20 스트로크 = 빨간색 채우기 = 투명한 뇌졸중 낭비 = 5/> <타원 cx = 75 rx = 20 ry = 5 s troke = 빨간색 채우기 = 투명한 뇌졸중-5/> <줄 x1 = 10 x2 = 50 y1 = 110 y2 = 150 스트로크 = 주황색 채우기 = 투명한 뇌졸중 윈드 = 5/> <폴리 라인 포인트 = 6 011061011111111111130 801125 80 140 135 95100145 스트로크 = 주황색 채우기 = 투명한 뇌졸중 득점 = 5/> <다각형 포인트 = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 스트로크 = 녹색 채우기 = 투명한 뇌졸중-5/> <경로 d = m20, 230 Q40, 205 50, 230 T90, 230 Fill = None Stroke = Blue Stroke-width = 5/svg>
이 예제는 둥근 모서리가있는 정상적인 사각형, 둥근, 타원형, 직선, 접이식, 다각형 및 경로와 같은 많은 모양을 그립니다. 이것들은 기본 그래픽 요소입니다. 직사각형과 같은 그래픽을 그리는 방법에는 여러 가지가 있지만 경로와 함께 구현할 수 있지만 SVG의 내용을 짧고 똑똑하고 읽기 쉽게 유지하려고 노력해야합니다.