SVG から PNG 変換

SVG とは何か、そしてピクセルにするのがなぜ一方通行なのか

SVG は絵ではありません。絵の記述です — 形、パス、色、文字の一覧で、そのそれぞれに座標が付き、ほかの何かが読んで描くためにテキストのファイルに書き出されています。JPG や PNG はその逆で、ファイルが書かれたときに一度だけ決められたピクセルの格子です。このたった一つの違いが、このページにあるすべての背後にあります。この変換の道具があなたに尋ねなければならない一つの問い、ほかの二つの変換の道具がけっして尋ねない問いも含めてです。

• 読めるテキストです。SVG をどんなテキストエディタで開いても、形がそのまま書き出されて目の前にあります。ファイルがどの大きさだと言っているのか、そして何を指しているのかを自分で確かめられるのも、そのためです。
• 解像度というものがまったくありません。同じファイルが、句点ほどの大きさでも鮮明なアイコンになり、壁一面の掲示でも鮮明な絵のままです。描画はどこかに保存されているのではなく、表示するものによってそのつど計算し直されるからです。
• 得意なのは平らな絵です — ロゴ、アイコン、図、グラフ、地図、写したものではなく描いたものすべてです。まるで歯が立たないのが写真で、写真には記述すべき形がなく、一ピクセルごとにファイルの一行が要ることになります。
• それをピクセルにすることがこのページの仕事で、その理由はたいてい、この形式を受け付けないどこかがあることです。アップロードの画面、古い画像編集ソフト、文書やスライドのひな形、ソーシャルの見出し画像、電子メール、印刷のサービスなどです。

PNG にすることは、選ばれた一つの大きさで描画をピクセルに固定することであり、それは一方にしか開かない扉です。形は結果の中に保存されず、ここのどの設定もそれを残さないので、あとから PNG を拡大することは、何かを描き直すのではなくそのピクセルを拡大することです。そしてこのページはベクターの形式をひとつも書きません — 絵を形に戻すことは、この作業の逆ではなく、別の答えを持つ別の問題です。ですから SVG は取っておいてください。ここでダウンロードするものは一つの用途と一つの大きさのために作られた複製で、二つ目の大きさを得る方法は、すでに手元にあるものの大きさを変えることではなく、元のファイルをもう一度変換することです。

幅と高さの欄にある大きさはどこから来たのか

ベクターには自分のピクセルがないので、何ピクセルで出てくるかを何かが決めなければならず、このページはまずファイル自身が示しているものを読むところから始めます。その数値が幅と高さの欄に入り、その横の一文があなたのファイルを名指しして、その数値がちょうど三つのうちのどこから取られたかを述べます。変換する前に読んでおく価値があります。三つは同じだけ信頼できるわけではなく、どれのつもりだったかを言えるのはあなただけだからです。

• ファイルが自身の大きさをピクセルで述べている。三つのうちで最も強い場合です。図形を書き出した誰かがどれだけの大きさであるべきかを述べており、欄はそれをそのまま繰り返しているだけです。
• ファイルが大きさを物理的な単位で述べている — インチ、センチメートル、ミリメートル、ポイント、パイカ — ので、一インチあたり九十六ピクセルとして換算されている。これはウェブがインチという語で意味しているものであって、あなたの画面を測ったものではありません。印刷のために用意された図形はよくこの形で届き、そこから出てくるピクセルの大きさは、そもそもピクセルの話ではなかった数値の忠実な換算です。
• ファイルが使える大きさをまったく述べていないので、大きさは代わりにその viewBox から測られた。これが二度見る価値のあるものです。viewBox は形が描かれている座標系であって誰かが選んだ大きさではないので、座標が零から二十四までのアイコンは、句点ほどの大きさの絵になりたいと言ってくることになります。アイコンの一式は幅と高さがパーセントで書かれていることもよくあり、それはこのファイルが持っていない何かの大きさなので、大きさなしとして読まれ、やはりここに来ます。

三つのどれが答えたにせよ、数値は読まれたその瞬間に一度だけ整数のピクセルに丸められます。キャンバスは整数のピクセルで確保され、端数を置く場所がないからです。それが特に効いてくることが一つあります。ほかのすべては、その裏にある端数ではなく、あなたが見ている丸められた数値から計算されるので、幅が三十一ピクセルと表示されている図形の二倍は六十二ピクセルであって、二度目の丸めが生む六十三ピクセルではありません。画面の上の大きさと計算が使う大きさは同じ大きさで、欄が述べたとおりのものを意味する配置はそれだけです。

