SVGからICOへの変換がうまくいかない？よくある原因（フォント、外部画像、ViewBox）

SVGは、ICOファイルを生成するための最も優れたソース形式の一つです。SVGはベクター形式であるため、品質を損なうことなく任意のサイズに拡大縮小でき、優れたICOファイルに必要な複数サイズのレイヤー（16ピクセルから256ピクセル）を生成するのに最適です。理論的には、SVGをAny2ICOにドロップするだけで、シャープなマルチサイズのICOファイルが即座に得られます。

しかし実際には、SVGファイルは扱いが難しいことがあります。SVG仕様は大規模で複雑であり、異なるツールはファイルのレンダリング方法について異なる前提でSVGを作成します。Adobe IllustratorやFigmaで完璧に見えるSVGが、ブラウザベースのコンバーターが使用するレンダリングエンジンであるブラウザのCanvas APIで開くと、正しくレンダリングされない、部分的にしかレンダリングされない、またはまったくレンダリングされない場合があります。結果として、空白のアイコン、テキストが欠けたアイコン、スケールが間違ったアイコン、またはパーツが欠けたアイコンになる可能性があります。

良い知らせは、これらの問題はよく理解されており、修正方法も簡単だということです。この記事では、SVGからICOへの変換が失敗したり予期しない結果を生じたりする最も一般的な原因を取り上げ、それぞれに対する明確な修正方法を提供します。最も早く成功する方法をお探しなら、次のセクションのチェックリストから始めてください。

クイックチェックリスト：変換前にSVGを修正する

詳細な説明に入る前に、SVGからICOへの問題の大半を解決するクイックチェックリストをご紹介します。まずこれらの項目を確認してください。問題が解決すれば、これ以上読む必要はありません。

1. viewBox属性を追加または修正する。SVGをテキストエディタで開き、ルートの<svg>要素を確認してください。座標系を定義するviewBox属性（例：viewBox="0 0 100 100"）が必要です。欠けている場合は、デザインの寸法に合った値で追加してください。

2. すべてのテキストをアウトライン（パス）に変換する。ベクターエディタですべてのテキスト要素を選択し、アウトラインまたはパスに変換します。Illustratorでは「書式」>「アウトラインを作成」です。Figmaでは右クリックして「Flatten」を選択します。Inkscapeでは「パス」>「オブジェクトをパスへ」を使用します。これにより、フォントへの依存が完全に排除されます。

3. 外部参照を削除またはエンベッドする。SVGファイル内で、外部ファイル（画像、フォント、CSS）を参照するhref、xlink:href、url()の参照を検索してください。これらのリソースをSVGに直接エンベッドするか、必須でない場合は削除してください。

4. 外部CSSをインラインスタイルに置き換える。SVGが外部スタイルシートを参照している場合、関連するCSSルールをSVG内の<style>ブロックに直接コピーするか、各要素のインラインstyle属性に変換してください。

5. 明示的なwidthとheightを設定する。常に必須ではありませんが、ルートの<svg>要素にwidthとheight属性を追加すると、Canvas APIが正しいレンダリングサイズを決定するのに役立ちます。最良の結果を得るには、256ピクセル以上の値を使用してください。

フォントとテキストレンダリング

テキストは、SVG変換における問題の最大の原因です。SVGに<text>要素が含まれている場合、レンダラーはテキストを正しく表示するために指定されたフォントへのアクセスが必要です。IllustratorやFigmaなどのデザインアプリケーションでは、フォントがコンピュータにインストールされているため、すべて正しく表示されます。しかし、SVGがICO変換のためにブラウザのCanvas APIでレンダリングされる場合、状況は大きく異なります。

Canvas APIは、レンダリング時にブラウザが利用可能なフォントのみを使用できます。SVGでfont-family: "Proxima Nova"が指定されていて、そのフォントがユーザーのシステムにインストールされていない、またはWebフォントとして読み込まれていない場合、ブラウザはデフォルトフォント（通常はジェネリックsans-serifまたはserif）で代替します。これによりテキストの外観が変わります：文字間隔がずれ、文字の幅が広くなったり狭くなったり、全体的なレイアウトが崩れる可能性があります。場合によっては、フォールバックフォントがサポートしていない高度なフォント機能やリガチャをSVGが使用している場合、テキストがまったくレンダリングされないこともあります。

