SVGパスエディター

パスデータ（d属性）

  <span class="svg-presets-label">図形プリセット</span>
  <div class="svg-presets-grid">
    <button class="svg-preset-btn" data-shape="circle">円</button>
    <button class="svg-preset-btn" data-shape="star">星</button>
    <button class="svg-preset-btn" data-shape="heart">ハート</button>
    <button class="svg-preset-btn" data-shape="arrow">矢印</button>
    <button class="svg-preset-btn" data-shape="checkmark">チェック</button>
    <button class="svg-preset-btn" data-shape="xmark">バツ印</button>
    <button class="svg-preset-btn" data-shape="triangle">三角形</button>
    <button class="svg-preset-btn" data-shape="hexagon">六角形</button>
  </div>
</div>

<div class="svg-panel svg-section-sep">
  <p class="svg-panel-title">ストローク・塗り</p>
  <div class="svg-controls-row">
    <div class="svg-control-group">
      <label>線の色</label>
      <input type="color" id="svg-stroke-color" value="#e63946">
    </div>
    <div class="svg-control-group" style="flex:1;min-width:100px;">
      <label>線の太さ</label>
      <input type="number" id="svg-stroke-width" value="2" min="0" max="20" step="0.5">
    </div>
    <div class="svg-control-group">
      <label>塗りの色</label>
      <input type="color" id="svg-fill-color" value="#ffb3b8">
    </div>
    <div class="svg-control-group" style="flex:1;min-width:80px;">
      <label>塗り透明度</label>
      <input type="number" id="svg-fill-opacity" value="0.3" min="0" max="1" step="0.05">
    </div>
  </div>
</div>

<div class="svg-panel svg-section-sep">
  <p class="svg-panel-title">拡縮・移動</p>
  <div class="svg-transform-row">
    <div class="svg-control-group">
      <label>スケールX</label>
      <input type="number" id="svg-scale-x" value="1" min="0.1" max="10" step="0.1">
    </div>
    <div class="svg-control-group">
      <label>スケールY</label>
      <input type="number" id="svg-scale-y" value="1" min="0.1" max="10" step="0.1">
    </div>
    <div class="svg-control-group">
      <label>移動X</label>
      <input type="number" id="svg-translate-x" value="0" step="1">
    </div>
    <div class="svg-control-group">
      <label>移動Y</label>
      <input type="number" id="svg-translate-y" value="0" step="1">
    </div>
  </div>
</div>

プレビュー

  <div class="svg-info-box">
    <div class="svg-info-grid">
      <div class="svg-info-item">
        <span class="svg-info-key">コマンド数</span>
        <span class="svg-info-val" id="info-commands">—</span>
      </div>
      <div class="svg-info-item">
        <span class="svg-info-key">パス長</span>
        <span class="svg-info-val" id="info-length">—</span>
      </div>
      <div class="svg-info-item">
        <span class="svg-info-key">バウンディングボックス</span>
        <span class="svg-info-val" id="info-bbox">—</span>
      </div>
      <div class="svg-info-item">
        <span class="svg-info-key">データサイズ</span>
        <span class="svg-info-val" id="info-size">—</span>
      </div>
    </div>
  </div>
</div>

<div class="svg-panel svg-section-sep">
  <p class="svg-panel-title">出力・アクション</p>
  <div class="svg-actions-row">
    <button class="svg-action-btn" id="svg-btn-minify">圧縮</button>
    <button class="svg-action-btn" id="svg-btn-prettify">整形</button>
    <button class="svg-action-btn primary" id="svg-btn-copy-svg">SVGコードをコピー</button>
    <button class="svg-action-btn success" id="svg-btn-copy-path">パスデータをコピー</button>
    <button class="svg-action-btn" id="svg-btn-reset">リセット</button>
  </div>
  <div class="svg-output-area">
    <div class="svg-output-label">生成されたSVGコード</div>
    <textarea id="svg-output-code" readonly></textarea>
  </div>
</div>

コピーしました！

SVGパスエディター

関連ツール#

関連ツール