SVGをPNGに変換
ベクターの絵を、決めた大きさの画像にします
使い方
- SVGを選ぶ
- 書き出す幅を決める
- できた画像を保存する
このツールについて
SVG（ベクター形式の絵）を、決めた幅のPNGまたはJPEGにします。SVGに大きさが書かれていない場合は、縦横比から高さを決めます。読み込む前に、SVGの中のスクリプトと外部を指す参照を取り除きます。SVGは中に外部の画像や書体を読み込む指定を書けるため、そのまま扱うと意図しない通信が起きるからです。
書き出す大きさの決まり方
SVGそのものに幅と高さが書かれていれば、その大きさで書き出します。書かれていない場合は、指定した幅とviewBoxの縦横比から高さを計算します。思った大きさにならないときは、SVGの側に寸法が書かれていると考えてください。
幅は1から8000ピクセルまで指定できます。大きさも縦横比も読み取れないSVGは、勝手な既定値をあてがわずに断ります。どの大きさで書き出されたのか分からない画像を作らないためです。
読み込む前に、外を指すものを取り除く
SVGは中にスクリプトや、外部の画像・書体を読み込む指定を書けます。そのまま描くと、ファイルを選んだだけで意図しない通信が起きるため、描く前にスクリプト・外部を指す参照・イベントの属性を取り除いています。
そのため、外部の書体を指定していた文字は、端末に入っている書体で描かれ、元の見た目と変わることがあります。文字の形まで再現したいときは、SVGの側で文字を図形に変換してからお使いください。
PNGとJPEG、まとめて書き出すとき
PNGを選ぶと、SVGの透明な部分がそのまま透明として残ります。JPEGを選んだ場合は透明を持てないので、地が白で塗られます。ロゴのように背景を持たない絵は、PNGのほうが使い回せます。
複数のSVGを選ぶと同じ幅で順に書き出し、2枚以上ならZIPにまとめます。書き出したPNGはもう拡大に強くないので、大きく使う予定があるなら、はじめから大きい幅で書き出してください。
よくある質問
- PNGからSVGへ戻せますか？
- 戻せません。SVGは線や図形の指示、PNGは画素の集まりで、後者から前者を作り直すことはこのサイトでは扱っていません。
- 指定した幅が無視されます。
- SVGに幅と高さが書かれている場合は、そちらを優先します。指定した幅で出したいときは、SVGの側の寸法の指定を外してください。
- 透明な背景のまま書き出せますか？
- 書き出す形式にPNGを選べば透明のまま残ります。JPEGでは透明を持てないため、白で塗られます。
- 書き出したPNGをアイコンに使いたいです。
- サイトのアイコンに使うなら、必要な大きさを一度に作れるfaviconを作るへ、書き出したPNGを通すと早く済みます。
プライバシー
このツールはブラウザ内だけで処理します。選んだファイルがサーバーへ送信されることはありません。