將SVG圖像轉換爲不支持的瀏覽器的PNG - 回退 - modernizer.js（？）

Question

我正在查看幾張SVG圖片我在我的網站上有PNG，因爲瀏覽器不能正確支持SVG。我主要在IE（顯示完全錯誤的字體）中顯示基於文本的問題，所以我想我會創建一個回退到PNG。

我試過尋找一個很好的演練爲此（我是一個自我承認的noob），我還沒有設法使所有的工作。我相信我想用modernizer.js來檢查兼容性，然後以不兼容的不同圖像（？）

Answer 1

Chris Coyier在最新的Smashing Magazine CSS Q&A中回答了這個確切問題。

1. 下載一個版本Modernizr的被修剪成只是測試 SVG（假設這是你唯一需要的試驗）。
2. 運行測試。如果它通過 ，則放入SVG。如果失敗，請放入位圖。基本上：

實施例（JS溶液）：

if (!Modernizr.svg) { 
    $("#logo").css("background-image", "url(fallback.png)"); 
} 

實施例（CSS溶液）：

.no-svg #logo { background-image: url(fallback.png); } 

這應該只用於IE8和以下是必要的。 我可以使用有一個full table of browser support。

謝謝克里斯！