爲什麼這個SVG圖像縮小時會模糊？

我正在使用Bootstrap 3框架製作響應式網頁。我有一張我想用作頁面徽標的圖像。爲什麼這個SVG圖像縮小時會模糊？

我開始將全尺寸（788 x 1098）圖像保存爲PNG圖像。我的自定義CSS可以確保圖像的最大寬度爲280px，當然，Bootstrap的CSS會爲設備適當縮小圖像。當我在我的臺式電腦上查看我的自適應網頁時，即使縮小到197 x 280，也看起來不錯。但是，當我在移動設備上查看時，圖像看起來模糊不清。

那麼我聽說了SVG圖像，並認爲我會放棄它。我下載了Inkscape for Mac，在Inkscape中打開了全尺寸PNG，並重新保存爲SVG圖像。意外的是，當我在手機上查看我的網頁時，SVG圖像看起來不錯，但在我的臺式電腦上查看時看起來模糊不清。

這是爲什麼？我認爲SVG圖像的全部重點是它們可以無損或模糊地縮放？

我做了一個CodePen以協助表明：http://codepen.io/theclarkofben/pen/WvdKgM

<p>SVG 20%</p> 
<img src="http://www.clarkben.com/img/cv.svg" alt="a" style="height: 20%; width: 20%;"/> 
<p>SVG 100%</p> 
<img src="http://www.clarkben.com/img/cv.svg" alt="a" />

來源

2015-06-29 theclarkofben

你的「SVG」只是包含單個光柵（PNG）圖像的SVG，所以沒有任何真正可擴展的;見<image …view-source:http://www.clarkben.com/img/cv.svg。

您可以控制這種光柵的渲染有點用CSS（使用image-rendering或迫使GPU來處理通過某些transform，但結果woudn't是完美的。無論如何，即使這本爲矢量圖像，渲染A4到cca 300屏幕像素寬的盒子在我看來也不會「可讀」

來源

2015-06-29 15:05:03 myf

謝謝。問題; 「cca」是什麼意思？此外，我嘗試查看頁面源，但沒有<圖像...在任何地方？ – theclarkofben

@theclarkofben將其粘貼到瀏覽器地址欄中：'view-source：http：// www.clarkben.com/img/cv.svg'然後查找'

ad「cca」：https：//en.wikipedia.org/wiki/Circa – myf

它看起來像圖像仍然只是一個PNG圖像;它只是僞裝成一個SVG，因爲你給它的擴展名而沒有真正將其轉換爲SVG。您只需在inkscape中打開並將圖像保存爲SVG，就無法將PNG轉換爲SVG - 您需要從頭開始重新創建圖像作爲SVG，或者查看如何將光柵圖像轉換爲SVG圖像。

來源

2015-06-29 15:01:22 vijrox

更準確地說它是一個包裹在SVG文件中的PNG圖像 –

我不是平面設計師，所以如果有任何術語我出錯了，隨意編輯 – vijrox

你確定嗎？我遵循一個關於如何使用Inkscape將光柵轉換爲矢量的指南，並且在我保存之前花了大約2分鐘來處理轉換。一個轉換產品：https://en.wikipedia.org/wiki/Comparison_of_raster-to-vector_conversion_software – theclarkofben

爲什麼這個SVG圖像縮小時會模糊？

回答

相關問題