지원되지 않는 브라우저에 SVG (Scalable Vector Graphics) 추가
이 시리즈의 이전 글에서는 SVG의 오래된 브라우저에 대한 함정과 Raphael.js를 사용하여 대체 솔루션으로 그래픽을 제공하는 것에 대해 언급했습니다. 이 게시물에서 우리는이 문제를 더 자세히 살펴볼 것입니다..
아이디어는 간단합니다. SVG 요소를 웹 페이지에 그래픽을 전달하는 주요 방법으로 사용하고 있지만 동시에 대체 기능도 제공합니다 지원되지 않는 브라우저에서 렌더링 될 수 있습니다..
물론, 우리가 취할 수있는 많은 경로가 있지만보다 일반적인 솔루션이라고 생각되는 두 가지 솔루션 만 살펴볼 것입니다. 그럼 우리가 어떻게 할 수 있는지 보자..
개체 요소 사용
직접 HTML 문서에 넣는 것 외에도 SVG를 임베드하는 여러 가지 방법이 있습니다. 예를 들어, 그래픽을 .svg 파일을 사용하면 요소.
데모 목적을 위해 우리 웹 페이지에 Apple 로고와 SVG를 추가했습니다. 그러나 지원되지 않는 브라우저는 비어 있습니다. 이 문제를 해결하기 위해 다음과 같이 Bitmap 그래픽을 제공 할 수 있습니다.
이렇게하면 지원되는 브라우저에서 .svg, 동안 지원되지 않는 브라우저는 비트 맵 그래픽을 전달합니다.. 우리는 “PNG” Apple 로고 아래에 표시되어 어떤 그래픽이 전달되는지 추적합니다..
그러나 다른 게시물에서 언급 한 것처럼, 비트 맵 그래픽은 SVG만큼 유연하지 않고 확장 가능하지 않습니다.. 이제 다른 솔루션을 살펴 보겠습니다..
Modernizr 사용하기
우리가 사용할 수있는 또 다른 방법은 모더니즈. 이 자바 스크립트 라이브러리에 익숙하지 않은 사용자를 위해 우리가 그것에 대해 다룰 전용 포스트를 갖게 될지 걱정하지 마십시오. 당분간, 우리와 계속 지내십시오..
우선 필요한 JavaScript 라이브러리를 준비해 보겠습니다., Modernizr.js 및 Raphael.js. 그런 다음 우리는 또한 .svg 파일을이 도구 인 ReadySetRaphael.js로 Raphael 지원 형식으로 변환하고 출력을 별도의 파일로 저장하십시오 .js 파일; 그것의 이름을 지어 보자. svg.js.
다음과 같이 Modernzr.js를 HTML 문서에 포함 시키십시오.
그리고 다른 두 파일, raphael.js 과 svg.js, 조건부로로드 할 것입니다., 지원되지 않는 브라우저에서 볼 때만.
Modernizr을 사용하면 브라우저 기능을 감지 할 수 있습니다.이 경우 브라우저에서 SVG를 렌더링 할 수 있는지 여부를 감지하고 그렇지 않은 경우 스크립트를 제공합니다.
if (! Modernizr.inlinesvg) document.write ( ''
