SVG 形狀產生器

此工具是一個免費應用程式，可讓您透過直觀的滑桿操作輕鬆產生如波浪與斑點 (有機圓形) 的 SVG 形狀。您可以立即建立「區塊之間的波浪分隔線」或「放置於主視覺圖後方的有機形狀」——這些都是目前網頁設計中流行的趨勢——而無需使用專用的設計軟體。

產生的圖形會輸出為「SVG 資料」，它非常輕量，即使在高解析度螢幕上也能保持影像品質而不失真。可直接嵌入 HTML 的內聯程式碼、用於背景圖片的 CSS 程式碼，以及 Tailwind CSS 實用類別都會自動產生，大幅提升前端開發效率。

由於所有圖形產生處理皆完全在您的瀏覽器中執行，因此即使在包含機密資訊的環境中作業也很安全，並且您可以免費將素材用於商業或非商業用途。

SVG (Scalable Vector Graphics)

使用點、線和數學公式表達影像的向量格式影像資料。與 JPEG 或 PNG 不同，無論您放大多少，它都不會變成像素化，而且檔案大小非常小，非常適合網頁設計。

斑點 (Blob)

在 IT 與設計產業中，它指的是「像變形蟲般的有機柔軟形狀」。這是最近非常受歡迎的設計元素，用於網站上的背景點綴或作為照片的剪裁遮罩。

viewBox

在 SVG 標籤中指定的屬性，用於定義繪製 SVG 影像的「畫布比例與座標」。透過正確設定，影像在嵌入 HTML 時可以靈活地放大或縮小以符合其容器的寬度。

Tailwind CSS

一個實用程式優先的 CSS 框架，透過直接在 HTML 中編寫類別名稱來套用樣式。此工具可以直接輸出 Tailwind 的 `bg-[url('...')]` 格式程式碼，將轉換為 Data URI 的 SVG 影像設定為背景。

柏林雜訊 (Perlin Noise)

一種產生自然平滑偽亂數的演算法。在此工具內部，套用了類似的雜訊產生與內插演算法，以計算出美麗平滑且隨機的波浪與斑點曲線。

Q.我應該使用 PNG 還是 SVG？

對於網頁設計，我們建議使用 SVG，因為它無論解析度為何都能維持高影像品質，而且檔案大小非常小。另一方面，對於不允許直接上傳 SVG 的系統或用於 OGP 圖片等用途，請使用 PNG。從此工具下載的 PNG 是以相容於 Retina 的 2 倍解析度匯出的。

Q.我該如何讓波浪自動縮放至螢幕寬度？

當您使用產生的 SVG 或 CSS 程式碼時，波浪預設設計為自動響應 (縮放至螢幕寬度)。在內部，SVG 使用了 `preserveAspectRatio="none"` 設定。

Q.產生的形狀資料會傳送到伺服器嗎？

不會，它們不會傳送到任何地方。從形狀產生、SVG 程式碼輸出到 PNG 圖片渲染的所有程序，皆完全在您的瀏覽器 (在您的電腦或智慧型手機上) 內完成。您可以安全地使用它。

Q.我可以將產生的形狀用於商業用途嗎？

可以，您可以免費將使用此工具建立的 SVG 形狀與 PNG 圖片用於商業和非商業用途。不需要標示來源。

Q.我該如何在如 WordPress 的 CMS 中使用產生的 SVG？

您可以使用允許將 SVG 圖片直接上傳到媒體庫的外掛程式，或是直接將此工具中的「內聯 (Inline)」或「CSS」程式碼貼到您的 HTML/CSS 編輯器畫面中。

產生的 SVG 形狀可運用於各種網頁設計場景。以下是代表性的使用範例。