SVG 字元生成器
創造一個可重現的有機 SVG 字元,然後複製或下載精確的向量標記。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.設定頂點數、不規則性、畫布大小和填充顏色。
- 2.持續點選「隨機化形狀」直到預覽符合你的設計,並記錄顯示的種子,若需要可重複性。
- 3.複製 SVG 標記或下載向量檔案,並在目的地應用中測試。
關於SVG 字元生成器
SVG 字元生成器從少量明確控制中創造一個緊湊的有機向量形狀。選擇三至十二個頂點,設定不規則性從零到百分之一百,選擇從 256 到 1024 像素的方塊畫布,並選擇填充顏色。頁面會立即重建預覽、複製和下載連結所使用的相同 SVG 字串。不會上傳任何形狀、顏色、種子或匯出的標記,也無需帳號或外部圖形服務。
形狀可以重複產生,因為它使用無符號 32 位元種子。相同的設定和種子會產生相同的點、路徑資料與 SVG 標註。Randomize Shape 選項僅在按鈕被按下的時候,才會向瀏覽器的加密隨機來源請求新的種子。在 React 渲染期間不會呼叫隨機性,因此水合作用與無關的重新渲染無法靜默地改變圖形。目前的種子會顯示在結果下方,以便之後可以記錄並重現有用的形狀。
頂點以等角間隔分佈於畫布中心周圍。不規則性會透過一個決定性的種子生成器為每個頂點分配不同的半徑。零百分比會讓所有頂點擁有相同的半徑;較高的值允許更大的半徑變化,同時確保所有點都在保守的畫布邊界內。接著,工具會從最後一個和第一個頂點之間的中點開始,並以原始頂點為控制點,使用二次貝茲曲線連線連續的中點,產生連續圓潤的邊界,不插入不透明點陣圖,也不依賴伺服器端模型。
產生的文件具有明確的寬度、高度、與 viewBox 相匹配、可存取的圖片標籤、一個路徑、以及一個嚴格六位數的 HEX 填充色彩。座標在序列化時會四捨五入至兩位小數。這種四捨五入方式可以保持文件的可讀性與穩定性,同時保留足夠的精確度,以符合可用的畫布尺寸。下載的結果是真正的 SVG 文字,以 data URL 編碼,因此在相容的編輯器或瀏覽器中調整尺寸時,仍會維持向量幾何圖形。頁面上的預覽僅受版面設計限制,不會取代所請求的 SVG 尺寸。
控制項刻意定義了一個專注的形狀生成器,而非完整的向量編輯器。頂點接受三至十二的整數。不規則性接受零至一百。大小接受從 128 到 1024 的整數(根據測試邏輯),介面提供三個實用的預設值。填滿必須是六位數 HEX 顏色。無效值會被純生成器拒絕,而不是在使用者不知情的情況下被截斷。瀏覽器顏色輸入在正常互動中提供有效值。
這是一種裝飾性幾何圖形,不是數學圓、標誌清潔規則、地理邊界、生物模型,或隨機產生的識別標記。頂點數增加可以讓輪廓更詳細,但不會提升匯出座標的精確度。高不規則性可能產生緊密的彎曲或不均衡的視覺質量,因此應在大、小尺寸下檢查預覽。如果該形狀將放置在文字後方,應檢查實際對比度並留出足夠的邊距,而不是假設 SVG 的畫布邊界足以保證可讀性。
複製 SVG 會將完整標記寫入剪貼簿。若瀏覽器權限被拒絕,相同的標記將顯示在只讀文字區域,供手動選擇。下載 SVG 會使用包含種子的檔名,且不會建立永久伺服器檔案。該工具不會加入漸層、描邊、陰影、裁剪路徑、動畫、CSS 類別、元資料、最佳化步驟或點陣圖回退。這些功能若目的地需要,可在向量編輯器中稍後加入。
為確保可重複使用,請一併儲存種子、頂點數、不規則性、大小和顏色。請在最終瀏覽器、編輯器、電子郵件客戶端或內容系統中測試該檔案,因為部分清理工具即使標記本身有效,仍可能限制內嵌 SVG 或 data URL。W3C SVG 2 定義了路徑資料,包括移動、二次曲線和閉合路徑命令,而 MDN 提供了瀏覽器導向的路徑參考。這些來源支援序列化語法;種子半徑模型和產品限制是故意的本機行為,由決定性測試覆蓋。
方法與來源
產生均勻間隔的角點,以帶種子的無符號 32 位元產生器變動半徑,使用二次貝茲曲線指令連線連續的中點,將序列化的座標四捨五入至兩位小數,並使用一種嚴格的十六進位填滿。
常見問題
- 我可以重複生成相同的字元嗎?
- 可以。相同的頂點、不規則性、大小、顏色和顯示的種子會產生相同的 SVG 路徑。
- 下載的檔案是真實的向量檔案嗎?
- 是的。它是一個獨立的 SVG 標記,包含 viewbox 和路徑,不是截圖或點陣圖預覽。
- 為何「隨機化」僅改變種子?
- 種子控制決定性的半徑變化,而你選擇的幾何和顏色設定則保持穩定。
- 該工具會為所有平臺最佳化 SVG 嗎?
- 不會。它僅生成簡單有效的標記;最終目的地的清理工具、電子郵件客戶端和設計工具可能會施加自己的限制。
相關工具
色彩工具 使用指南
查看全部- How to Compare Approaches to Generate an SVG Blob (英文原文)
- Choose the Right Approach to Generate an SVG Blob (英文原文)
- How to Check the Result After You Generate an SVG Blob (英文原文)
- Does SVG Blob Generator Optimize SVG for Every Platform? (英文原文)
- Reproduce the Same SVG Blob Later by Saving the Seed (英文原文)
- Turn Into SVG Free: Generate a Blob Online (英文原文)
- Color Palette Generator on Android: A Browser Guide (英文原文)
- Choosing the Right Approach to Mix Two HEX Colors (英文原文)
- Gradient Generator Explained: How the CSS Gets Built (英文原文)
- Color Contrast Checker Free, No Sign Up (英文原文)
- Web Safe Colors Explained: The 216-Cube Formula (英文原文)
- How to Choose the Right Approach to Generate an SVG Pattern (英文原文)
- Is an RGB to HSV Converter Safe to Use Online? (英文原文)
- RGB to HEX for Beginners: A Plain-English Walkthrough (英文原文)
- RGB to CMYK Chart: Common Colors and Conversion Guide (英文原文)
- Random Color Generator CSS Code You Can Paste Today (英文原文)
- HTML Color Names Chart: Reference for 148 CSS Keywords (英文原文)
- Transparent Pixels and the Average Color of an Image (英文原文)
- Hex to RGB Converter Alternative for Strict CSS Hex (英文原文)
- How to Check Results After Using a Font Pairing Generator (英文原文)