SVGからPNGへの透明度トラブルを調べる

ここでは変換結果の問題を調べます。基本操作は透明背景のSVGをPNGに変換するを参照してください。

白く見えても透明とは限らない

透明度を表示できるエディターか色付き背景上でPNGを確認します。ビューアが透明部分を白く表示しているだけの場合もあります。白が画像内に残るなら、SVG内の不透明な背景矩形、塗りつぶし、埋め込み画像を調べてください。

SVGからPNGへはそれらの要素を削除しません。可能なら元SVGを編集します。透明背景ツールでラスター画像を切り抜く方法もありますが、別の編集処理として結果を確認してください。

透明度のスイッチはありません

入力はSVG1ファイルで、設定はピクセル寸法とPNG圧縮です。既存の透明部分はそのまま保持でき、Preserve TransparencyやAlpha Channelのチェックは不要です。背景色の消去やPNG-8/PNG-24の選択もありません。

輪郭と欠けを調べる

エッジケース

SVGレンダラーごとに同じ画素になると仮定せず、出力の効果を確認します。埋め込み写真の不透明な背景は、その元画像を編集する必要があります。パスの不透明度を変えても下の白い矩形は消えません。

埋め込まれたラスター画像を含む SVG

SVG にラスター画像が含まれている場合：

• ラスター部分は元の透明度を維持する
• ベクター部分は通常どおり変換される
• 埋め込まれた画像に透明度があることを確認する

複雑な透明エフェクト

以下のエフェクトを含む SVG の場合：

• ぼかしエフェクト
• ドロップシャドウ
• ブレンドモード

これらは異なる変換結果になる可能性があります。必要に応じてテストして調整してください。

半透明要素

opacity 値を持つ SVG：

• ファイルサイズが増加する可能性がある
• 変換後の視覚的な正確さを確認する

透明度のテスト

保存したPNGを確認します。元画像に描かれた市松模様は普通の画素で、ビューアーの市松模様は表示の補助です。2色以上の背景で比べて区別してください。HTML例は自分のテストページ用です。

クイックテスト方法

1. 画像エディターで PNG を開く
2. チェッカーボード背景（透明）を確認する
3. 後ろに色付きレイヤーを追加する
4. グラフィックが正しく見えるか確認する

ブラウザテスト

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="透明度テスト">
</div>

白いボックスが表示されないことを確認します。

透明 PNG の最適化

必要な寸法から始めます。可逆PNG圧縮は符号化の処理量を変えますが、透明な画素の範囲は変えません。別エディターでの減色は容量を抑える場合がある一方、階調や柔らかい輪郭を変えることがあります。リサイズは画素を削除・再サンプリングします。

原寸コピーを残し、1項目ずつ変更して保存結果を比較します。毎回明暗の背景で輪郭を確認してください。20〜50%や40〜80%という削減率は保証できません。使用先が対応するならWebPのコピーとも比較できます。

1項目ずつ比較する

元SVGを保管し、属性か出力寸法を1つずつ変更します。明暗両方の背景で確認してください。各辺の入力上限は8192 pxです。PNG圧縮は処理の強さであり、透明度や画質の調整ではありません。

寸法・余白とアルファを別々に調べる

透明なロゴでも、キャンバス内で被写体が小さすぎると不自然になります。元エディターでSVGのviewBoxと図形の位置を確認し、余白を調整します。当サイトの幅・高さは枠内への拡縮であり、余白の編集機能ではありません。

画面用の2倍素材は表示寸法を2倍にし、比率を保って各サイズを個別に確認します。logo@2x.pngは命名規則であり、細部を増やす設定ではありません。

<img src="logo.png" srcset="logo@2x.png 2x" alt="会社のロゴ">

両方のファイルをサイトに配置する必要があります。表示寸法と背景を確認してください。この指定が透明度を追加するわけではありません。両サイズで縁が残るなら拡大を繰り返さず元の輪郭を調べます。

よくある質問

圧縮を強めれば縁は直りますか？

いいえ。元の図柄とピクセル寸法を確認してください。

フォルダーを一括修正できますか？

いいえ。1回1ファイルです。元データを編集してから個別に変換・確認します。