SVG→PNG 変換ツール

SVGファイルをアップロードするか、SVGコードを貼り付けて、スケールや背景を設定し、高解像度のPNGをダウンロードできます。すべてブラウザ上で処理されるため、ファイルがサーバーに送信されることはありません。

SVGを入力

<div class="sp-dropzone" id="sp-dropzone">
  <div class="sp-dropzone-icon">&#9653;</div>
  <p class="sp-dropzone-text">SVGファイルをドロップ</p>
  <p class="sp-dropzone-sub">またはクリックして選択</p>
</div>
<input type="file" id="sp-file-input" accept=".svg,image/svg+xml" style="display:none;">

<div class="sp-field">
  <label class="sp-label" for="sp-code">またはSVGコードを貼り付け</label>
  <textarea id="sp-code" class="sp-textarea" placeholder="<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; ...>&#10;  ...&#10;</svg>"></textarea>
</div>

<button class="sp-btn-secondary" id="sp-load-sample" style="margin-top:10px;">サンプルSVGを読み込む</button>

設定

  <div class="sp-field">
    <label class="sp-label">スケール（Retina対応）</label>
    <div class="sp-scale-row">
      <button class="sp-scale-btn active" data-scale="1">1x</button>
      <button class="sp-scale-btn" data-scale="2">2x</button>
      <button class="sp-scale-btn" data-scale="3">3x</button>
      <button class="sp-scale-btn" data-scale="4">4x</button>
    </div>
  </div>

  <div class="sp-field">
    <label class="sp-label">出力サイズ（px）</label>
    <div class="sp-dim-row">
      <input type="number" id="sp-width" class="sp-input" placeholder="幅" min="1" max="8000">
      <button class="sp-lock-btn locked" id="sp-lock-btn" title="アスペクト比を固定">&#128274;</button>
      <input type="number" id="sp-height" class="sp-input" placeholder="高さ" min="1" max="8000">
    </div>
    <p style="font-size:11px;color:#9ca3af;margin:2px 0 0 0;">空欄の場合はSVGの元サイズ×スケールで出力</p>
  </div>

  <div class="sp-field">
    <label class="sp-label">背景</label>
    <div class="sp-color-row">
      <input type="color" id="sp-bg-color" class="sp-color-input" value="#ffffff" title="背景色">
      <button class="sp-transparent-btn active" id="sp-transparent-btn">透明</button>
      <span style="font-size:12px;color:#6b7280;flex:1;" id="sp-bg-label">透明PNG</span>
    </div>
  </div>

</div>

プレビュー & ダウンロード

ここにSVGのプレビューが表示されます

使い方

  1. SVGファイルをアップロードするか、SVGコードをテキストエリアに貼り付けます。
  2. スケール倍率を選択します（高解像度出力には2x・3xがおすすめです）。
  3. 必要に応じて幅・高さを指定できます。鍵マークでアスペクト比を固定できます。
  4. 背景色を指定するか、「透明」のままにします。
  5. 「変換してPNGをダウンロード」をクリックすると、CanvasでSVGをレンダリングしてPNG保存します。

事業の請求書・経費管理もかんたんに

freee会計なら、請求書作成・経費精算・確定申告までクラウドで一元管理。無料トライアル実施中。 freeeを無料で試す →

プレースホルダー画像 → プレースホルダー画像生成

画像リサイズ → 画像リサイズツール

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。

関連記事