标签 - svg

svg 字体制作 iconfont    2019-12-20 17:21:10    28    0    0

点点iOS项目本身功能较多,导致应用体积也比较大。但是手机淘宝集成时对插件包大小有要求。因此点点iOS团队使用了一些方法来缩小插件包体积,比如部分业务只放在独立版、图片压缩(PNG大图转成JPG,ImageAlpha与ImageOptim对PNG图片压缩)、部分大图安装后从网络下载。近期小虎提出使用IconFont技术减小图片体积,让我在这这方面做了一些研究。最终将IconFont应用在iOS

svg 字体制作 iconfont    2019-12-20 17:18:28    28    0    0

什么是Iconfont

我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和我们使用自定义字体的方式是一样的,并且它是一种矢量图标。

计算机中显示的图形一般分为两类---位图和矢量图,我们平常使用的JPEG、PNG等图片都是位图格式,是一种由像素来表示的图像,而矢量图是由点、直线、多边形等基于数学方程的几何图元表示的图像,对比位图,矢量图具有体积小,放

svg ui design    2018-09-21 19:14:43    25    0    0

那些你可以用 SVG 做出令人驚艷的東西;它跟其他圖形的不同之處;還有為何輸出檔案要有更多考量。

How Designers Should Think About SVG

The stunning things you’ll create with SVG, how it differs from other graphics, and why exporting requires new considerations.

本文原作者 Peter Nowell 是居住在舊金山的設計師,客戶包含蘋果公司和 Flinto 等,目前已經開設許多品質優良的線上課程。


為了準備我計劃推出的 Sketch 和 SVG 工作流程課程,我跟很多剛入行和資深的設計師討論使用此格式的方法。我注意到一個對於 SVG 的共通誤解:

我們常常覺得 SVG 就像點陣圖片一樣,例如 PNG,但是可以有無限大的解析度。只不過,它真的不是這樣。

我的看法是:SVG 有些東西比較艱澀。輸出 (exporting),或是更精確的說法,從 Sketch* 到最終圖片的流程,會只需幾秒鐘,但也可能是 10 分鐘,這得視設計和圖片使用方法而定。如果要讓 SVG 完美符合需求,你可能要以某些方法修改 Sketch 圖層 (layers),或是調整輸出的語法。這看起來很複雜又枯燥乏味,但是並不困難,而且就此進入 SVG 全新可能性的世界。

因為,儘管有這些不同之處,SVG 的優異品質簡直滿出來了。我們會先介紹這幾點(因為很有趣),然後說明如何開始用務實的觀點看待 SVG。

*註:我的設計工具選擇用 Sketch,但是這篇文章裡的概念同樣可以用在 Adobe Illustrator 等大多數其他工具。

 

簡略的技術定義:

SVG 是可縮放向量圖形 (Scalable Vector Graphics) 的縮寫。它是一種圖形格式,就像 JPEG 或 PDF,它們的特色就是不被限制於某種解析度。這是因為 SVG 以向量圖形組成,而不是像素。雖然它們可以用在許多不同地方,但用在網站就是如魚得水。接下來的範例會展現它們的潛力。

 

為什麼 SVG 如此好棒棒?

之前已經有很多人仔細讚美過 SVG 了(如果你是網站開發者,請看 Chris Coyier 的閒談 SVG Is for Everybody,是技術成分比較多的介紹。)在這篇文章裡,我特別介紹設