Beispiel:SVG-Filter-10.html

<!DOCTYPE html> <html> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">  
 <style>

svg {

 width: 96%;
 padding: 0;

} text {

 font-size: 14px; 

}

 </style>
 <title>SVG-Urfilter: feImage</title>

</head>

<body>

SVG-Urfilter: feImage

<svg viewBox="0 0 650 280" > <defs>

 <symbol id="wolke">
   <path stroke="blue" stroke-with="1" fill="skyblue"

d="m40,40 c0,0 20,-50 30,0 0,0 10,-40 40,0 0,0 40,-50 30,30 20,20 -0,30 -30,20 0,0 -20,50 -30,0 0,0 -30,50 -40,-20 0,0 -45,-30 0,-30" />

 </symbol>
 
 <svg id="doppeldecker">
   <rect width="200" height="200" stroke="black" stroke-width="1" fill="none"/>
   <path id="tragflaecheUnten" stroke="black" stroke-with="0.5" fill="red" 

d="m37,120 c-10,-20 55,-30 55,-40 0,0 45,-40 45,-30 15,15 -96,90 -100,70" />

   <path stroke="black" stroke-with="0.5" fill="red" 

d="m25,33 c-3,-30 21,-35 22,-3 30,5 15,-30 0,0 0,0 95,60 70,70 -30,25 -58,-40 -85,-60 -35,30 -35,-10 -7,-8" /> <path id="tragflaecheOben" stroke="black" stroke-with="0.5" fill="red" d="m20,85 c-10,-10 110,-70 105,-55 10,10 -105,75 -105,55" />

   <path id="propeller" stroke="black" stroke-with="0.5" fill="black" 

d="m120,95 c5,-30 25,-30 0,0 -25,30 -5,30 0,0" />

   <path id="streben" stroke="black" stroke-with="0.5" fill="none" 

d="m30,88 l15,15 c0,0 -5,-20 0,-20 m70,-40 l10,10 l-5,-14 m-40,68 l2,5 1-7" /> <circle cx="85" cy="115" r="4" fill="white" stroke="black" stroke-width="6"/>

 </svg>	

 <filter id="image" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="https://wiki.selfhtml.org/images/1/1c/Cloud.svg" result="img" />
 </filter>

 <filter id="Vektorgrafik" x="0" y="0"  filterUnits="userSpaceOnUse">
   <feImage x="0" y="0" width="200" height="200" href="http://wiki.selfhtml.org/images/2/21/Burg.svg" result="img" />
 </filter>
 
 <filter id="Fragment" x="0" y="0"  filterUnits="userSpaceOnUse">
   <feImage x="0" y="0" width="100%" height="100%" href="#doppeldecker" result="img" />
 </filter>

</defs>

 <text x="20" y="20">Rastergrafik</text>
 <rect width="200" height="200" 
       transform="translate(10,50)" 

filter="url(#image)"

 />
 
 <text x="220" y="20">Vektorgrafik</text>
 <rect width="200" height="200" 
       transform="translate(210,50)" 

filter="url(#Vektorgrafik)"

 />
 
 <text x="440" y="20">SVG-Fragment</text>
 <rect width="200" height="200" 
       transform="translate(420,50)" 

filter="url(#Fragment)"

 />

</svg>

Beachte: Der Firefox hat hier einen alten Bug und unterstützt keine Referenzierungen von internen SVG-Fragmenten.

</body> </html>