跳至主要内容

生成 Logo SVG

生成 Logo SVG 功能讓 Theme Builder 能夠直接在您的 WordPress 網站中建立並嵌入自訂的 Logo SVG，並自動進行命名空間安全的清理。

概述​

此功能會根據您網站的品牌方向和設計偏好，生成可縮放的向量圖形（SVG）Logo。生成的 SVG 會自動進行清理，確保它們在 WordPress 中使用時是安全的，同時仍能保持視覺完整性。

參數​

參數類型是否必要描述
site_namestring是用於生成 Logo 的網站名稱
stylestring是設計風格（例如：「現代」、「經典」、「極簡」、「活潑」）
colorsarray否用於 Logo 的十六進制顏色代碼陣列（例如：["#678233", "#ffffff"]）
widthnumber否SVG 寬度（單位：像素，預設值：200）
heightnumber否SVG 高度（單位：像素，預設值：200）
include_textboolean否是否在 Logo 中包含網站名稱作為文字（預設值：true）

輸出格式​

此功能會回傳一個 SVG 字串，結構如下：

{
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">...</svg>",
  "width": 200,
  "height": 200,
  "colors_used": ["#678233", "#ffffff"],
  "sanitised": true
}

SVG 清理行為​

生成的 SVG 會經過自動的命名空間安全清理，以達到以下目的：

  • 移除不安全的屬性 — 移除事件處理器、腳本和潛在危險的屬性
  • 保留命名空間 — 維護 SVG 命名空間（xmlns, xlink），以確保正確渲染
  • 驗證結構 — 確保 SVG 符合 W3C 標準
  • 編碼實體 — 正確轉義文字內容中的特殊字元
  • 移除外部引用 — 移除外部樣式表和圖片引用

這確保了 SVG 可以直接嵌入 WordPress，而無需額外的清理步驟。

使用範例​

提示：

為我的科技新創公司 "CloudSync" 生成一個使用藍色和白色顏色的現代 Logo。

結果： 此功能會創建一個 SVG Logo，該 Logo：

  • 融入了網站名稱 "CloudSync"
  • 使用了指定的藍色和白色配色方案
  • 遵循現代設計原則
  • 已經自動清理，可直接使用

與 Theme Builder 的整合​

當使用 Theme Builder 的設計方向選擇功能時，生成 Logo SVG 功能會：

  1. 分析您的設計方向和配色方案
  2. 生成與您的偏好相符的自訂 SVG Logo
  3. 自動將 Logo 嵌入到您網站的標頭/品牌區域
  4. 將 SVG 作為自訂 Logo 儲存到 WordPress 媒體庫

最佳實踐​

  • 提供清晰的風格偏好 — 描述您想要的設計風格（現代、經典、活潑等）
  • 指定顏色 — 包含您的品牌顏色，以保持一致性
  • 測試渲染 — 驗證 Logo 在不同螢幕尺寸上顯示是否正確
  • 進一步自訂 — 使用 WordPress 的 Logo 自訂工具來調整大小和位置

限制​

  • SVG Logo 是以靜態圖形生成的（非動畫）
  • 元素複雜的 Logo 可能需要手動修飾
  • 不支援自訂字體；文字會使用系統字體
  • 尺寸過大或過小的尺寸可能會影響品質

相關功能​