爲什麼SVG渲染比PNG渲染更糟糕？

我比較了不同瀏覽器中的兩張圖片。第一個是SVG圖像，第二個是PNG圖像。爲什麼SVG渲染比PNG渲染更糟糕？

下面是結果：

enter image description here

我創建了一個的jsfiddle這裏：http://jsfiddle.net/confile/2LL5M/

這是我使用的代碼：

SVG Image <br> 
<img width="300" src="https://dl.dropboxusercontent.com/u/47067729/sticker2.svg"> 

<br><br>  
PNG Image <br> 
<img width="250" src="https://dl.dropboxusercontent.com/u/47067729/sticker.png">

兩個PROBL EMS發生：

SVG圖像的黑邊不正確縮放他們似乎更薄比他們應該縮放
PNG圖像具有更好的質量後。渲染更加平滑，邊緣顯得強烈而銳利。 SVG圖像質量差，邊緣模糊

我使用Adobe Illustrator從SVG導出PNG。

我怎樣才能提高在Chrome/FF/Safari瀏覽器，SVG圖像質量？

來源

2014-05-21 confile

「我怎樣才能增加瀏覽器的SVG圖像質量？」你測試了哪些瀏覽器？你在什麼操作系統上？ – JakeGould

所以......無論是從SVG創建PNG圖像，黑邊與瀏覽器都是不同的。什麼轉換了它？ – Popnoodles

@JakeGould鉻/ FF/Safari瀏覽器 – confile

這很難說，爲什麼Adobe Illustrator中使用的PNG比SVG等較粗的線條。 AI在內部使用其專有文檔格式，因此轉換爲PNG或SVG將導致一些細微變化。

但是，對於如何使SVG文件更像PNG的簡單問題，只需返回到您的編輯器，選擇所有內容，並設置更大的筆觸寬度。如果你仍然發現線是模糊的，你可以在你的CSS設置shape-rendering:crispEdges;，但要知道，這完全關閉抗鋸齒，造成鋸齒邊緣到你的對角線。

來源

2014-05-21 15:13:07 AmeliaBR

爲什麼SVG渲染比PNG渲染更糟糕？

回答

相關問題