確実な修正方法は、すべてのテキストをアウトラインに変換することです（「パスに変換」や「テキストのフラット化」とも呼ばれます）。これにより、各テキスト文字がその正確な形状を記述するベクターパスに置き換えられます。結果として得られるSVGは、文字の形状が幾何学的なパスとして描画されるため、フォントを参照しなくなります。SVGファイルはわずかに大きくなりますが、どのシステム、どのブラウザ、どのCanvas APIでも、インストールされているフォントに関係なく、同一にレンダリングされます。

Illustratorの場合：すべてのテキストを選択し、「書式」>「アウトラインを作成」を実行します。Figmaの場合：テキストレイヤーを選択し、右クリックして「Flatten」を選択します。Inkscapeの場合：テキストを選択し、「パス」>「オブジェクトをパスへ」を使用します。アウトラインに変換する前に、元の編集可能なSVGを必ず別途保存してください。アウトライン化されたテキストはテキストとして編集できなくなります。

外部画像と参照

SVGファイルは外部リソースを参照できます：<image href="/ja/logo.png">で読み込まれた画像、URLを持つ@font-faceで読み込まれたフォント、<?xml-stylesheet?>でリンクされたCSSファイル、他のSVGファイルを参照するパターンやグラデーションなどです。SVGがブラウザベースのコンバーターでスタンドアロンファイルとして開かれると、これらの外部参照はほぼ確実に読み込みに失敗します。

Canvas APIは、セキュリティ上の理由からクロスオリジンリクエストがブロックされるサンドボックス環境でSVGをレンダリングします。https://example.com/logo.pngを指す<image>要素は、ブラウザがクロスオリジンのフェッチをブロックするため読み込まれません。その結果、画像があるべき場所に空白のスペースが表示されます。同様に、外部ホストのフォント、スタイルシート、URLで参照されるすべてのリソースにも同じことが当てはまります。

href="/ja/logo.png"のような相対パスも失敗します。SVGはCanvas APIによってメモリ内で処理されており、相対パスが解決できるディレクトリから提供されているわけではないためです。SVGが参照するためのファイルシステムコンテキストが存在しません。

修正方法は、すべての外部リソースをSVGに直接エンベッドすることです。画像の場合は、base64データURIに変換します：<image href="data:image/png;base64,iVBOR...">。フォントの場合は、SVG内の<style>ブロックにbase64エンコードされた@font-face宣言を使用します（ただし、テキストをアウトラインに変換する方が通常はより簡単で信頼性が高いです）。CSSの場合は、すべてのルールを<svg>タグ内のインライン<style>要素にコピーします。

ViewBox、Width、Heightの問題

viewBox属性はSVGの座標系を定義します。レンダラーに対して、無限のSVGキャンバスのどの部分を表示するか、コンテンツをどのようにスケーリングするかを指示します。viewBoxが欠けている、または正しくない場合、結果は空白の出力から、デザインの角だけを表示するアイコンや、間違ったアスペクト比でレンダリングされるアイコンまでさまざまです。

viewBoxの欠如：SVGにwidthとheightはあるがviewBoxがない場合、一部のレンダラーは寸法からviewBoxを推測しますが、Canvas APIではそうならない場合があります。最も安全な方法は、常に明示的なviewBoxを含めることです。SVGが100x100ユニットで設計されている場合は、ルート要素にviewBox="0 0 100 100"を追加してください。

viewBoxがコンテンツと一致しない：viewBoxの座標がSVGのすべてのコンテンツを包含していない場合、デザインの一部がクリップされます。例えば、アイコンの要素がx=120まで広がっているのにviewBoxが0から100までしかカバーしていない場合、右端の20ユニットは見えません。SVGをテキストエディタで開き、viewBoxの値を確認し、すべての可視要素を含むように調整してください。

Width/heightがゼロまたは非常に小さな値に設定されている：一部のSVGエクスポートツールは、widthとheightを1pxや0のような非常に小さな値に設定し、Webページ上で表示する際はCSSに依存してSVGをスケーリングします。Canvas APIがこれらの寸法を読み取ると、SVGを1x1ピクセルでレンダリングしてからスケールアップする可能性があり、完全に空白または大幅にぼやけた結果になります。Canvas APIに適切なレンダリングサイズを与えるため、widthとheightを256ピクセル以上に設定してください。

パーセントベースの寸法：width="100%" height="100%"のSVGには固有のサイズがありません。Canvas APIはレンダリングサーフェスを作成するために絶対ピクセル値が必要です。パーセント寸法をwidth="512" height="512"のような絶対値に置き換えてください。