SVGの色・サイズ・余白を編集

SVGの色や線、サイズ、余白をプレビューで確認しながら編集できます。編集後はSVG・PNG・WebPや各種コードとして保存できます。

✓ 無料✓ 登録不要✓ ブラウザ内で処理

SVGを選択

ファイルまたはSVGコードを1つ読み込みます

SVGを選択

SVG（.svg）、1枚10MBまで
外部参照や実行可能な内容は、安全のため除外して読み込みます。

SVGをドラッグ＆ドロップ クリップボードからの貼り付け（Ctrl＋V）にも対応しています

SVGの読み込み・編集・保存はお使いの端末内で行います。SVGや編集内容を当社のサーバーや外部サービスへ送信しません。

SVGを選択すると、ここにプレビューと編集設定が表示されます。
HOW TO USE

SVGを編集する方法

SVGを選び、2つの手順で編集結果を保存できます。

  1. 01
    SVGを選択

    SVGファイルを選択するか、ドラッグ＆ドロップ、貼り付け、コード入力で読み込みます。

  2. 02
    見た目を調整して保存

    プレビューで図形を選び、色・線・サイズ・余白を調整してSVGまたは画像として保存します。

ABOUT

このツールについて

図形ごとに色や配置を編集できます

パス・四角形・円・線・テキストなどをプレビューまたは図形一覧から選び、塗り・線・不透明度・移動・拡大縮小・回転を変更できます。ベジェ曲線の頂点編集や新しい図形の描画には対応していません。

SVG全体の色やサイズも調整できます

使用中の色の一括置換、単色化、currentColor化、線幅統一、width・height・viewBox・余白・背景の調整に対応しています。

危険な内容は読み込み時に除外します

script、foreignObject、イベント属性、外部画像・外部CSS・外部フォント、javascript URL、アニメーションなどはプレビュー前に除外します。除外した内容を残したまま保存する機能はありません。

SVGコードとWeb用コードを利用できます

SVGコードの確認・編集・整形・圧縮に加え、HTML、CSS背景、Data URI、Base64、React JSX、Vue、symbol／use形式へ変換できます。

SVG・PNG・WebPで保存できます

編集状態を保ったSVGのほか、幅1～4,096pxのPNG・WebPへ変換できます。ラスタライズ時の高さはSVGの縦横比から自動計算します。

SVGは外部へ送信されません

SVGの読み込み、編集、コード変換、画像作成はお使いの端末内で行います。元のSVGや編集内容を当社のサーバーや外部サービスへ送信せず、自動保存も行いません。

対応上限

入力は1ファイル10MBまでです。極端に要素数やパスの命令数が多いSVGは、端末の動作を保つため読み込みを停止する場合があります。

複雑なSVGの表示について

グラデーション・マスク・フィルター・埋め込み画像は保持しますが、ブラウザやSVGの構造によって表示結果が異なる場合があります。外部フォントは読み込まないため、文字の見た目が変わる場合があります。

RELATED TOOLS

関連する画像・Web制作ツール

色の確認、ファビコン作成、画像形式の変換に役立つツールです。

SVG診断

最大100件のSVGを、安全性・表示・参照・アクセシビリティ・複雑さごとに診断します。

カラーコード変換

HEX・RGB・HSL・HSV/HSB・CMYKを相互変換し、文字とのコントラストも確認できます。

ファビコン作成

1枚の画像から7サイズ入りICO・PNG・Apple Touch Iconをまとめて作成します。
すべてのツールを見る