SVG 圖像：在網頁上使用圖標的最佳方式

SVG 圖像很有吸引力，因為它們可以縮放到任意大小，同時保持相同的質量。 HTML 元素是在網頁上包含圖像的最常見方式。 要將 SVG 圖像用作頁面上的圖標，最簡單的解決方案是使用 HTML 元素。 圖標字體是 HTML 中圖標的流行解決方案，但它們有幾個缺點。 它們不是真正的字體，因此不能像真正的字體那樣使用 CSS 設置樣式。 它們也不像 SVG 圖像那樣與分辨率無關，因此它們不能在不損失質量的情況下縮放到不同的尺寸。 HTML 元素可用於嵌入 SVG 圖像，就像嵌入任何其他圖像一樣。 您可以使用 CSS 來設置圖像的樣式，並且由於 SVG 圖像與分辨率無關，因此可以將它們縮放到任意大小而不會降低質量。

圖標和媒體文件共同構成了網站的外觀。 當您的網站上有插圖時，您會使其對訪問者更具吸引力。 時不時地，網頁上的視覺效果似乎缺乏質量。 在本課中，我們將向您展示如何使用 SVG 文件的 HTML 代碼來提高圖標的質量。 編碼或使用 Illustrator 等軟件也可以幫助您創建自己的 SVG。 通過搜索圖標並更改其大小，將圖標的 HTML 代碼複製到 CMS（不要為其著色以使其自定義）。 也可以獲得像 WorldVectorLogo 這樣的SVG 標誌庫。

添加嵌入元素時，會出現一個對話框，允許您複製和粘貼代碼。 之前顯示的圖標代碼位於此處，可以從其他網站粘貼。 您可以通過選擇代碼的寬度和高度來更改圖標的大小。

以下是選擇合適圖標的一些提示。 如果您不需要大量的樣式更改，圖標字體對您來說可能非常有效。 對於自定義和動畫，應該使用 s vo vo。 如果您需要完全控制各種圖標的顏色、平滑過渡和動畫，則尤其如此。

真正的透明度可以通過使用 PNG 和 sva 文件來實現，因此兩者都是徽標和圖形設計的絕佳選擇。 值得注意的是，PNG 文件是光柵文件的最佳選擇之一。 如果您使用像素和透明度，PNG 是一個很好的選擇。

同樣，您可以將 PNG 或其他光柵格式圖像轉換為 sva。 HTML5 和 CSS3 腳本語言支持多種文件類型，並支持動畫和透明度。 由於它沒有像 PNG 這樣的標準格式那樣廣泛使用，因此舊的瀏覽器和設備不支持它。

矢量文件有足夠的信息來顯示任何比例的矢量，而位圖文件需要更大的文件來顯示圖像的放大版本，這會佔用更多空間。 由於較小的文件在瀏覽器中加載速度更快，因此它們可以提高網站的頁面性能。

Svg 可以用作圖標嗎？

可縮放矢量圖形或 SVG 通常被認為是用作網站圖標的不錯選擇，因為它們是矢量圖形。 可以在不降低質量的情況下將矢量圖形縮小到任意大小。 由於文件較小和壓縮，您的網站快速加載不會有問題。

它是一種矢量圖像格式，與可擴展標記語言 (XML) 兼容，可以使用可縮放矢量圖形 (SVG) 進行繪製。 XML 代碼塊的 URL 直接提供給瀏覽器並在瀏覽器中呈現，而不是固定大小的像素圖像。 通過使用這些小圖像，可以比使用文字更快地顯示動作和信息。 當第一台 Tamagotchis、iMac 和 Palm Pilots 來到我們家時，SVG 圖像文件格式幾乎同時被介紹給世界。 大多數網絡瀏覽器不支持 SVG，而且他們也沒有意識到這一點。 Web 瀏覽器在 2017 年開始支持 SVG，但直到那時它才變得可行。 因為它們是矢量文件，所以如果您使用 SVG 或圖標網絡字體，縮放不會有任何問題。

在設計圖標時，預製圖標的局限性更大，因為沒有太多選擇。 如果您正在尋找更多功能，您應該使用 sva 文件。 可以使用以下兩種方法之一創建簡單的 SVG 圖標：手動或使用工具。 您可以藉助矢量圖像程序在虛擬繪圖板上創建圖標。 導出 .svg 文件後，您就完成了。 除了 Evernote 列表，您還可以下載免費的 SVG 圖標。 形狀的尺寸由其寬度和高度決定，但其位置由其 x 和 y 決定。 類名也可以在單獨的 CSS 文件中為 <svg> 和 <rect> 元素設置。 在 Ycode 的無代碼生成器中更改這些圖標的背景顏色會直接更改圖標的顏色。

矢量圖像格式 (SVG) 是設計人員和開發人員等的強大工具。 它也可以在沒有歸屬地的情況下用於商業項目，它是一個多功能的文件系統，可以用於個人和商業項目。 sva 文件中的圖像可以用作 CSS 中的背景圖像，類似於 PNG、JPG 和 GIF 圖像。 因此，CSS 是一個優秀的工具，可以利用 SVG 帶來的同樣令人敬畏的東西，例如靈活性和清晰度。 SVG 還可以執行與光柵圖形相同的功能，例如重複。 使用 SVG，任何尋找多功能且清晰圖像格式的設計師或開發人員一定會找到它。

我可以使用 Svg 文件作為 Favicon 嗎？

在 Firefox 和 Chrome 中，支持通過 SVG 文件查詢內嵌媒體的能力。 SVG 是一種腳本語言，可以在不損失質量的情況下進行縮放，它通常非常小，並且它還可以包含嵌入式 CSS，即使存在嵌入式媒體查詢也是如此。

