為什麼svg格式在前端設計中未能普及？

01-12

svg1.2版本主流瀏覽器 ie9 安卓4.0以上都支持，那前端界普及嗎？這得分用途

1. 靜態icon作為主流用法實際已經非常廣泛，比如github全站從iconfont切到svg，應用寶和QQ瀏覽器的webview中的icon也都在切svg(廣告，應用寶和QQ瀏覽器招人)，同樣是矢量，對比iconfont不會有文字渲染引擎導致的垂直對齊不精確，渲染虛邊問題，而且支持小數，像.5px這樣的極細線可以輕鬆實現，優點多多。而且svg這貨在設計軟體里已經非常成熟，轉出甚至比jpg和png還容易。現在前端趨勢是擁抱svg，國外是非常普及，國內國情在普及中。

2. 文字排版，這是html和css的強項，svg1.2都還不支持多行文本(可以用textpath模擬)，而且垂直居中的屬性簡直反人類，但在一些特效如路徑文字上可圈可點。在文字排版方面難以普及。

3. 定位布局，這也是html和css擅長的地方，flex和新的grid算是布局領域的核彈，至於float等老方法現主要也是用來做兼容。而svg里可以認為全部絕對定位，而且只有部分元素如rect等支持x和y，都支持的偏移屬性是transform。transform的百分比值讓人難以控制。path這類元素不支持百分號單位，實話說，svg里通常沒單位，彈性布局只能hack。svg略勝一籌的是viewBox和preserveAspectRatio，css只能用padding-top這樣的hack或者支持不好的object-fit或者js來實現保持比例的解析度自適應。所以在定位布局上活動性質的h5有前景，也有部分已經用svg的。特殊場景才會普及，實際不普及。

4. 動畫，svg動畫smil在ie上尚未有版本支持，chrome也在提示廢除smil，但smil最大的優勢在於結點變形動畫，就像flash的形狀補間，所以，除非新css屬性d出現，否則smil不會被移除。而css目前做不到結點變形動畫。css的硬體加速和animateTransform對應。而且因為小數的支持smil通常不模糊。所以對動畫清晰度要求高，特別是有結點變形動畫的地方選svg，現狀是smil在適合的優勢場景普及。

5. 濾鏡等特殊效果，同樣對比css，半斤八兩，各有優勢，svg濾鏡難寫且沒和結構分離導致實際被用的情況少。少普及。

總的來說svg在靜態icon上是未來王者，在動畫方面是優勢利劍，在文字排版，定位布局及濾鏡效果上難普及。

先問是不是，好吧。

我司的Android端圖標已經全部替換為了SVG（開始趁老大不注意，和設計小姐姐密謀替換了一個模塊里的圖標，然後發現效果極好，就全面推行了）。感覺國內還是有太多"穩重"的人，有好用、穩定、優秀的新東西不用，把自己用的很順手的古董技術稱之為"可靠"。

svg比較適合用在UI和footer這種小圖標上，svg有個好處就是能硬肛windows上各種150%的高分屏，放大後的那種絲滑真的是個享受……

但是因為是小圖標，所以對比起png的時候可能反而會相應的大那麼一點……但是不會差很多

所以你說什麼未能普及……這種無中生有的話……你再說一遍……

國外早流行了

比如維基百科上的圖表已經在用svg

但國內網站還停留在網頁能看就行

甚至ie6 only

沒有使用webp svg html5&

我看到新知乎的 logo 已經是 SVG 了，

總體來講就是需要有一個有情懷的前端來推動比較好推，然後還需要一個重視技術實現的設計師來做內容輸出。

因為傳統的設計工具 PS Ai（強烈吐槽一下 Windows 上的 UI 設計工具鏈實在太落後時代了）對 SVG 輸出的支持比較弱雞，要人肉去處理一些本來應該由機器來處理的問題，這種比較討厭的事情一天存在，自然大家都不喜歡用。

簡單來講就是那天在色妓師在設計工具鏈裡面弄一個可用的 SVG 比導出一個 PNG / JPG 還要方便簡單時，一次導出就可以省去各種導出各種奇怪解析度圖標的功夫，當然資瓷啊！！

一張6.3MB 的JPG圖片轉SVG之後，變成多大了？46.5MB，來，誰告訴我該怎麼用？

你一定沒用過d3.js

snap.svg和iconfont第一個不服

國內用 svg 的比較少吧....

我們的product 幾乎都是svg

滿大街都是svg啊