設計師：從英雄圖案中獲取免費的SVG背景圖案

但是，從頭開始設計定製SVG並非易事。

所有現代的Web瀏覽器都支持SVG ，它是您可以使用的最靈活的圖像格式 。

這是一個免費的可重複SVG模式庫，您可以使用不同的樣式，顏色和不透明性進行自定義 。

這就是爲什麼英雄圖案之類的工具對設計師如此有價值的原因。

向下滾動時，您將看到每個演示的實時演示 ，您可以單擊其中的任何一個以查看其外觀。

英雄模式有40多種不同的模式可供選擇，它們都列在首頁上。

背景色適用於平面 ，前景色適用於SVG中的圖案 。

在頁面頂部，您會發現一個固定的欄，其設置可以更改前景色和背景色 。

模式範圍從棋盤格到詳細的重複圖標（如錨點）。

由於自然的混合風格 ，很難提出一個糟糕的色彩組合（儘管當然仍然可能）。

在這裏，您可以調整前景色/背景色以及圖標的前景色 。

找到樣式後，您只需單擊該模塊即可查看更多信息的模態窗口。

這是相當普遍的 ，它也可以與其他圖像（例如PNG）一起使用。

在CSS中，有一個base64()方法將字符串數據轉換爲SVG數據 。

但是，真正的魔力發生在代碼片段框中 ，您可以在其中複製CSS以完全通過代碼嵌入SVG。

挺酷的！

這樣會將正確背景的重複背景嵌入到您的網站中。

因此，如果您不希望將SVG文件存儲在本地，則可以直接將CSS代碼複製/粘貼到樣式表中。

這樣，您可以在Illustrator等設計軟件中手動進行所有編輯 。

或者，如果您想自己編輯SVG ，則可以下載未編輯的SVG映像的副本 。

重複的背景曾經僅依靠PNG，但是Web標準已經足夠先進了， SVG可以取代他們的位置 。

Hero Patterns是使設計師能夠直接從瀏覽器完全控制SVG的少數工具之一。

新模式會經常添加 ，因此請務必經常檢查一次。

要開始使用 ，只需訪問Hero Patterns主頁並瀏覽其模式庫 。

翻譯自: https://www.hongkiat.com/blog/hero-patterns-svg-background-patterns/