jQuery 및 svg 파일

Question

웹 사이트를 개발 중이며 망막 디스플레이에 도움이되는 svg 파일을 구현하고 싶지만 폴백 파일을 백업으로 사용하고 싶습니다. 이것은 html/js/css입니다.

<div id="band"> 
</div> <!--band--> 

<script> 
     $(document).ready(function() { 
       if (Modernizr.inlinesvg) { 
       //SVG. 
      $('#band').html('<img src="barbGradient.svg" />'); 
       } else { 
       //No SVG. 
      $('#band').html('<img src="barbGradient.png" />'); 
      } 
     }); 
</script> 

이것은 CSS입니다.

} 

.no-inlinesvg div#band { 
position: relative; 
top: -950px; 
background-repeat: repeat-x; 
background-image: url('../_images/barbGradient.png'); 
z-index: -1; 

} 

.inlinesvg div#band { 
position: relative; 
top: -950px; 
background-repeat: repeat-x; 
background-image: url('../_images/barbGradient.svg'); 
z-index: -1; 
} 

모든 브라우저가 끔찍하게 렌더링 중입니다! 다른 해상도에서 두 개의 PNG를 포함 할 수 있지만 js 메서드가 더 똑똑하다는 것을 알았습니다! 어떤 도움을 주시면 감사하겠습니다!

Answer 1

나는 png 해결책을 고수 할 것이다. 99.5 %의 사용자가 통지하지 않습니다. HTML spec은 준비가되지 않았으며 (편집자 초안) 해킹 된 구현의 비용이 IMO의 이점을 능가합니다. 여전히 이것을 원하면 this solution을 확인하십시오. 그러나 다시 한번 polyfill 개발자의 견적이 시간 :

"참고 :.이 많은 브레이크 포인트를 지원하는 것은 빨리 DOM에 크기를 추가하고 유지 보수 시간을 증가, 그래서 드물게이 기술을 사용"