DevToolBox

📊 SVG ゲージチャート生成

メーター風のゲージチャートをSVGで生成します。ダッシュボードやスコア表示に最適。

🔍 プレビュー

75/ 1000100

⚙️ 設定

🎨 プリセット

📄 SVG コード

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- Background arc -->
  <path
    d="M 280 150 A 130 130 0 0 0 20 149.99999999999997"
    fill="none"
    stroke="#e5e7eb"
    stroke-width="20"
    stroke-linecap="round"
  />

  <!-- Value arc -->
  <path
    d="M 241.92388155425118 58.07611844574883 A 130 130 0 0 0 20 149.99999999999997"
    fill="none"
    stroke="#3b82f6"
    stroke-width="20"
    stroke-linecap="round"
  />

  <!-- Center value text -->
  <text
    x="150"
    y="150"
    text-anchor="middle"
    dominant-baseline="middle"
    font-size="37.5"
    font-weight="bold"
    fill="#3b82f6"
  >
    75
  </text>
  <text
    x="150"
    y="175"
    text-anchor="middle"
    dominant-baseline="middle"
    font-size="15"
    fill="#6b7280"
  >
    / 100
  </text>

  <!-- Min/Max labels -->
  <text
    x="-10"
    y="149.99999999999997"
    text-anchor="middle"
    font-size="18.75"
    fill="#6b7280"
  >
    0
  </text>
  <text
    x="310"
    y="150"
    text-anchor="middle"
    font-size="18.75"
    fill="#6b7280"
  >
    100
  </text>
</svg>

ℹ️ 使い方

  • スライダーで値、角度、サイズなどを調整
  • プリセットボタンで一般的なゲージスタイルを適用
  • SVGコードをコピーしてWebサイトに埋め込み
  • ダウンロードボタンでSVGファイルとして保存
  • CSS/JavaScriptでアニメーション可能