SVG から ICO への変換 Scalable Vector Graphics ↔ Icon 無料 オンライン 安全
SVG は絵ではなく、絵の描き方です。ここではその手順を一度だけ実行し、選んだ大きさで ICO として保存します。描画はファイル内の何も実行できない砂場の中で行われ、どこにもアップロードされません。
ファイルを変換する
ここに SVG をドロップするか、選んでください。
ファイルはこの端末から出ません。すべてブラウザー内で動きます。
アップロードなし
ベクトルは何が違うのか
SVGは絵ではありません。絵を描くための指図の束です。ここに半径これこれの円、ここからそこへ一本の線、この形をあの色で塗る。二〇〇一年に網の標準となり、結果ではなく図そのものを蓄えるので、十六画素の図記号を描くのと同じファイルから看板を刷ることができます。PNGやJPEGが蓄えるのは逆のもの、すなわち色のついた点の出来上がった格子であって、それを何が描いたかの記憶はありません。この非対称がこの頁のすべてを決めます。ベクトルからラスターへ行くのは、選んだ大きさで指図を描くだけのこと。逆向きに行くのは「なぞり」です。点の格子を眺めて、どんな形がそれを生んだのかを当てるのです。
どこで出会うか
社章、図記号、地図、図解、図表はSVGとして生きています。どの大きさでも読めねばならず、色を変えたくなることも多いからです。見出し図や応用の図記号もここから作られます。逆向きが要るのは、ベクトルが平たい画像にならねばならない瞬間です。SVGを映さない郵便の道具、社交網の下見、あなたより古い道具を使う人が刷る文書、写真しか受け取らない投稿の用紙。
よくある質問
写真をなぞらせたら、ひどい結果になりました。なぜですか。
なぞりはそもそも写真のために作られていないからです。似た色の領域を見つけ、その一つ一つの周りに輪郭を引く——これは平塗りの図、社章、型紙、線画には合いますが、写真では破綻します。写真ではどの領域も隣へ少しずつ溶け込んでいくからです。なぞる側は、ありもしない境を作り出さねばならず、結果は刷り物のような平らな斑か、何万もの小さな形を抱えたファイルのどちらかになります。写真ならラスターのままでいてください。
私のSVGが別の道具では違って見えるのはなぜですか。
たいていは書体です。文字を含むSVGは書体を名前で呼び、開く機械がそれを持っていることを当てにします。持っていなければ別のものが当てられ、配置がずれます。処方は、書き出す前に文字を輪郭へ変えることです。一字一字が形になり、ファイルはどこでも同じに見えます。引き換えに、文字はもう直せず、選べもしません。濾し器や混ぜ方といった進んだ効果が、食い違いのもう一つのありふれた源です。
ファイルの質は落ちますか。
二つの形式が何を収められるかによります。同じものを保つ形式どうしの変換——PNGからBMP、WAVからFLAC——では何も失われません。場所を節約するために情報を捨てる形式、たとえばJPEGやMP3への変換では、そのたびに少しずつ失われ、戻しても返ってはきません。選べる場合、このページは最小のファイルを作ることより、もとの質を保つほうに傾きます。
私のファイルはどこかへ送られますか。
いいえ。変換はあなたの機械の上、あなたの閲覧ソフトの中で行われます。ファイルはそこを離れませんし、ここには受け取りうる計算機もありません。大きなファイルを縛るのが送信ではなくあなた自身の記憶装置であるのも、あなたが変換したものが誰の記録にも——私たちの記録にも——現れえないのも、そのためです。ただし音と映像の道具は、初めて使うときにこの場所から変換の機関を取り寄せます。三十メガバイトほど、一度だけです。そのあとも仕事はすべてあなたの機械の上で行われます。
SVG を ICO に変換する理由
ICO ファイルはアイコンです。ブラウザーのタブにページ名の隣で表示される小さな絵であり、ブックマークの一覧、ショートカット、Windows のプログラムのウィンドウの隅に表示されるものです。ウェブサイトを運営しているなら、自分のマークを載せたものがほしいでしょう。プログラムを作っているなら、その実行ファイル用のものが必要です。そしてロゴがあるなら、それは SVG 形式のベクター画像である可能性が非常に高いです。だから人は SVG を ICO に変換します。マークの絵は持っていて、ブラウザーやオペレーティングシステムが今も名指しで求めるアイコンファイルが必要なのです。
SVG は絵ではありません。絵を描くための指示の集まりです。ここに円を描く、そこに曲線を描く、この形をあの色で塗る、というような。ピクセルではなく指示なので、SVG はぼやけることなくどんなサイズでも表示できます。対照的にアイコンは、一つのファイルにまとめられた、それぞれ特定のサイズ用に作られた小さな絵のひと握りです。このページは、サイズごとに一度ずつ SVG の指示に従い、その結果を一つの ICO ファイルにまとめます。
このページは SVG を ICO にお使いのブラウザー内で変換します。絵は、ファイル内の何も実行できないサンドボックスの中で描画され、何もアップロードされません。以下では、仕組み、ファイルに含まれるサイズ、小さなアイコンがなぜ特別な問題なのか、そしてそれにどう対処するかを説明します。
変換の仕組み
一つのファイルに六つのサイズ
出てくる ICO には、一つのファイルに六つのサイズが含まれます。16、32、48、64、128、256 ピクセルです。それぞれは互いに縮小されたものではなく、SVG から描き直されるので、16 ピクセル版は 16 ピクセルで指示に従ったもので、大きなものを縮めたコピーではありません。そのすべてが透明度を保ちます。オペレーティングシステムやブラウザーは、アイコンが表示される場所に合うサイズを選びます。
何も実行できないサンドボックス
SVG ファイルは原理的に、スクリプトやほかのものへの参照を含められます。それが決してリスクにならないように、絵は、ファイル内の何も実行できないサンドボックスの中で描画されます。描かれるのは形だけです。これは、完全には信頼できない場所からダウンロードしたファイルでも安全です。
縮小より描き直しが優れている理由
大きな絵を小さな絵に縮めると、細部が互いに混ざり、線が灰色になります。目標のサイズでベクターの指示から描き直すと、線が直接ピクセルの格子に置かれるので、各サイズが持ちうる最もシャープな結果が得られます。
保たれるもの
六つのサイズ
16、32、48、64、128、256 ピクセルが得られ、これはアイコンが通常表示される場所をカバーします。ブラウザーのタブ、タスクバー、デスクトップのショートカット、ファイルの一覧、大きなプレビューです。
透明度
透明度は六つのサイズすべてで保たれます。SVG の塗りのない部分は ICO でも透けたままなので、アイコンはその後ろにあるものの色を帯びます。
マークの形
絵は、その色と形のままで保たれます。SVG が正方形でなければ、引き伸ばされることなく、各アイコンの正方形に収められます。
SVG を ICO に変換する前に知っておくべきこと
アイコンは別の絵
アイコンは小さな絵ではなく、別の絵です。細い線や小さな文字があるものは、どんなに丁寧に描画しても、16 ピクセルではぐちゃぐちゃになります。ポスターではすばらしく見えるロゴが、ファビコンとしては読めないかもしれません。結果が濁って見えるなら、答えはより良い変換ではなく、より単純な SVG です。
最小のサイズを念頭にデザインする
最良のアイコンは、最小のサイズを念頭に作られます。太い形が一つ、限られた数の色、極細線なし、一文字を超える文字なし。可能なら、この目的のためにロゴの簡略版を別の SVG として用意し、それで SVG を ICO に変換してください。
ほかから来るフォントと画像は解決されない
SVG がほかから取り込むフォントと画像は、サンドボックスでは解決されません。サーバーから読み込まれるウェブフォントで組まれた文字はシステムフォントに置き換わり、ファイルの外からリンクされた画像は欠けます。最良の結果のためには、文字をアウトライン化し、画像を埋め込んでください。
ここで SVG を ICO に変換する方法
絵を追加する
SVG をページにドロップするか、端末から選んでください。それはお使いのブラウザー内で読み込まれ、アップロードされません。
変換する
ボタンを押してください。六つのサイズが次々に描かれ、少し時間がかかります。終わるまでページを開いたままにしてください。
ダウンロードしてテストする
ICO をダウンロードし、使う場所で試してください。ウェブサイトでは、ルートフォルダーに favicon.ico という名前で置くか、ページの head でリンクして、ブラウザーのタブを見てください。Windows では、ショートカットに割り当てて、さまざまなサイズでの見え方を確かめられます。
SVG と ICO を詳しく見る
ベクターと束
SVG はどんなサイズでも描画できる単一の絵です。ICO は、それぞれ固定サイズの複数の絵を中に持つコンテナーです。アイコンを表示するソフトウェアは、必要なサイズに最も近い絵を選び、ぼやけた拡大縮小を避けます。SVG を ICO に変換するとは、コンテナーが保持すると期待されるサイズで絵を描画することです。
アイコンが使われる場所
ブラウザーは、最小のサイズをタブに、大きいものをブックマークと新しいタブのページに使います。Windows はタスクバー、スタートメニュー、エクスプローラーに使います。モバイル端末にはホーム画面用の独自の画像サイズのセットがあり、通常は ICO ではなく PNG ファイルです。スマートフォンのアプリアイコンを用意しているなら、プラットフォームが求めるサイズでのSVG を PNG に変換のほうが良いルートです。
今日のファビコン
現代のブラウザーは PNG や SVG さえファビコンとして受け付けますが、ICO は、古いブラウザー、一部のフィードリーダー、favicon.ico を自動的に探すツールを含め、どこでも動く形式であり続けています。一つ持っておくのが安全な選択です。
具体的なよくある場面
ウェブサイトのファビコン
SVG を ICO に変換し、ファイルをサイトのルートに favicon.ico として保存して、リンクしてください。すべてのブラウザーのタブがあなたのマークを載せ、開いた多くのタブの中でページが見分けやすくなります。
Windows プログラムのアイコン
Windows のプログラムは、実行ファイルとショートカットにアイコンを持ちます。開発者にはこのために複数サイズの ICO が必要です。得られる六つのサイズは、通常の要件をカバーします。
ショートカットとフォルダー
Windows では、ショートカットやフォルダーに独自のアイコンを付けられます。ロゴから作った ICO は、デスクトップやプロジェクトのフォルダーを見分けやすくします。
小さな事業のサイトとブログ
ファビコンは、サイトを完成したものに感じさせる小さな細部です。ロゴが SVG なら、この変換が、サイトビルダーがアップロードを求めるファイルを作ります。
SVG を ICO に変換する前の実用的な助言
絵を単純にする
細い線を取り除き、文字をやめるか一文字にし、太い形を使ってください。変換する前に、描画ソフトで SVG を 16 ピクセルで表示し、最小のアイコンがどう見えるかを確かめてください。
絵を正方形にする
アイコンは正方形です。ロゴが横長なら、切り取られず、正方形の中で小さくなりすぎないように、余白をつけて正方形のキャンバスに置いてください。
コントラストを確認する
ブラウザーのタブは明るいことも暗いこともあります。両方の背景に対して強いコントラストのあるマークのほうが見やすくなります。暗いマークの細い白の縁取りや、単色の塗りつぶしの形が、たいていうまくいきます。
SVG を保管する
SVG が原本です。あとでアイコンを変えることにしたら、もう一度 SVG を ICO に変換するのにそれが必要になります。
変換する前によくある質問
なぜアイコンは 16 ピクセルでぼやけて見えるのですか？
16 ピクセルはとても少ないからです。細い線や小さな文字はそこでは表現できません。より良い変換を探す代わりに、絵を単純にしてください。
ファイルにはどのサイズが含まれますか？
16、32、48、64、128、256 ピクセルで、それぞれ SVG から描き直され、すべて透明度つきです。
透明度は残りますか？
はい。SVG の透けた背景は、ICO の六つのサイズすべてで透けたままです。
ファイルをファビコンとして使えますか？
はい。favicon.ico と名前をつけ、サイトのルートに置くか、ページの head からリンクしてください。
ファイルはアップロードされますか？
いいえ。変換はお使いのブラウザー内で実行され、ファイルが端末の外に出ることはありません。
アイコンから SVG を作れますか？
ある程度は。ICO を SVG に変換は、アイコンを形としてトレースしますが、小さなサイズのため、復元できるものには限りがあります。
SVG を ICO に変換するときの賢い選び方
ICO か PNG か
どこでも動くファビコンには、ICO を選んでください。スマートフォンのアプリアイコンとウェブページの画像には、PNG が通常の形式です。SVG を PNG に変換がそれを与えます。
セット全体を考える
ブランドを準備しているなら、PNG のロゴ、ICO のファビコン、PDF の印刷用版が必要かもしれません。SVG を PDF に変換は、印刷のために絵を絵のまま保ちます。
実際のタブでテストする
実際のブラウザーのタブで、明るいテーマと暗いテーマの両方でアイコンを見てください。ほとんどの人がそれに出会う場所だからです。
変換後に良い結果を得る
ブラウザーのキャッシュを消す
ブラウザーはファビコンを長く保持します。アイコンを置き換えたのに古いものが見えるなら、キャッシュを消すか、プライベートウィンドウでサイトを開いてください。
すべてのサイズを確認する
ICO ファイルを開くツールがあるなら、各サイズを見てください。256 ピクセルでは良いマークが 16 では読めないかもしれず、それが単純化すべきかを教えてくれます。
正しく名前をつける
ブラウザーは、既定ではサイトのルートで favicon.ico を探します。ファイルを明示的にリンクしない限り、その名前を保ってください。
最小のサイズを生き延びるマークをデザインする
16 ピクセルの格子から始める
SVG を ICO に変換するときに良い結果を得る最も確実な方法は、最小のサイズを念頭にデザインすることです。十六×十六のマス目の格子を想像し、そこに何を置けるかを問います。円、文字、単純なグリフはできます。署名、標語つきの紋章はできません。大きなサイズは何を描いてもうまく見えるので、小さいものがデザインすべき制約です。
強い形と少ない色を使う
はっきりしたコントラストのある二、三色は、多くの色のグラデーションより読みやすくなります。正方形の大半を占める塗りつぶしの形は、細い輪郭より認識しやすいです。各ピクセルがより多くのマークを担うからです。
少し余裕を残す
正方形の縁に触れるマークは窮屈に見えることがあり、システムによっては独自の丸めや縁取りを加えます。最小のサイズで一、二ピクセルの余白があれば、形が保たれます。
ほかのアイコンの隣で見る
よく知られたサイトのタブをいくつか開いて比べてください。最もうまく機能するアイコンは、非常に単純であることがわかるでしょう。SVG を ICO に変換する前にその規律を借りれば、結果はタブの群れの中でも際立ちます。
プライバシーと取り扱い
なぜ絵にはローカルでの変換が重要なのか
ロゴやブランドマークは、公開される前は機密かもしれません。多くのオンラインコンバーターは、ファイルをサーバーにアップロードし、処理して、結果を送り返し、しばらくの間、管理できない機械にコピーが存在します。ここではお使いのブラウザー自身が作業するので、絵は端末にとどまります。
ページを離れるとどうなるか
ページを閉じると、変換されたファイルはブラウザーから消えるので、先にダウンロードしてください。あなたの絵に関するものは何も保持されません。
うまくいかない場合
アイコンが空白になる
SVG にサイズやビューボックスがないのかもしれません。テキストエディターで開き、幅と高さ、またはビューボックスがあるか確認するか、描画ソフトで修正してください。
アイコンが切り取られる
一部の SVG には、宣言された領域の外に出る要素があります。すべてが収まるように、元のビューボックスを調整してください。
ページが固まる
すべてがお使いの端末で実行されます。コンピューターでやり直すか、より単純な絵で試してください。
関連ツール
同じ系統のツールが、隣接する作業を担います。選んだサイズの画像には、SVG を PNG に変換かSVG を JPG に変換を使ってください。どんな拡大でもシャープなままの文書には、SVG を PDF に変換が絵を絵のまま保ちます。画像を形にトレースし直すには、ICO を SVG に変換、PNG を SVG に変換、JPG を SVG に変換がその役目を果たします。
実例
小さなブログを始めたとして、ロゴが SVG で、下にブログ名のある緑の葉だとします。SVG をここにドロップしてボタンを押します。ICO が届き、ブラウザーのタブでは葉は見分けられますが、その下の名前は読めません。描画ソフトを開き、葉だけの版を作り、もう一度 SVG を ICO に変換して、新しいファイルを favicon.ico としてアップロードします。タブにはくっきりした緑の葉が表示され、完全なロゴはページに残ります。
短いチェックリスト
変換する前
絵を単純にしてください。正方形にしてください。文字をアウトライン化し、画像を埋め込んでください。
変換している間
ファイルが準備できるまでページにとどまってください。
変換したあと
ICO をブラウザーのタブとショートカットで、明るいテーマと暗いテーマでテストし、SVG を保管してください。
よくある間違い
完全なロゴを使う
文字と細かい部分は、16 ピクセルで消えます。単純化したマークを使ってください。
より良い変換が込み入った絵を直してくれると期待する
欠点はサイズにあり、ツールにはありません。SVG を単純にしてください。
キャッシュを忘れる
古いファビコンがブラウザーに居座ることがあります。新しいものが失敗したと決める前に、キャッシュを消してください。
絵は端末の中にとどまる
変換はローカルで行われます。絵はお使いのブラウザー自身が読み込み、そこで描画し、ICO として返します。何もアップロードされないので、サーバーにコピーが残ることはなく、ほかの誰にも見られません。未公開のブランドマークにとって、それが SVG を ICO に変換する安全な方法です。
まとめ
ここで SVG を ICO に変換するには、絵をドロップしてボタンを押します。SVG は絵ではなく、絵を描くための指示であり、ここではその指示がサイズごとに一度ずつ従われ、結果が ICO として保存されます。絵は、ファイル内の何も実行できないサンドボックスの中で描画され、何もアップロードされません。ファイルには六つのサイズが含まれます。16、32、48、64、128、256 ピクセルで、それぞれ互いに縮小されたものではなく SVG から描き直され、すべて透明度つきです。アイコンは小さな絵ではなく、別の絵です。細い線や小さな文字があるものは、どんなに丁寧に描画しても、16 ピクセルではぐちゃぐちゃになります。結果が濁って見えるなら、答えはより良い変換ではなく、より単純な SVG です。ほかから取り込まれるフォントと画像は解決されません。