必要な大きさを選ぶ — そして何も述べない図形

ファイルが示す大きさはあくまで出発点でしかなく、押しつけられるものではなく差し出されるものです。二つの欄まわりのすべては、ふつうの場合には何も考えずに済み、厳密な場合にはそれでも手が届くように並べられています。それがこのページと二つの兄弟のページとの違いのすべてです — 写真はすでにその大きさで変換され、決めることは何もありません。

• 幅を入れれば高さが従い、高さを入れれば幅が従うので、あなたが何も計算しなくても図形は比を保ちます。それが既定なのは、うっかりロゴをゆがめてしまうことこそ、できないようにしておく価値のある間違いだからです。
• 正確な枠が本当に必要なとき — 帯の枠、大きさの決まった顔写真、アイコンを並べた一枚 — は「縦横比を保つ」のチェックを外してください。二つの欄は互いに縛られなくなります。図形は求められたとおりに引き伸ばされます。それがあなたの望みですし、だからこそそれは既定ではなく意識して行う操作なのです。
• 倍率の並びは、人が実際に欲しがる大きさへの近道で、そのどれもが、そのときに欄に入っている数値ではなく、ファイルが述べている大きさに対して計られます。ですから同じ倍率を二度押しても同じ答えが二度返り、頼んでもいない大きさへ積み重なっていくことはありません。
• 答えのない倍率は、押しても何も起きないボタンではなく、選べないものとして示されます。もともと巨大な図形をさらに掛ければ、どの画像形式でも表せない大きさに届きうるので、黙って断る操作は、できないと見せてくれる操作より悪いのです。

そして何も述べないファイルがあります。この道具が読める幅と高さがなく、測れる viewBox もありません。聞こえるよりよくあることで、一部の編集ソフトからそのまま書き出された図形や、CSS で大きさを与えるつもりのページのために手で書かれた図形がそうです。そこには本当に大きさがないので、欄は空のまま開き、数値がどこから来たかの一文も現れず、掛けるものも保つ比もなく、並びは断ってあなたに幅と高さを尋ねます。その拒みは失敗ではなく要点です。そうしたファイルを渡されたブラウザは、誰も選んでいない小さな決まった枠に落ち着くので、一度尋ねられるほうが、それをダウンロードしてあとから気づくよりよいのです。

大きさになっていない組み合わせは、それ自身の言葉で断られます。それが同じ気遣いのもう半分です。零、負の数、半ピクセル、どの画像形式でも表せないほど大きな数は、丸められたり、切り詰められたり、黙ってファイル自身の大きさに置き換えられたりせず、それぞれ断られます — 誰も頼んでいない大きさでの変換こそ、このページが行わないために存在しているものです。そして選んだものが図形ではなく写真であれば、大きさの欄はそもそも現れません。ラスターの画像は自身の縦横の大きさで変換され、何も変えられない操作は操作がないより悪いからです。

どの形式に描き出すか

このページが PNG で開くのは、ほとんどすべてのベクターにとってそれが正しい答えだからで、ほかの形式は別のページの向こうではなく一度の操作の先にあります。あなたが選んでいるのは、ピクセルをそのまま正確に保存する形式と、その一部を引き換えにして小さなファイルにする二つの形式のあいだです。そして図形の場合、証拠は際立って一方に偏っています。平らな色と硬い縁は、まさに非可逆な圧縮が最も苦手とする中身だからです。

• PNG は既定であり、たいていはそこで話が終わります。描き出された図形をそのまま正確に保存し、透明を運び、同じ色の平らな面をきわめてよく詰めます — ロゴやアイコンはおおむねそれでできているので、ファイルはこの形式の評判から思われるより小さくなることがよくあります。
• JPG は、渡す先がそれでなければ困ると言うときにだけ選ぶ価値があります。透明をまったく保存できないので、まず図形の後ろに背景の色を塗らなければならず、その圧縮は、ベクターを描き出してまで保ちたかったまさにその鮮明な縁と文字に沿って、灰色のふちを置きます。
• WebP はウェブのページのための中間の答えです。透明を運び、たいてい PNG より小さくなります。ここではどの画質の設定でも非可逆で、つまみの一番上も同じなので、ページに載せる絵にはよい選び方であり、また編集するつもりの原本には向きません。
• 三つのどれもベクターではなく、このページはベクターの形式を書きません。拡大縮小できるファイルが必要なら、すでに手元にある SVG がそれです — 取っておいて、ここでダウンロードするものは一つの場所のために作られた複製として扱ってください。

