웹 사이트 내의 SVG 및 .png 로의 우아한 폴백?

Question

사람들은 현재 SVG의 페이지에서 어떻게 코딩합니까?

내가 토드에서 훌륭한 프런트 엔드 개발자가이 스레드를 보았다

:

http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

I가도, 크리스의 또 다른 잘 알려진 개발자이 하나를 참조하십시오

http://css-tricks.com/using-svg/

사람들은 HTML 요소 "객체"를 사용했지만, 이미 I보다 더 많은 경험을 가진 사람들을보고 싶습니다. SVG를 SVG와 함께 사용하는 가장 좋은 방법은 무엇입니까? U는 IE8 이상을 지원해야하며, 새로운 브라우저를 목표로 삼고 있습니다.

저는 그래픽의 대부분을 .ai로 사용하여 .svg의 대부분을 .png로 유지합니다.

Answer 1

질문에서 CSS 트릭 링크가 답을줍니다.

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'"> 

또는

if (!Modernizr.svg) { 
    $(".logo img").attr("src", "images/logo.png"); 
} 

Answer 2

내 개인적인 마음에 드는 clown car technique입니다. 기본적으로 인라인 svg 내부에 png src를 포함 할 수 있으며 svg 브라우저에만 svg를 표시하고 그렇지 않은 브라우저에는 png 만 표시합니다.