目次
目次
この文書は、Framerを学ぶ日本国内のユーザーが、日本語資料の不足により感じる困難を解決するために、公式ブログの内容を日本語に翻訳し実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでも役立てば幸いです。
SVGに大きな画像が含まれている時のエラー
FramerでSVGファイルをアップロードした際、以下のようなエラーメッセージを見たことがあるかもしれません。「内部に大きなラスター画像(~XXX KB)のあるSVGはサポートされていません。」 このエラーは、FigmaのようなデザインツールからエクスポートされたSVGファイル内に大きな画像（JPGまたはPNG）が含まれている場合に発生するエラーです。
なぜこのようなエラーが発生するのでしょうか？
Figmaなどの他のアプリでSVGイメージをエクスポートする際に、そのイメージにJPGまたはPNG形式の他の画像が含まれることがあります。例えば、Figmaからエクスポートするグラフィックに写真やスクリーンショットが含まれている場合は、以下のような問題が発生することがあります。
注意: 使用されたSaaSキットはこちらからダウンロードできます。
CTAイラストを例に、該当カードをSVGとしてエクスポートすると、画面内の2枚の写真がすべてSVGに含まれます。
写真やスクリーンショットのようなラスター画像はSVG形式に変換することができません。そのため、SVGファイル内でそのまま、全体のサイズでインライン処理されます。問題は、インライン処理の過程で画像サイズが約33%増加することです。例えば、100KBの元画像はSVGファイル内で約133KBを占めることになります。
Framerはラスター画像を含むSVGをサポートしますが、一定のサイズまでしかサポートしていません。この限界を超える大きさの画像が含まれるSVGをアップロードすると、このエラーが発生するのです。
エラー解決方法
このエラーを解決する方法は三つあります。
方法A: 画像サイズを縮小して再エクスポートする
この方法は三つの中で最も簡単です。
問題のあるグラフィックを2倍または3倍の解像度でJPGまたはPNGとしてエクスポートしてください。
tinyjpg.comなどの画像圧縮ツールを使って、エクスポートした画像の容量を減らしてください。
圧縮した画像を同じ場所に再アップロードしてください。
最後に、全体のグラフィックをSVG形式でエクスポートしてください。ファイルサイズが大幅に減り、Framerに問題なくアップロードできる可能性が高いです。
方法B: SVGと画像(JPG/PNG)ファイルを別々にエクスポートする
方法Aでほとんどのエラーが解決するでしょうが、効果がない場合は方法Bを考慮してみてください。この方法は少し手がかかりますが、すべての画面サイズでSVG画像を鮮明に保ち、サイトの性能を向上させることができます。
ラスター画像を除去した状態でSVGグラフィックをエクスポートします。
除去した部分の画像を別々にJPGまたはPNGとしてエクスポートします。
注意: 画像サイズを手動で調整したり、最適化しなくてもFramerが自動でサイズを調整します。
SVGグラフィックとPNG画像をFramerにアップロードし、元のファイルに配置した場所に配置してください。
方法C: 全体をPNGとしてエクスポートする
このオプションを選択すると、結果画像が鮮明でなく、結果物のサイズがオプションAやBより大きくなる場合があります。
全体のグラフィックをPNG形式でエクスポートしてください。
注意: 画像サイズを手動で調整したり、最適化しなくてもFramerが自動でサイズを調整します。
抽出したPNGファイルをFramerにアップロードしてください。
まとめ
これらの三つの方法を通じて、「内部に大きな画像があるSVGはサポートされていません」というエラーを容易に解決できます。このガイドをよく理解し、今後このエラーが発生した際に柔軟に対応できるよう願っています。
この記事は、Framer公式ブログの「内部に大きな画像があるSVGはサポートされていませんエラーの理解と修正」を翻訳・脚色したコンテンツです。
