當下流程的移動端，手機型號太多太多，今天工作專案中突然發現還有同事在使用以前大家 曾經包括現在還很熟悉的css精靈，被我們的測試mm找來說在iphone6、iphone plus、iphone x等大屏的手機全糊了，當時我就懵逼了，我說怎麼會呢，後面一看，果然如此啊，看了下**，原來是用的，我說為什麼不用svg呢？？然後同事說乙個乙個的圖示好麻煩，我說可以用svg sprite啊，～～＞﹏＜，這個時候輪到同事一臉懵逼了……，所以想著可能是不是同樣還有很多同學也不知道svg symbols呢，那麼這就給大家分享一下：
svg英文全稱為(scalable vector graphics)，意思為可縮放的向量圖形。它是基於xml（extensible markup language），由world wide web consortium（w3c）聯盟進行開發的。嚴格來說應該是一種開放標準的向量圖形語言，可讓你設計激動人心的、高解析度的web圖形頁面，svg是一種採用xml 來描述二維圖形的語言，那麼symbol元素是什麼呢？單純翻譯的話，是「符號」的意思，然我的理解是symbol元素用來定義乙個圖形模板物件，它可以用乙個元素例項化。symbol元素對圖形的作用是在同一文件中多次使用，新增結構和語義，svg是無論如何放大縮小都不會糊，而當展示的尺寸大於本身，就會糊了，糊了，糊了……
1.1 回顧 css sprites
.icon-spritebackground-position來定位， 好處是減少了頁面的載入，要命的問題是定位遇到相容問題，1px、.5px偏差時，搞的你死去活來，後來移動端更是不清晰，被人罵了又罵。
1.2 展望 svg sprites
當後來有一天，在乙個月黑風高、暴雨傾盆、雷電交加的夜晚，我獨自一人漫步在一片小樹林裡，後來我發現了新大陸————svg，當然如果僅僅svg就我也就不會拿出來吹水，因為肯定是會被人噴的一臉口水的，但是如果再加上它的小弟——symbols？ svg symbols、svg symbols、svg symbols重要的事說三遍不過份吧，雙重組合（屠龍、倚天）試問天下誰敢它爭鋒？特別是svg它還下面還有很多小弟哦～，……有點扯遠了；這項技術基於兩個元素的使用：和。
1、使用方式一2、使用方式二，外鏈式引入path上寫行內式 fill="#06c"、style="fill:#06c";都是可以的，在維護上，是不是比更加方便呢？？？
當然啦，大家都懂的，越漂亮的妹子追的人越多啦，**也一樣，越好用的東西往往也是不可能那麼完美啦，看到這裡，是不是覺得想罵娘呢？白看你說這麼多廢話，最後不能用，坑爹……
別慌，其實也沒有那麼糟糕啦 ，svg只在ie9以上支援；所以如果你需要支援ie8及以下的瀏覽器，你需要另外再寫一套降級（例如，使用png方案），隨著科技的發展，ie9以上大多數人還是能接受啦，特別是手機端的使用者，再也不用擔心測試mm來找你，圖示不清晰的問題了啦，是不是很開心，有沒有～～
svg sprites相比css sprites，不管是在維護和開發的過程中，還是在使用者體驗、效能、大小、
專案迭代**維護上都比css sprites方便，更高效便捷;
svg sprites優缺點：
css sprites優缺點：RESTful的正確姿勢
很多人都有這樣的疑問 rest 英文 representational state transfer，簡稱rest 描述了乙個架構樣式的網路系統，比如 web 應用程式。它首次出現在 2000 年 roy fielding 的博士 中，roy fielding是 http 規範的主要編寫者之一。在目...
正確姿勢的verticle align
1.先看後面一句 在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。這很容易理解，如果給乙個 的td加乙個vertical align middle的樣式，裡面的內容會垂直居中，同樣的如果給乙個vertical align bottom就會底部對齊，如果給乙個vertical align...
正確上網的姿勢
1.購買國外伺服器，目前使用的是vultr，乙個月5刀。支援支付寶充值，最低10美元起。vultr相關鏈結 2.使用xshell連線伺服器 官方鏈結。安裝完成後新建會話 alt n 依次填寫圖中資訊。名稱可以是vultr或者其他，協議選擇ssh，主機填寫之前的ip address，埠號選擇22。連線...