為什麼 Svg 文件不推薦用於徽標？

因為 SVG 基於矢量技術，所以它不太適合像照片那樣具有復雜細節和紋理的圖像。 對於使用更簡單顏色和形狀的徽標、圖標和其他平面圖形，使用 SVG 是一個不錯的選擇。 此外，雖然大多數現代瀏覽器都支持 SVG，但舊版本可能不支持。

如何從 Svg 創建圖標？

有幾種方法可以從 SVG 文件創建圖標。 一種方法是使用矢量編輯程序（如 Adob​​e Illustrator）打開文件，然後將其導出為圖標文件。 另一種方法是使用轉換器工具將 SVG 文件轉換為圖標文件。

Icomoon 和 Fontello 等在線工具簡化了創建網絡字體的過程。 可縮放矢量圖形是一項新功能，它允許我們以比以前更廣泛的方式在網頁上創建圖標。 您可以使用一些簡單的回退來幫助 Explorer 8。這是 SVG 的內置屬性，它是片段標識符的名稱。 通過使用 sva 視圖規範或尋址數組，可以引用片段。 SVG 格式的元素標識符的 URL。 只有當一個值被檢測為棋子精靈的一部分時，黑馬才可見（來自維基百科共享資源）並且與下面的方案相同。

只要圖像被正確標記，此技術就可以與 Firefox、Chrome、Safari（桌面）和 Opera 一起使用。 如前所述，您還可以使用外部 SVG 文件生成 CSS 精靈。 這是一項技術先進且隨時可用的技術。 該軟件已經在所有主流瀏覽器（包括 IE8）中進行了測試，並且運行良好。 主要元素由標籤排列。 使用 Icomoon 或 Grunt 插件（Google 的 Grunt SVG 合併插件），您可以手動創建符號標籤集合。 除 Internet Explorer 9 外，所有主流瀏覽器都支持此方法。 甚至 Jonathan Neal 的“SVG4everybody”腳本也可以解決這個問題。

如何使我的 Svg 圖標可訪問？

您可以做一些事情來使您的 svg 圖標易於訪問。 一種是給svg 元素添加一個 title 屬性。 這將為屏幕閱讀器提供圖標的描述。 另一種是向 svg 元素添加一個 role=”img” 屬性。 這將使屏幕閱讀器知道該元素是一個圖像。 最後，您可以向 svg 元素添加一個 focusable=”false” 屬性。 這將防止圖標在使用鍵盤導航頁面時獲得焦點。

矢量圖形從 1999 年就出現了，但它們的受歡迎程度正在增加。 要決定哪些圖片是裝飾性的，哪些是信息性的，您必須首先確定哪些是裝飾性的。 如果一個圖像被認為是裝飾性的，它必須有一個空的或 null 的替代文本屬性。 真正的替代方案應該是有意義的和描述性的，不應包含超過 250 個字符，並且不應難以理解。 如果您的圖像是基本的、簡單的或裝飾性的，您應該包括文件名。 如果您需要包含更複雜或必要的 SVG ，您可能還想使用標記。 由於此更改，您在樣式和動畫方面也將有更多選擇。

當談到用於傳遞基本替代內容的不同模式時，沒有明確的偏好。 因為大多數模式都能夠呈現替代內容，設計人員和開發人員將有更多選擇。 模式 11 是不同瀏覽器和屏幕閱讀器為 SVG 提供更具描述性的替代內容的最可靠選擇。

如何使我的 Svg 圖標可訪問？

您需要在代碼中包含 *title* 以使其更易於訪問。 始終最好將 *title * 放在 *svg% 之前 svg> 元素現在將具有 aria-described by。 在關於 Aria-described by 的頁面上，您可以找到 aria-attribute 信息。

為 Cricut 設計空間導出 Svg 文件

您必須以以下格式導出 svg 文件：*br 如果您打算在 Cricut 設計空間中使用它。
沒有鏈接相同類型的圖像。

Svg 文件是否可訪問？

您可以縮放 SVG 圖像，這意味著它們可以由讀者放大和縮放……1.2可訪問的 SVG ？ 小 PNG 圖像：小 SVG 圖像：放大 PNG 圖像：放大

Jpeg 對比Png：哪個更好？

在 jpeg 和 png 之間進行選擇時，沒有正確或錯誤的答案，因為它們各有優缺點。 歸根結底，只有一種偏好。

Svgs 需要隱藏 Aria 嗎？

雖然一些屏幕閱讀器可能會忽略沒有角色或可訪問名稱的 SVG，但其他屏幕閱讀器可能仍會找到它並將其宣佈為一個沒有可訪問名稱的“組”。 如果 SVG 旨在裝飾，避免這些情況的最佳方法是盡可能始終使用 aria-hidden=”true”。

Svg 文件：非常適合圖形，但要注意嵌入式 Js 代碼

使用 SVG 文件時，網頁可以顯示圖形。 它們不使用像素，而是使用形狀、數字和坐標，賦予它們與矢量文件相同的優勢，並允許它們在不犧牲質量的情況下無限擴展。 如果您使用 SVG 文件，它們可能包含嵌入式 JavaScript (JS) 代碼。 如果代碼感染了病毒，它可能容易受到攻擊。 例如，受感染的 SVG 文件可以將用戶重定向到明顯具有欺詐性的惡意網站。 這些網站因引導用戶安裝偽裝成瀏覽器插件或更糟糕的病毒檢測程序的間諜軟件而臭名昭著。