SVGの色・サイズ・余白を編集
SVGの色や線、サイズ、余白をプレビューで確認しながら編集できます。編集後はSVG・PNG・WebPや各種コードとして保存できます。
STEP 01SVGを選択
ファイルまたはSVGコードを1つ読み込みます
SVGを選択
SVG（.svg）、1枚10MBまで
外部参照や実行可能な内容は、安全のため除外して読み込みます。
SVGを編集する方法
SVGを選び、2つの手順で編集結果を保存できます。
- 01SVGを選択
SVGファイルを選択するか、ドラッグ＆ドロップ、貼り付け、コード入力で読み込みます。
- 02見た目を調整して保存
プレビューで図形を選び、色・線・サイズ・余白を調整してSVGまたは画像として保存します。
このツールについて
図形ごとに色や配置を編集できます
パス・四角形・円・線・テキストなどをプレビューまたは図形一覧から選び、塗り・線・不透明度・移動・拡大縮小・回転を変更できます。ベジェ曲線の頂点編集や新しい図形の描画には対応していません。
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の構造によって表示結果が異なる場合があります。外部フォントは読み込まないため、文字の見た目が変わる場合があります。