SVGのフォント、外部画像、filterが書き出しで失敗する理由
デザインツールでは正しく見えるSVGでも、PNGに変換した途端に結果が変わることがあります。文字が別のフォントになる、画像の一部が空白になる、影が切れる、ぼかしが消える、maskが効かない、といった問題です。
原因は、SVGが必ずしも1つの完全な画像ファイルではないからです。フォント、外部画像、CSS、filter、mask、clipPathなど、外部リソースやレンダリング機能に依存している場合があります。変換環境がそれらを利用できないと、PNGの出力はプレビューと一致しません。
よくある問題を順番に見ていきます。
> 問題1：フォントが変わる、または表示されない
SVG内のテキストは、次のようにフォント名だけを指定していることがあります。
<text font-family="Inter" font-size="32">Export</text>
このコードにはInterフォントそのものは含まれていません。変換環境にそのフォントがなければ、別のフォントに置き換わります。その結果、文字幅、行間、太さが変わり、位置ずれや切れが起こります。
修正方法
ロゴや見出しはアウトライン化する。 Figma、Illustrator、Sketch、Inkscapeなどで文字をパスに変換しておくと、フォント環境に依存しません。
編集性が必要な場合だけテキストを残す。 後から文言を変える必要があるSVGではテキストを残しても構いませんが、フォントを確実に読み込める環境が必要です。
ユーザーのPCにあるフォントを前提にしない。 自分の環境で表示できるフォントでも、変換ツールや他の端末では使えないことがあります。
最終的にPNGだけが必要なら、文字のアウトライン化が最も安定します。
> 問題2：外部画像が表示されない
SVGは外部画像を参照できます。
<image href="photo.png" width="400" height="300" />
またはリモートURLを参照することもあります。
<image href="https://example.com/photo.png" />
変換ツールがその画像にアクセスできなければ、PNGではその部分が空白になります。
よくある原因：
- SVGだけを移動し、画像ファイルを一緒に移動していない
- 相対パスが変わった
- リモートサーバーがCORSでブロックしている
- 画像URLにログインが必要
- 一時URLが期限切れになった
- 画像ファイルが削除された
修正方法
重要な画像はSVG内に埋め込む方法が安定します。
<image href="data:image/png;base64,..." />
ファイルサイズは大きくなりますが、SVGだけで完結するため、変換時に画像が欠けにくくなります。
リンクのまま使う場合は、フォルダ構造を保ち、最終環境でSVGを開いて確認してください。
> 問題3：filterの見た目が変わる
SVGのfilterは、影、ぼかし、発光、色変換などを作れます。ただし、すべてのレンダラーが同じように処理するわけではありません。
よくある症状：
- ドロップシャドウが端で切れる
- ぼかしの強さが違う
- 色が変わる
- 複雑なfilterが消える
- 書き出しに時間がかかる、または失敗する
影が切れる場合、filter領域が小さすぎることがあります。
<filter id="shadow" x="0" y="0" width="100%" height="100%">
影がこの領域の外に出ると切り取られます。次のように広げます。
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
本番用のPNGにするなら、複雑なfilterはできるだけ簡略化しましょう。単純な影やぼかしは比較的安定しますが、複数の合成や変位を使うfilterは差が出やすいです。
> 問題4：maskやclipPathが効かない
アバター、バッジ、図解、イラストでは、maskやclipPathがよく使われます。これらが失敗すると、画像が切り抜かれなかったり、違う位置で切られたり、要素が消えたりします。
確認ポイント：
- 複数のSVGを合成して
idが重複していないか maskやclipPathが存在しないIDを参照していないか- mask内で外部画像を使っていないか
- transformで要素が表示範囲外に移動していないか
viewBoxが適切か
ブラウザでSVGを直接開いても壊れているなら、SVG構造自体の問題です。ブラウザでは正常で、特定の変換ツールだけ失敗する場合は、デザインツール側で効果をフラット化するのが現実的です。
> 問題5：外部CSSが読み込まれない
SVGが外部CSSに依存している場合もあります。
<link rel="stylesheet" href="styles.css" />
または、外部で定義されたクラスだけを参照していることもあります。
<path class="brand-primary" />
CSSがSVG内に含まれていなければ、変換時に色、線幅、フォント、透明度が分からなくなる可能性があります。
変換用には、重要なスタイルをインラインにする方が安定します。
<path fill="#0f766e" stroke="#0f172a" stroke-width="2" />
コードとしては少し冗長ですが、PNG変換では予測しやすくなります。
> 書き出し前のチェックリスト
重要なSVGをPNGに変換する前に、次を確認してください。
- ロゴや見出しの文字をアウトライン化したか
- 重要な画像を埋め込んだか
- リモートフォントや外部CSSへの依存を減らしたか
- 色、線幅、透明度をSVG内に持たせたか
- 影やぼかしのfilter領域を広げたか
- maskやclipPathのIDが重複していないか
viewBoxが正しいか- 一括変換前に代表ファイルでテストしたか
svg2img.ccでは、変換はブラウザ内で行われます。ファイルがサーバーにアップロードされないためプライバシー面では扱いやすい一方、ブラウザがアクセスできない外部リソースはレンダリングできません。自分自身で完結しているSVGほど、PNG変換は安定します。
> フラット化すべき場面
最終的にPNGだけが必要なら、フラット化は有効です。文字をパスにし、画像を埋め込み、複雑な効果を簡略化し、同じサイズのアートボードから書き出します。
編集性を優先するならSVGの構造を残す。出力の安定性を優先するなら外部依存を減らす。この切り替えを意識すると、変換後のトラブルはかなり減らせます。