.SVG 브라우저 지원

.SVG 브라우저 지원

---

반응 형 디자인을 작업 중이며 내비게이션 아이콘을 .svg 파일로 만들 생각 중입니다. 현재 브라우저 지원은 무엇이며 이전 브라우저 버전에 대한 해결 방법 / 플러그인이 있습니까?

---

모든 주요 브라우저는 <= IE8을 제외하고 수년간 지원되었습니다. 해결 방법은 예를 들어 RaphaelJS 일 수 있습니다.

출처 :

• http://caniuse.com/#search=svg
• https://github.com/DmitryBaranovskiy/raphael

---

SVG 사양 은 광범위하며 현재 전체 사양을 지원하는 브라우저는 없습니다. 즉 , 모든 주요 브라우저의 모든 최신 버전은 기본 SVG 지원을 제공 합니다. 이들 중 어느 것도 완전한 지원을 제공하지 않기 때문에 대상으로하는 각 브라우저에서 개별 기능을 확인해야합니다. 기본 모양 만 그리고 고급 기능 (예 : 필터, 애니메이션 등)을 사용하지 않는 경우 문제가 없을 것입니다.

전체 브라우저 호환성 매트릭스는 여기에서 찾을 수 있습니다 .

IE의 이전 버전에 대한 해결 방법은 VML 을 사용하는 것 입니다. IE6 지원이 필요하고 코드로 그림을 그리는 경우 Raphael.js 가이 호환성 검사를 수행하고 적절한 경우 VML 또는 SVG를 사용하여 렌더링합니다. 그러나 원시 SVG 파일을로드하고 작동하지 않는 이미지 소스로 사용하는 경우.

이전 브라우저의 또 다른 옵션은 canvg JavaScript 라이브러리 를 사용하는 것 입니다. 결과 이미지를 캔버스에 렌더링하는 순수한 JavaScript SVG 파서이지만 이는 과도 할 수 있습니다.

---

... 또는 아파치 서버가 처리하도록 할 수 있습니다.

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

모든 .svg 파일의 .png 버전 만 생성하면되며 파일이 css 배경 용인지 img 태그 용인지는 중요하지 않습니다.

---

• caniuse.com — SVG

edited : 저는 아주 멋진 SVG 비교 테이블에 연결하곤했지만 2011 년 이후로 업데이트되지 않았기 때문에 더 이상 관련이 없습니다.

---

주목할만한 점은 <= IE8 지원이 필요한 경우 GoogleChromeFrame을 쉽게 구현하여 원하는 SVG 지원을 얻을 수 있다는 것입니다.

각 브라우저에는 사양의 기능과 관련하여 약간의 단점이 있음을 알 수 있습니다. 필터를 사용하는 동적으로 생성 된 노드에 문제가 발생했으며 animateMotion이 너무 오랫동안 Google 크롬에서 버그가 발생했습니다 ... (이러한 이유로 FF5 +를 대화 형 인터페이스로 사용하고 Safari도 개선되고 있습니다)

IMO, 전체 응용 프로그램이 SVG가 아니면 아이콘의 크기를 적절하게 조정하지 않는 한 아이콘에 PNG를 사용합니다! :)

...하지만 SVG로 플레이하고 싶다면 Giv'er! ;)

---

¡ 오브젝트 요소로!

<object data="example.svg" type="image/svg+xml">
     <!-- If browser don't soport / don't find SVG  -->
     <img src="example.png" alt="Logotype" />
</object>

---

일반적으로 모든 이미지에 SVG를 사용할 수도 있습니다. 그렇게하면 iDevices에서 모든 망막 항목을 커버 할 수 있습니다. 조만간 다른 장치가 뒤따를 것입니다.

svg를 지원하지 않는 브라우저의 경우 본문에 'no-svg'클래스를 제공 할 수 있습니다.

CSS에 '.no-svg .yourimageclass'를 추가하고 대신 png를 배치하십시오. (재정의)

Boilerplate HTML5는 기본적으로 자바 스크립트 마법과 함께 이미 svg 클래스가 없습니다. (예 : IE8)

---

<img>요소 (CSS 배경 이미지와 반대)로 작업 하는 경우 편리한 해결 방법, Modernizr ( 브라우저에서 .svg 지원과 같은 특정 기능의 가용성을 감지하는 JavaScript 라이브러리 ) 및 몇 가지 조합을 사용합니다. jQuery 라인 :

$(".no-svg img").each(function() {
    var $this = $(this);
    if ($this.attr("src").indexOf(".svg") > -1) {
        var isSvg = $this.attr("src").toString();
        var isPng = isSvg.replace(".svg", ".png");
        $this.attr("src", isPng);
    }
});

1) 모든 .svg 파일의 .png 버전을 만듭니다. 2) Modernizr는 .no-svg.svg 지원이 없음을 감지하면 html 요소에 클래스를 제공합니다 . 3) jQuery는 파일 확장자를 바꿉니다. .indexOf(".svg")검사는 문자열 경우 ".svg"의 값 내에 포함되어 src반환, -1그것은 않는 경우 그것은과 양의 정수를 찾을 수없는 경우. 발견 한 경우 ".svg", 전체 src문자열로 끌어 isSvg및 .replace()교환 .svg을위한 .png과 같은 결과를 저장 isPng다음의 값으로 설정되어있는, src.

---

caniuse.js 스크립트를 사용 하여 브라우저가 SVG를 지원하는지 여부를 감지 할 수 있습니다 .

caniuse.svg()

---

배경 이미지의 경우 이전 브라우저에서 PNG 배경으로 쉽게 대체하는 방법은 다음과 같습니다.

http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/

참고URL : https://stackoverflow.com/questions/8926285/svg-browser-support