画質のつまみは、引き換えに渡せるものがある二つの形式、つまり JPG と WebP のときだけ現れます。PNG は何も捨てないので、置かれているだけで何もしないつまみを出すのではなく、何も出しません。各行が出てきたファイルの大きさを示すので、あなたが結んでいる取引は目の前の数字になります。そのつまみを動かすと、できるところでは図形をもう一度描き出すのではなく、すでに描かれた絵を符号化し直します。一方、大きさを変えるほうは描き直すほかありません — それが正しい向きです。本当に違うピクセルを生むのは後者だからです。

描き出しが持ち越せないもの

ここで行われることはすべて、ブラウザにもとから組み込まれている絵を描くしくみで行われます。ファイルは絵として渡され、選ばれた大きさで一度描かれ、求められた形式で書き戻されます。それが、何もアップロードせず、何もインストールせず、ページ自体のほかには何もダウンロードせずにこの道具が働ける理由です。そしてベクターの場合には、結果に何が入りうるかもそれが決めます。SVG はピクセルの塊ではなく文書であり、文書は何かを求めることができるからです。

ここでの渡され方では、それは求めたものを得られません。ファイルの中の何も走らず、ファイルの外の何も取得されません。これは意図された性質であり、本当に価値のあるものです。SVG はスクリプトを運ぶことができ、描画が表示された瞬間に要求されるどこかの住所への参照を運ぶこともできます。見知らぬ相手の図形をここで開いても、そのどちらも起きません。その安全が何を犠牲にしているかは下に書き出してあり、そのうち初めの二つは、あなたが気づくのを待たずに行の上で告げられます。

• ファイルが自身の外を指しているものは読み込まれません — 参照された画像、スタイルシート、フォントです。これはウェブ上の住所についても、同じフォルダーに置かれたファイルについても等しく本当のことで、後者のほうがはるかによくある場合です。だから知らせは、それらが遠くにあったと言うのではなく、その部分が読み込まれないと言います。それらが担っていたものは結果から欠け、直し方は、それらを図形の中に埋め込んでもう一度変換することです。
• 文字はこの端末にインストールされたフォントで描かれます。字は結果の中にあり、あなたには正しく見えますが、同じファイルを別の計算機で描き出すと、違う書体が選ばれて違う絵になることがあります。字の形そのものが大事なら、そのファイルを描いたソフトで文字をパスに変換してください。そうすれば何も参照されなくなります。
• 図形が時間とともに行うことは結果に入りません。出力はどの形式でも一枚の静止した絵なので、自分でアニメーションするファイルは描かれたその一瞬だけを渡し、対話的なものもこの道のりを生き延びません。

出力についての二つの上限は、あとから見つけられるより、はっきり述べておく価値があります。PNG はブラウザ自身の圧縮器が書いており、それはまずまずではあっても徹底的ではないので、専用の最適化の道具なら一ピクセルも変えずにファイルからもう一部を削れます。そして WebP はどの設定でも非可逆の符号化です。ブラウザにこの形式の可逆モードを求める手立てがまったくないからです。どちらも、本物の符号化器をページの中で動くように同梱すれば持ち上げられますが、この道具はあえてそうしません。それは数百キロバイトあり、その一部の人が少しだけ小さいファイルを得るために、訪れる人すべてがそれをダウンロードすることになります。ほかのどのページも表示された瞬間から働くサイトでです。しかもこのページに限っては、見かけより買えるものが少ないのです。描き出しはあなたのベクターをブラウザ自身が描いたものであり、符号化器はそれがどう描かれたかを変えられません。

各行があなたの図形について伝えること、そして断るとき

黙って働く変換の道具こそ、誰かが黒い背景のロゴを手にしたり、指していた絵が欠けたままの図形を手にしたりして、何日もあとに別の場所でそれに気づくもとです。ここでの各行は、そのファイルに実際に何が行われたかの短い記述を伴います — そして特筆すべきことが何も起きなければ何も伴いません。それがこの知らせを立ち止まって読む価値のあるものに保っています。ベクターが出会う一組は写真のものとは違い、この道具の知らせのうち三つはベクターにはまったく当てはまりません。図形には落とすカメラの情報がなく、どちらが上かを告げるものもなく、失うフレームもないからです。

