svg

同個頁面上多個 inline SVG 顯示相互影響，以及 display: none 的顯示問題

Standard

在製作網頁上我們經常選擇 SVG 格式來處理向量圖片的顯示，它擁有清晰、能夠放大縮小、可動態修改等好處。近日工作上同事遇到一個有趣的 SVG 相關 issue，想起剛好我過去也曾經遇過類似的問題，發現之前沒有筆記下來，雖然只是個很小的東西，還是決定整理成文章，方便日後回憶。

情境 1 – 錯置的 linearGradient 定義

假設我們有 2 個不同的漸層 SVG icon，以 inline 的方式放置在同一個網頁上：

Continue reading

在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround

Standard

最近在執行的手機版網頁專案，針對其中許多 icons，我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片，銳利的向量圖片放大縮小也不怕，真棒。

但在進行不同裝置的測試時，發現在某些 Android 上用原生瀏覽器瀏覽時，某些 SVG 圖片特別模糊，毛邊都相當明顯，但又不是每張 SVG 圖片都是如此，相當詭異。

舉個例子：


（可點圖放大）

  • 左方是正常的情況，SVG 圖檔相當清晰
    （Chrome for Android v36）
  • 右方則是在 Android 原生瀏覽器上的情況
    可以注意圖片的邊緣都相當模糊、不銳利

經過比較發現，在我這個專案的情境中，只有被套上 transform: rotate 或 position: fixed，且是 background-image 方式使用的 SVG 圖片會有這個問題。

上 stackoverflow 搜尋看看，果然有類似的問題被提出（雖然提問者的情境與我不同），而也有人提出了 workaround 來暫時解決這個問題。

根據討論串，這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue，這個 issue 會使符合上述情境的 SVG 圖片，以 CSS 像素的密度（density）被繪製出來，但多數高階 Android 手機中，CSS 的 1px 並不等於裝置的 1px，所以會讓它看起來很模糊。

而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋，但也滿有意思的，是在 SVG 檔案中嵌入一個透明（opacity=0）的文字物件：

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片，就連 zoom in 也一樣清楚噢。