There probably isn’t a tremendously huge use-case for this, other than the obvious: you need a raster graphic amongst other things in a larger SVG design. That way it moves and scales with the rest of the elements.
The syntax is:
<svg ... >
<image xlink:href="/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>You’d probably never drop a raster graphic in an SVG all by itself as there isn’t any advantages to it. Yes, you can apply SVG filters to the image then, but you can apply SVG filters to an <img> as well. Same goes for clipping paths and masks.
The filters can appear slightly different though, so good to be aware of that:
See the Pen SVG filters on SVG or IMG by Chris Coyier (@chriscoyier) on CodePen.
Hi! I am creating banners in Illustrator with vectors on top of raster. If I want to add a rollover effect to my buttons for the banner, where would I find a good tutorial? I don’t know much about code. (This is not for my website which is under construction, however I may apply it to my website in the future!)
One thing you need to know if your using JPG images imbedded into your SVG deliverable. Make sure you are using “Progressive JPG” images. It will help when opening your final svg deliverable on the web.
The documentation says the xlink-href is deprecated / no longer advised. Any advice on replacement?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
I did this in emergency situations where my CMS was limited to only allowing SVG logos for headers, certain clients had detailed graphics and textures in their logo which weren’t replicable by svg rendering alone.
I remember things looking a little crunchy in ie11.