• 図形が指しているものが読み込まれません。ファイルの中にない画像、スタイルシート、フォントを参照しているファイルに現れます。住所によるものでも、その横に置かれた道筋によるものでも同じで、一部が欠けたまま出てきた結果の説明になります。
• この端末のフォントで文字が描かれました。図形が本当にキャンバスの上に字を置いている場合にだけ現れるので、中身のない文字の要素があるだけのファイルは何も言わず、文字がまったくない図形も何も言いません。
• 透明が塗りつぶされ、どの色に塗られたか。JPG への変換は図形の後ろに何かを置かなければならず、一覧の中のファイルが本当にそれを必要としたとたんに色の設定が現れます。この知らせは仮定ではなく測られています。描かれた絵の中に本当に透けるピクセルが見つかるまで待つので、自身の絵柄が画面いっぱいを覆う図形は、JPG に変換してもそれについて何も言いません。
• 名前と中身が食い違っています。形式はファイルの中身から決まり、拡張子ではけっして決まらないので、誰かが違う末尾を付けて保存した図形も、それが実際にそうである SVG として正しく読まれ変換されます — そしてそのことは伝えられます。あなたのファイルについての、おそらく知らなかった本当のことだからです。
• この設定でも WebP は非可逆です。図形をピクセルにしたうえで画質のつまみの最上端を求めると、描かれたものがそのまま返ってくるはずだという気がしますが、そうはなりません。この知らせが正そうとしているのはその思い込みで、だからそこに現れ、それより下のどの位置にも現れません。

ファイルをまったく変換できないところでは、道具は何かを作り出す代わりに理由を述べます。読める形式のどれでもないファイルは名指しで断られ、対応している形式ではあるがその始まりを読み取れないファイルも同じです — 図形にとってそれは開始のタグで、ベクターがヘッダーの代わりに持っている唯一のものです。ウェブのページの中のどこかに図形があるものは画像のファイルではないのでそのように断られ、外から見たかぎりは健全に見えたのにあなたのブラウザが描けないと分かった図形も同じです。何も推測されず、半端に済んだものが仕上がったかのように返されることもありません。

ここで出会う見込みがいちばん高い断りは大きさについてのもので、それはあなたのファイルについての事実ではなくこのページについての事実です。倍率はひと押しの距離にあり、図形はどんな大きさを求められても平気で、ベクトルの側にあなたを止めるものはありません。止めるのはブラウザで、絵を保持できる面積には限りがあります。その面積は携帯電話とデスクトップとで違い、同じ機械の上の二つのブラウザでもまた違います。そこを越えても誤りはまったく出ず、出るのは数キロバイトの空の画像だけで、開かれるまでは仕上がった変換に見えます。ですからこの道具は、形をひとつも描かないうちに、求められた大きさの絵へ既知のピクセルを書き込み、すぐさま読み返します。返ってこなければ、大きさを含んだ断りが渡され、ファイルは渡されません。どこでも固定の数値と比べてはいないので、あなたが行き当たる上限はあなた自身の端末のものであって、他人のために選ばれたものではけっしてありません。

なぜあなたの図形はこのタブを出ていかないのか

図形は写真よりも多くを明かします。図形はテキストのファイルであり、読めてしまうからです。レイヤーの名前、書き出した人の名前、誰かが中に残した注記、指していた部品ひとつひとつの住所 — そのすべてがファイルの中に書き出されていて、そのどれもどこへも行きません。あなたの SVG を読むのはこのブラウザのタブで、ピクセルにするのはあなた自身の機械のプロセッサです。このページの向こう端に、そういうファイルを受け取れるサーバーはありません。ですからこれは、この道具が何でできているかの説明であって、どう運用されているかの約束ではありません。

ブラウザの開発者ツールのネットワークのパネルで数秒あれば決着がつきますし、図形の場合に見るべきものはひとつではなくふたつです。あなたのファイルを運んで出ていくものはなく、ファイルの代わりに出ていくものもありません。中にいくつ住所が書かれていようと同じです。読み込まれたあとのページは、ほかのどこでも動いていない静的なファイルの寄せ集めなので、ネットワークをすっかり切り離して好きなだけピクセルにし続けられます。

• 見知らぬ相手には送らない図形 — まだ発表していないロゴ、間取り図、社内の何かを描いた図 — も、機械から出さないままここで描き出せます。
• ピクセルにして出てきたものは、あなたが保存するまでこのタブに置かれていて、タブを閉じることがその削除のすべてです。持ち込んだ図形も、そこから作られた絵も、訪問をまたいで覚えられることはありません。
• すっかりは信用しきれないどこかから届いた図形も、ここで開くのは安全です。その中の何も走らず、それが指しているものも取得されないからです。描き出すことはそれを剥ぎ取る方法でもあります。ダウンロードするものはピクセルであり、ピクセルは何も求められません。