SVGに画像・フォントを埋め込む
SVG1件と、参照する画像（PNG・JPEG・WebP・GIF）やフォント（TTF・OTF・WOFF・WOFF2）を追加し、素材を別々に渡さずに済む1つのSVGへまとめます。各参照に使う素材を指定して作成し、プレビューの表示に成功するとSVGを保存できます。外部URLの素材は自動取得しません。
できること
画像とフォントをまとめる
追加したローカル素材をSVG内に埋め込み、素材を別々に渡す手間を減らします。
参照先と素材を確認
SVG内の画像パスやフォント名ごとに、対応するファイルを指定します。未解決の参照を残したまま作成しません。
作成後の表示を確認して保存
画像としての表示を確認し、素材を埋め込んだSVGを保存します。元のファイルは上書きしません。
使い方
SVGと素材を追加
SVGを1つと、参照する画像・フォントを選びます。フォルダーからまとめて追加することもできます。
埋め込む素材を対応付ける
各参照に使うローカルファイルを確認します。自動で対応しない参照は、追加済みの素材から選んでください。
SVGを作成
未解決の参照がなくなったら「画像・フォント入りSVGを作成」を押します。
表示を確認して保存
作成後のプレビューで文字や画像を確認してから保存します。表示に失敗した場合は、元のSVGと素材を確認してください。
こんなときに便利
SVGと素材をまとめて渡す
別フォルダーの画像やフォントを参照する図を、受け渡ししやすい1つのSVGにまとめます。
参照切れの原因を確認
必要な素材と追加済みファイルを照合し、見つからない画像やフォントを指定します。
参照先と埋め込みの仕組み
相対パスとファイルの対応
SVGから見た参照先と、追加した素材のパスが一意に一致すると自動で対応します。同じ名前でもフォルダーが異なる場合や、候補が重なる場合は手動で選びます。
フォント名には使うファイルを指定
SVGのフォント名だけから、端末のフォントを取り出すことはしません。必要なフォントファイルを追加し、対応するものを指定してください。
URLの素材は自動取得しない
外部URLが参照されている場合も、画像やフォントを手元で用意して指定します。この画面からURLを取りに行く操作はありません。
埋め込みは容量削減とは別
画像のデータをSVG内へ含めるため、SVG単体の容量は増えることがあります。フォントはWOFF2へ変換して埋め込みます。SVGコードの最適化は別のツールで行います。
表示方法による違い
プレビューはSVGを画像として表示します。すべてのアプリで同じ見た目になる保証はないため、受け渡し先でも必要な表示を確認してください。
よくある質問
素材が見つからない場合はどうしますか？
画像やフォントを追加し、該当する参照の選択欄で指定してください。フォルダーの違い、同じパスの重複、外部URLでは自動対応できない場合があります。
どの素材を使えますか？
画像はPNG・JPEG・WebP・GIF、フォントはTTF・OTF・WOFF・WOFF2です。SVGは1件ずつ指定します。
フォントを自動で探してくれますか？
フォント名だけから端末内やWeb上のフォントを探すことはしません。手元のファイルを追加して選択してください。
すでに埋め込まれた素材はどうなりますか？
data URIで埋め込まれた画像・フォントや、SVG内の#参照は外部参照に含めません。検出された未解決の参照がなければ作成できます。
素材を追加・選び直すとどうなりますか？
素材だけを追加した場合は一覧へ追加し、指定済みの素材は保持します。同じパスの候補が増えた場合などは、自動対応を確認してください。新しいSVGを含む入力は、現在のSVGと素材一式を置き換えます。
未対応の参照がある場合は？
外部のuseやscriptの参照は埋め込めません。外部CSSのimportを含むSVGも読み込めないため、作成元のアプリなどで参照を整理してから指定してください。
SVGが軽くなりますか？
容量の削減は目的としていません。素材をSVG内へ含めることで容量が増える場合があります。コードを整理したい場合はSVG最適化を使ってください。
作成したSVGを表示できない場合は？
この画面では表示に成功するまで保存を出しません。元のSVGと素材を確認し、対応付けやファイルを見直して作成してください。
入力と結果
- 入力
- SVG 1件と画像・フォント。ファイルまたはフォルダーから追加。
- 画像
- 追加した画像の元データを埋め込みます。画像のリサイズや圧縮は行いません。
- フォント
- 対応付けたフォントをWOFF2へ変換して埋め込みます。
- 出力
- 元の名前-embedded.svg。作成後の表示に成功すると保存できます。