1 SVGファイルを選ぶ
2 どの大きさにするかを決める
ベクターが代わりに答えてくれない唯一の問いが、これです。SVGの中にピクセルはありません。あるのは描くための指示だけで、どんな大きさを指定されても、そのとおりに描きます。下の数値は、写真のように押し返してくる限界ではありません。24ピクセルのアイコンから作った4000ピクセルは、24のときとまったく同じだけ鮮明です。
リスト上のどのファイルも自分のサイズから掛け算されるので、違う大きさで描かれたアイコンの一式でも、互いの比率が保たれます。
高さは図の形から決まります。
幅は図の形から決まります。
長いほうの辺がこの値になり、もう一方はそれに従います。横長のロゴと縦長のロゴが、長辺で同じ大きさに揃います。
3 形式を選ぶ
画質（90） JPEGとWebPだけに効きます。PNGは可逆なので画質のつまみがありません。平坦な色とくっきりした縁は、非可逆のエンコーダーがいちばん苦手とするものです。SVGのほとんどはそれでできているので、ここでは写真の場合より高い値にしてあります。
4 見てから保存する
プレビューは、ファイルを書き出すのと同じコードが、選んだファイルから、この端末で描いたものです。確かめる価値があるのは、図がピクセルになるときに変わる2点です。幅が半ピクセルだった髪の毛のような線が灰色になっていないか。そして文字が、ウェブから取ってきたのではなく、この端末にあるフォントで描かれていないか。
SVGを追加すると、ここに出ます。
できました
# SVGを画像に｜ベクターを好きなサイズでPNG・JPEG・WebPに サイズを指定するだけ。ベクターには、失うサイズがそもそもありません。 > SVGを好きなサイズのPNG・JPEG・WebPにブラウザの中で変換します。幅、倍率、枠のいずれかを指定でき、@2xと@3xも一緒に作れます。透過はそのまま、アップロードはありません。 これはhttps://abox.tools/ja/svg-to-image/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。 ## SVGファイルは**ブラウザー内で処理**されます。処理のためのアップロードはありません。 描画するのは、いまその絵を画面に出したのと同じエンジンです。ファイルをディスクから読み出し、そのルートタグを、誰でも読める`src/svg.js`の100行ほどが指定サイズに書き換え、ブラウザにすでに入っているキャンバスに描きます。このツールにはネットワーク機能が一切ありません。取りに行く先も、送る先もありません。仮に送ろうとしても、このページの向こう側にロゴを受け取るサーバーが存在しません。 - ✗ アップロードなし - ✗ 登録なし - ✗ 透かしなし - ✓ オフラインで動作 - ✓ ソース公開 ## SVGをアップロードせずにPNGに変換する手順 1. **SVGを選びます。** 選択欄にドロップするか、フォルダごと選んでまとめて変換してください。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。各行には、そのファイルが自分を何ピクセルだと思っているのかが表示されます。そのサイズが`viewBox`から来た場合や、ファイルが何も宣言していないので仮定した場合には、そう書き分けます。 2. **大きさを指定します。** ファイル自身のサイズに対する倍率がいちばん手早く、まとめて処理する場合の正解です。どの図もそれぞれの出発点から拡大されるので、アイコン一式なら比率が保たれます。そうでなければ、幅、高さ、長辺、あるいは両辺を指定した枠で決めてください。ここでは大きな数値を指定しても、写真のような代償はありません。図はその大きさで描き直されるのであって、引き伸ばされるのではないからです。 3. **必要なら高DPI用の複製も作ります。** スマホやRetinaのノートPCは、CSSの1ピクセルに対して2から3の実ピクセルを描くので、200ピクセルのロゴには400または600ピクセルのファイルが必要です。`@2x`と`@3x`を指定すれば、XcodeもAndroidのツールもCSSの`image-set()`も期待する名前で出てきます。しかもそれぞれ、別々に丸められるのではなく、最初のものの正確に2倍・3倍です。 4. **形式を選び、透過をどうするかを決めます。** 理由がなければPNGです。可逆で、透過を保ち、平坦な色がよく圧縮されます。JPEGには透過がまったくないので、選んでも選ばなくても背景色が塗られます。それがなければ、透過だったピクセルはすべて黒くなってしまいます。WebPは両方に対応し、ファイルも小さくなりますが、それを読めないほど古いソフトが代償です。 5. **ダウンロードの前にプレビューを見てください。** プレビューは、ファイルを書き出すのと同じコードが、同じファイルから、手元の端末で描いたものです。図がピクセルになるときに変わるものは2つあり、どちらもここに現れます。幅が半ピクセルだった髪の毛のような線は灰色になり、文字はウェブから取ってきたのではなく、このコンピューターにあるフォントで描かれます。 6. **ファイルを受け取ります。** 1ファイルにつき1つのダウンロード、またはまとめて1つのzipです。名前は元のSVGに従い、複製には`@2x`や`@3x`が付きます。同じ名前になってしまう2つのファイルは、一方が黙って他方を置き換えるのではなく、番号が付きます。 ## 詳しい解説 [SVGを適切な大きさのPNGに変換する方法](https://abox.tools/ja/guides/convert-an-svg-to-png/): ベクターには固有のピクセルサイズがないので、数値はこちらで決めます。画面、アプリのアイコン、印刷機のそれぞれでその数値がどこから来るのか、そして図がピクセルになるとき何が変わるのか。 ## 箱の中のほかのツール - [画像→SVG変換ツール](https://abox.tools/ja/image-to-svg/): ひとつの形に、ひとつの輪郭。あってはいけないものを指さすだけです。 - [身長比較チャート](https://abox.tools/ja/compare-heights/): 身長を打ち込めば、絵が持ち帰れます。描くために何かを送ることはありません。 - [ビジネスプロフィールのプレビュー](https://abox.tools/ja/business-profile-preview/): 入力するとGoogleのカードの見本になります。描くための送信はありません。 - [画像圧縮ツール](https://abox.tools/ja/compress-image/): サイズを指定するだけ。あとは自動で探します。 ## よくある質問 ### SVGはどこかにアップロードされますか？ されません。ファイルを読むのはお使いのブラウザで、読む場所は手元のハードウェアの上です。ほかのすべての画像を描くのと同じエンジンがキャンバスに描き、そのままダウンロードとして返します。このツールにはネットワーク機能が一切なく、何も取りに行かず、何も送りません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。 ### SVGはどの大きさで書き出すべきですか？ それを読む相手が求める値に、表示される画面のデバイスピクセル比を掛けたものです。CSSで200ピクセルを占めるロゴなら、RetinaのノートPCには400、最近のスマホには600が必要で、それがここでいう`@2x`と`@3x`です。アプリのアイコンやストアの掲載画像なら、ストアが正確な数値を指定しており、それがその数値です。何も指定されていない場合は、長辺1024が便利な初期値です。たいていの用途に十分大きく、メールで送れる程度には小さいからです。 ### 大きくすると画質は落ちますか？ 落ちません。そしてここは、その答えが正直に「落ちません」になる唯一の場所です。ベクターはピクセルではなく指示なので、ブラウザは求められた大きさで曲線を描き直します。24ピクセルのアイコンから作った4000ピクセルは、24のときとまったく同じだけ鮮明です。できないのは逆向きです。いったんPNGになればほかと同じくピクセルなので、あとから結果をリサイズするのではなく、必要な大きさで書き出してください。 ### SVGにwidthもheightもありません。どの大きさになりますか？ `viewBox`があれば、それです。その幅と高さはピクセルではなくユーザー単位ですが、ファイルの中にある唯一の数値であり、ブラウザはそれを図の自然な大きさとして扱います。viewBoxもない場合は、行の横に*仮定*と表示し、300 × 150を使います。`<img>`が描いたであろう大きさです。いずれの場合も、ほしい大きさを指定すれば、その大きさで描かれます。 ### PNGにすると文字の見た目が変わるのはなぜですか？ フォントがSVGの中にないからです。文字を描くSVGはフォント名を指定し、探すのは端末に任せます。`@import`でGoogle Fontsから取ってくるファイルは、ここでは何も得られません。`<img>`を通して描かれるSVGは、何も取りに行くことを許されないからです。これは、そのファイルが手元の情報を外部へ送ることを止めているのと同じ規則です。直し方はどのデザイナーもすでに知っているもので、書き出す前に、作図ソフトで文字をパスに変換することです。そうすれば図形になり、どこでも同じに見えます。 ### 複数のファイルを一度に変換できますか？ できます。リスト上のどのSVGも同じ設定で描かれ、まとめて1つのzipで届きます。まとめて処理する場合は、たいてい倍率、つまり「ファイルが求めるサイズの4倍」が正しい設定です。すべてを同じピクセル数に押し込めるのではなく、それぞれが自分のサイズから拡大されるからです。行をクリックすれば、その1つをプレビューに出せます。 ### サイズの上限はありますか？ 当サイトのではなく、ブラウザの上限があります。キャンバスは一辺16,384ピクセルを少し超えたあたりで音を上げ、iPhoneやiPadのSafariは面積およそ1670万ピクセル、つまり4096 × 4096で止まります。それを超えると、真っ白な画像を返すのではなく警告します。ブラウザは行き詰まると`toBlob`が何も返さず、しかも説明するエラーも出さないからです。1億ピクセルを超えると、このツールは拒みます。1バイトも書き出さないうちに、キャンバスだけで400 MBになるからです。 ### 透過はどうなりますか？ PNGとWebPでは保たれます。JPEGにはアルファチャンネルがまったくないので、指示の有無にかかわらず画像全体の後ろに色が塗られます。それがなければ透過部分がすべて黒くなり、JPEGの仕様ではなく不具合のように見えるからです。PNGで背景色を指定するのも、まったくふつうの要望です。図をその色に合成して、穴を残さないようにします。 ### スクリプトや外部画像を含むSVGも読めますか？ 読めますし、ブラウザが描く気のある部分だけを正確に描きます。`<img>`から読み込まれたSVGは*secure static mode*にあります。スクリプトは走らず、外部参照は取得されず、アニメーションも再生されません。得られるのは最初のフレームです。ですから外部の`<image>`を含むファイルは、その部分が欠けた状態で出てきます。それはブラウザが代わりに拒んでいるということであり、このページが見たこともないファイルを安全に開ける理由です。 ### 画像リサイズツールとは何が違いますか？ 出発点です。画像リサイズツールはピクセル、つまりJPEGやPNGから始まるので、大きくするにはそもそもなかった細部を発明しなければなりません。こちらは図から始まるので、発明するものがなく、気にすべき上限もありません。手元にあるのがSVGならこちらが鮮明な結果をくれますし、写真ならあちらです。 ### 無料ですか。アカウントは必要ですか？ 無料です。アカウントも、ログインも、試用期間も、透かしもありません。ファイルの数にもサイズにも制限はありません。その費用を払うサーバーが存在せず、処理が手元の端末で起きているからです。このサイトには広告があり、それが費用を賄っています。広告にファイルの情報が渡されることはありません。 ### オフラインでも動きますか？ 動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。描画のために図版をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。 ## この主張を確かめる方法 - **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。 - **何かを取りに行くコードがありません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。描画処理の全体は、選んだファイルのblobを抱えた`<img>`、キャンバスへの`drawImage`ひとつ、そして`canvas.toBlob`ひとつです。 - **SVGは文書であり、これはそれが何もできないモードです。** SVGは`<script>`、外部の`<image href="https://…">`、スタイルシート、ウェブフォントを抱えられます。`<img>`を通して描かれると、仕様が*secure static mode*と呼ぶ状態に入り、スクリプトは走らず、それらのアドレスはひとつも取得されません。これは当サイトの約束ではなくブラウザの保証で、このページが見たこともないファイルを、そのファイルに外部へ連絡させることなく開ける理由です。 - **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから来ています。そのどれにも、図版に関する情報は渡されません。ファイルを読み、サイズを決め、描くコードはすべてこのオリジンから配信され、リポジトリに載っています。 - **オフラインで動きます。** 通信を切ってもこのツールは何も変わりません。もともと通信する段階が存在しないからです。これがいちばん単純な証明です。 **自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、ファイル自身のサイズをどう読み、ルートタグをどう書き換えるかについては`src/svg.js`、実際に描画している8行については`src/render.js`です。<img>と`drawImage`と`toBlob`だけで、間には何もありません。
SVGをアップロードせずにPNGに変換する手順
- SVGを選びます。選択欄にドロップするか、フォルダごと選んでまとめて変換してください。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。各行には、そのファイルが自分を何ピクセルだと思っているのかが表示されます。そのサイズが
viewBoxから来た場合や、ファイルが何も宣言していないので仮定した場合には、そう書き分けます。 - 大きさを指定します。ファイル自身のサイズに対する倍率がいちばん手早く、まとめて処理する場合の正解です。どの図もそれぞれの出発点から拡大されるので、アイコン一式なら比率が保たれます。そうでなければ、幅、高さ、長辺、あるいは両辺を指定した枠で決めてください。ここでは大きな数値を指定しても、写真のような代償はありません。図はその大きさで描き直されるのであって、引き伸ばされるのではないからです。
- 必要なら高DPI用の複製も作ります。スマホやRetinaのノートPCは、CSSの1ピクセルに対して2から3の実ピクセルを描くので、200ピクセルのロゴには400または600ピクセルのファイルが必要です。
@2xと@3xを指定すれば、XcodeもAndroidのツールもCSSのimage-set()も期待する名前で出てきます。しかもそれぞれ、別々に丸められるのではなく、最初のものの正確に2倍・3倍です。 - 形式を選び、透過をどうするかを決めます。理由がなければPNGです。可逆で、透過を保ち、平坦な色がよく圧縮されます。JPEGには透過がまったくないので、選んでも選ばなくても背景色が塗られます。それがなければ、透過だったピクセルはすべて黒くなってしまいます。WebPは両方に対応し、ファイルも小さくなりますが、それを読めないほど古いソフトが代償です。
- ダウンロードの前にプレビューを見てください。プレビューは、ファイルを書き出すのと同じコードが、同じファイルから、手元の端末で描いたものです。図がピクセルになるときに変わるものは2つあり、どちらもここに現れます。幅が半ピクセルだった髪の毛のような線は灰色になり、文字はウェブから取ってきたのではなく、このコンピューターにあるフォントで描かれます。
- ファイルを受け取ります。1ファイルにつき1つのダウンロード、またはまとめて1つのzipです。名前は元のSVGに従い、複製には
@2xや@3xが付きます。同じ名前になってしまう2つのファイルは、一方が黙って他方を置き換えるのではなく、番号が付きます。
詳しい解説
SVGを適切な大きさのPNGに変換する方法 ベクターには固有のピクセルサイズがないので、数値はこちらで決めます。画面、アプリのアイコン、印刷機のそれぞれでその数値がどこから来るのか、そして図がピクセルになるとき何が変わるのか。
箱の中のほかのツール
よくある質問
SVGはどこかにアップロードされますか？
されません。ファイルを読むのはお使いのブラウザで、読む場所は手元のハードウェアの上です。ほかのすべての画像を描くのと同じエンジンがキャンバスに描き、そのままダウンロードとして返します。このツールにはネットワーク機能が一切なく、何も取りに行かず、何も送りません。ページのContent-Security-Policyには接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。
SVGはどの大きさで書き出すべきですか？
それを読む相手が求める値に、表示される画面のデバイスピクセル比を掛けたものです。CSSで200ピクセルを占めるロゴなら、RetinaのノートPCには400、最近のスマホには600が必要で、それがここでいう@2xと@3xです。アプリのアイコンやストアの掲載画像なら、ストアが正確な数値を指定しており、それがその数値です。何も指定されていない場合は、長辺1024が便利な初期値です。たいていの用途に十分大きく、メールで送れる程度には小さいからです。
大きくすると画質は落ちますか？
落ちません。そしてここは、その答えが正直に「落ちません」になる唯一の場所です。ベクターはピクセルではなく指示なので、ブラウザは求められた大きさで曲線を描き直します。24ピクセルのアイコンから作った4000ピクセルは、24のときとまったく同じだけ鮮明です。できないのは逆向きです。いったんPNGになればほかと同じくピクセルなので、あとから結果をリサイズするのではなく、必要な大きさで書き出してください。
SVGにwidthもheightもありません。どの大きさになりますか？
viewBoxがあれば、それです。その幅と高さはピクセルではなくユーザー単位ですが、ファイルの中にある唯一の数値であり、ブラウザはそれを図の自然な大きさとして扱います。viewBoxもない場合は、行の横に仮定と表示し、300 × 150を使います。<img>が描いたであろう大きさです。いずれの場合も、ほしい大きさを指定すれば、その大きさで描かれます。
PNGにすると文字の見た目が変わるのはなぜですか？
フォントがSVGの中にないからです。文字を描くSVGはフォント名を指定し、探すのは端末に任せます。@importでGoogle Fontsから取ってくるファイルは、ここでは何も得られません。<img>を通して描かれるSVGは、何も取りに行くことを許されないからです。これは、そのファイルが手元の情報を外部へ送ることを止めているのと同じ規則です。直し方はどのデザイナーもすでに知っているもので、書き出す前に、作図ソフトで文字をパスに変換することです。そうすれば図形になり、どこでも同じに見えます。
複数のファイルを一度に変換できますか？
できます。リスト上のどのSVGも同じ設定で描かれ、まとめて1つのzipで届きます。まとめて処理する場合は、たいてい倍率、つまり「ファイルが求めるサイズの4倍」が正しい設定です。すべてを同じピクセル数に押し込めるのではなく、それぞれが自分のサイズから拡大されるからです。行をクリックすれば、その1つをプレビューに出せます。
サイズの上限はありますか？
当サイトのではなく、ブラウザの上限があります。キャンバスは一辺16,384ピクセルを少し超えたあたりで音を上げ、iPhoneやiPadのSafariは面積およそ1670万ピクセル、つまり4096 × 4096で止まります。それを超えると、真っ白な画像を返すのではなく警告します。ブラウザは行き詰まるとtoBlobが何も返さず、しかも説明するエラーも出さないからです。1億ピクセルを超えると、このツールは拒みます。1バイトも書き出さないうちに、キャンバスだけで400 MBになるからです。
透過はどうなりますか？
PNGとWebPでは保たれます。JPEGにはアルファチャンネルがまったくないので、指示の有無にかかわらず画像全体の後ろに色が塗られます。それがなければ透過部分がすべて黒くなり、JPEGの仕様ではなく不具合のように見えるからです。PNGで背景色を指定するのも、まったくふつうの要望です。図をその色に合成して、穴を残さないようにします。
スクリプトや外部画像を含むSVGも読めますか？
読めますし、ブラウザが描く気のある部分だけを正確に描きます。<img>から読み込まれたSVGはsecure static modeにあります。スクリプトは走らず、外部参照は取得されず、アニメーションも再生されません。得られるのは最初のフレームです。ですから外部の<image>を含むファイルは、その部分が欠けた状態で出てきます。それはブラウザが代わりに拒んでいるということであり、このページが見たこともないファイルを安全に開ける理由です。
画像リサイズツールとは何が違いますか？
出発点です。画像リサイズツールはピクセル、つまりJPEGやPNGから始まるので、大きくするにはそもそもなかった細部を発明しなければなりません。こちらは図から始まるので、発明するものがなく、気にすべき上限もありません。手元にあるのがSVGならこちらが鮮明な結果をくれますし、写真ならあちらです。
無料ですか。アカウントは必要ですか？
無料です。アカウントも、ログインも、試用期間も、透かしもありません。ファイルの数にもサイズにも制限はありません。その費用を払うサーバーが存在せず、処理が手元の端末で起きているからです。このサイトには広告があり、それが費用を賄っています。広告にファイルの情報が渡されることはありません。
オフラインでも動きますか？
動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。描画のために図版をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。