最近、案件でも使用することの増えてきたSVGですが、ラスタ画像が混在したSVGファイルを作成する際には注意が必要です。それらの注意点をまとめました。 この記事はSVG Advent Calendar 2015の2日目の記事です。1日目は(id:rikuo)さんが「SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました」という記事を書かれています。 サポートしているブラウザも増えてきたため実案件でもSVGを使用することが多くなってきました。とくに図版の場合は拡大してもぼやけずに表示できるため、積極的に使用しています。 ただ図版でも全てベクターで完結せずに、写真やスクリーンキャプチャなどのラスタ画像を配置する場合があります。そのようなラスタ画像を配置したSVGファイルを作成するときに苦労した点がありましたのでまとめてみました。 SVGにはHTMLのimg要素と似たimage要素