爲什麼使用svg作爲文字標識？

Question

我剛開始學習svg。有一件事困擾我，我發現一些網站使用svg /路徑來繪製文本標誌。像這樣一個：http://www.desiringgod.org/

該標誌本身很簡單，但是，它使用的SVG包含一個可怕的<path>標籤，其中有很多數字。

我明白，使用SVG我們可以縮放徽標，但是如果此徽標基於.png文件，則看不到任何區別。那麼真正的好處是什麼？

其次，我不認爲像

<path d="M115.326252,8.93098333 L115.326252,16.3798167 L113.923083,16.3798167 L113.923083,14.96265 L113.878305,14.96265 C113.092947,16.0569833 111.560896,16.5939833 109.858654,16.5939833 C106.367752,16.5939833 103.855367,14.0609833 103.855367,8.63131667 C103.855367,3.20098333 106.367752,0.667483333 109.858654,0.667483333 C112.454152,0.667483333 114.454146,1.91331667 115.390858,5.21765 L113.771894,5.53931667 C113.007521,3.07148333 111.7296,2.12731667 109.943088,2.1273166 ....</path> 

由人寫的。這必須由某種東西產生，不是嗎？

Answer 1

使用SVG徽標在PNG標識的好處有以下幾點：

• 縮放到任何尺寸，非常適合網站的響應。
• 在視網膜顯示器上看起來很清晰。
• 不要失去清晰度，除了非常小的尺寸（與PNG相同）。

隨着PNG文件，你將最有可能需要生成相同的圖像的多個分辨率的版本，並希望將原始圖像足夠大，以支持未來的顯示分辨率（8K爲例）。

是的，路徑不是由人寫的。 It's a standard part of an SVG file。你也可以像導出SVG文件那樣做一些東西，例如Inkscape中帶有ink2canvas擴展名的HTML5畫布代碼。

Answer 2

SVG提供了一個方法來做到全分辨率的圖形元素，無論什麼 尺寸的屏幕，什麼縮放級別，或者你的用戶的 設備具有的分辨率。

那麼你寫HTML？ JavaScript的？ CSS？好。那麼你已經知道了很多你需要知道什麼來編寫SVG。

SVG實際上使用XML兼容格式來定義其渲染形狀。除此之外，您可以在CSS中實際設置形狀，並使其與JavaScript交互。存在多個JS庫來幫助你在這個世界上，比如D3.js和Raphael。這是一個SVG元素組（Envato葉）的例子。

SVG的其他好處是， 當您在帶有標記的html文檔中使用圖像時，您正在定義用戶瀏覽器將請求的文件。該請求將佔用帶寬，並且需要更多寶貴的時間來下載。如果您的圖像是一組dom節點，它會將該額外的HTTP請求剪掉，從而使您的網站更快，更方便用戶使用。

任何複雜的SVG XML文檔看起來都比較古老和複雜，看起來並不像使用圖像那麼容易。

Answer 3

在這裏，我將介紹從應用的角度使用SVG和PNG之間存在一些差異：在部署到你的應用程序

1. SVG文件比PNG文件輕。
2. 由於文件爲 已經在您的應用程序中，並且沒有縮放需要，但是它比您的SVG文件更重，所以就UI響應性而言，PNG效率更高。
3. 與SVG相比，PNG對照片或細節圖像給予更好的關注。

我個人使用SVG的圖標和標識和PNG的照片或詳細的圖像。 SVG的

Answer 4

優點：

• 分辨率無關
• 超級訪問的基於節點DOM API
• 沒有不必要的HTTP請求
• 交互式腳本

閱讀更多詳情：Why Aren’t You Using SVG?