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.<\/p>\n
The syntax is:<\/p>\n
<svg ... >\r\n <image xlink:href=\"\/path\/to\/image.jpg\" width=\"100%\" height=\"100%\" x=\"0\" y=\"0\" \/>\r\n<\/svg><\/code><\/pre>\nYou’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><\/code> as well. Same goes for clipping paths and masks.<\/p>\nThe filters can appear slightly different though, so good to be aware of that:<\/p>\n
See the Pen SVG filters on SVG or IMG<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":177022,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":187517,"url":"https:\/\/css-tricks.com\/lodge\/svg\/30-converting-raster-vector\/","url_meta":{"origin":189034,"position":0},"title":"30: Converting Raster to Vector","date":"November 4, 2014","format":false,"excerpt":"There may come a day where you wish a graphic you had was SVG, but you only have it in raster, like GIF, JPG, or PNG. In this video we look at an example of that. We have this arrow graphic that is GIF, but really should be SVG when\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179166,"url":"https:\/\/css-tricks.com\/lodge\/svg\/06-using-svg-svg-background-image\/","url_meta":{"origin":189034,"position":1},"title":"06: Using SVG – SVG as background-image","date":"August 15, 2014","format":false,"excerpt":"SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. .element { background-image: url(\/images\/image.svg); } All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":189560,"url":"https:\/\/css-tricks.com\/lodge\/svg\/32-svg-filters-svg-html-elements\/","url_meta":{"origin":189034,"position":2},"title":"32: SVG Filters on SVG and HTML Elements","date":"November 30, 2014","format":false,"excerpt":"Perhaps you've heard of CSS filters? You can apply them do any element from CSS, like: .apply-css-filter { -webkit-filter: grayscale(0.5); filter: grayscale(0.5); } You can even apply that to a HTML element or an SVG element. But there is also filters you can define within SVG, and there are more\u2026","rel":"","context":"In \"svg filters\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305793,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-image\/","url_meta":{"origin":189034,"position":3},"title":"mask-image","date":"March 29, 2020","format":false,"excerpt":"The mask property in CSS allows you to hide parts of an element. For example, if you have a black and white image, you can apply that as a mask and the black parts will force the element to be transparent on that elements. Masks can also match the alpha\u2026","rel":"","context":"In \"mask\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":178563,"url":"https:\/\/css-tricks.com\/lodge\/svg\/04-svg-small\/","url_meta":{"origin":189034,"position":4},"title":"04: Why SVG? Small.","date":"August 11, 2014","format":false,"excerpt":"The size of an SVG file depends on how complex it is, not how \"large\" it is. Remember SVG's don't really care what size they are rendered at, they are flexible and sharp no matter what. Imagine a 100x100 pixel raster image. That's 10,000 pixels of information. SVG is just\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178547,"url":"https:\/\/css-tricks.com\/lodge\/svg\/03-svg-flexible\/","url_meta":{"origin":189034,"position":5},"title":"03: Why SVG? Flexible.","date":"August 11, 2014","format":false,"excerpt":"We just learned that SVGs look visually sharp. SVGs are also flexible. That's not really unique to elements on the web, but what is unique is that they retain that perfect sharpness no matter what size you resize them to. That makes them truly flexible, unlike raster images that lose\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/189034"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=189034"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/189034\/revisions"}],"predecessor-version":[{"id":189035,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/189034\/revisions\/189035"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177022"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=189034"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=189034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}