SVGをPNGに変換
SVG to PNG
SVGを好きな倍率でPNG・JPEG・WebPに描き出し、背景は透明のままにも塗りつぶしにもできます。
SVGをビットマップにするのは、置き先がベクターを受け取れないときです。SNSのカード、メール、アプリのアイコン。落とし穴は、ブラウザがSVGを孤立した状態で描くことです。リンクされた画像も、外部のスタイルシートも、ウェブフォントも読みません。だから出てくるものが、あなたのページの見た目と同じとはかぎりません。
SVG を置いてください
下にマークアップを貼り付けても構いません。
元データ
使い方
ファイルを置くか、マークアップを貼ります
本来の大きさはwidth/heightかviewBoxから読みます。推測するしかなかったときは、ページがそう書きます。
倍率を決めます
本来の大きさに掛けます。できあがるピクセル寸法をスライダーの隣に出すので、24pxのアイコンの3倍が72pxであることが、推測ではなく目に見えます。
透明にするか、背景を敷くかを選びます
JPEGにはアルファがないので、JPEGを選ぶと、黙って黒の上に合成する代わりに背景色を決めさせます。
よくある質問
文字が違う書体で出てきました
レンダラーはウェブフォントを取りに行けません。この方法でラスタライズされるSVGは、外部のものを何も読み込みません。書き出す前にエディタで文字をパスに変換してください。どこでも同じにラスタライズされなければならないSVGについての、定番の助言です。
ブラウザが描画を拒否したと表示されます
たいていはxmlns属性の欠落です。それがないSVGは、ブラウザが描くXMLではありません。あるいはマークアップの誤りか、読み込みを許されていない資源への参照です。
自分のウェブサイト用にもラスタライズすべきですか
たいていは不要です。SVGはどの密度でも鮮明ですし、PNGより小さいこともよくあります。CSSで使うなら、データURIの符号化がベクターのまま扱います。この先の何かが本当にSVGを読めないときに、ラスタライズしてください。
ここから渡せます
SVG最適化
SVG Optimiser
編集ソフトの残骸を取り除き、変換をまとめ、座標の桁を丸めて、描画結果を並べて比べます。
画像をSVGに（ベクター化）
Image to SVG
ビットマップを、写真よりロゴや線画に向いた調整でSVGのパスに起こします。
SVGパス編集
SVG Path Editor
パスデータを絶対・相対コマンドで書き換え、移動・拡大・回転・向きの反転を加え、バウンディングボックスとプレビューを表示します。
SVGエディタ・解説
SVG Editor and Explainer
SVGをプレビューの隣で編集しながら、viewBoxと拡大、変形、各パスコマンド、継承された塗り、無駄なバイト、そして<img>やデータURIやインラインで何が壊れるかを解説します。
次の一手
このツールが出したものをそのまま受け取れる道具です。
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。
画像リサイズ
Image Resizer
ピクセル・パーセント・長辺の目標値で大きさを変え、縦横比の固定と一括処理のプリセットを備えます。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
SVG最適化
SVG Optimiser
編集ソフトの残骸を取り除き、変換をまとめ、座標の桁を丸めて、描画結果を並べて比べます。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。