SVG画像は純粋にベクトルであるか、またはビットマップ画像をSVG画像に結合できますか？ビットマップ画像に適用された変換（パースペクティブ、マッピングなど）はどうですか？
編集：画像はリンク参照によってSVGに含まれる場合があります。http://www.w3.org/TR/SVG/struct.html#ImageElementを参照してください。私の質問は、ビットマップ画像がsvg内に含まれて、svg画像が自己完結するかどうかということでした。それ以外の場合、svgイメージが表示されるときは常に、リンクをたどってイメージをダウンロードする必要があります。どうやら.svgファイルは単にxmlファイルです。
回答:
はい、<image>要素から任意の画像を参照できます。そして、データURIを使用してsvgを完全に自己完結させることができます。例：
<image width="100" height="100" xlink:href="data:image/png;base64,...">ドットは、エンコードされたbase64データを追加する場所です。通常、svgをサポートするベクターグラフィックスエディターには、埋め込まれた画像を保存するオプションがあります。それ以外の場合は、base64との間でエンコードするためのツールがたくさんあります。
これはsvgテストスイートからの完全な例です。
xlinkそのまま宣言することを忘れないでください：xmlns:xlink="http://www.w3.org/1999/xlink"一部のブラウザー/ビューアーはそれなしでは画像を表示しない可能性があります
widthし、heightSVG画像タグに。ただし、これらの属性を省略した場合、FirefoxとIEは画像を表示しません。必ず指定してください！
ここにフィドルを投稿し、HTMLページ内のデータ、SVGに埋め込まれたリモートおよびローカルの画像を示します。
<!DOCTYPE html>
<html>
<head>
<title>SVG embedded bitmaps in HTML</title>
<style>
body{
background-color:#999;
color:#666;
padding:10px;
}
h1{
font-weight:normal;
font-size:24px;
margin-top:20px;
color:#000;
}
h2{
font-weight:normal;
font-size:20px;
margin-top:20px;
}
p{
color:#FFF;
}
svg{
margin:20px;
display:block;
height:100px;
}
</style>
</head>
<body>
<h1>SVG embedded bitmaps in HTML</h1>
<p>The trick appears to be ensuring the image has the correct width and height atttributes</p>
<h2>Example 1: Embedded data</h2>
<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>
<h2>Example 2: Remote image</h2>
<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
</svg>
<h2>Example 3: Local image</h2>
<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
</svg>
</body>
</html>データURIを使用して、画像データを提供できます。次に例を示します。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>画像はすべての通常のsvg変換を通過します。
ただし、この手法には欠点があります。たとえば、画像はブラウザによってキャッシュされません。
data:URLを使用して、Base64でエンコードされたバージョンの画像を埋め込むことができます。しかし、それはあまり効率的ではなく、大きな画像を埋め込むことはお勧めしません。別のファイルにリンクする何らかの理由が現実的ではありませんか？
ビットマップを含めることもできます。その上で変換を使用することもできると思います。