• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

10. Filters > The feImage Filter

The feImage Filter

Up to this point, we’ve used only the original graphic or its alpha channel as input to a filter. SVG’s <feImage> element lets you use any JPG, PNG, or SVG file; or an SVG element with an id attribute as input to a filter. In Example 10-4, we import a picture of the sky with a cloud in it to use as a background in the picture of the flower.

Example 10-4. Using the feImage element
<defs>
<filter id="sky-shadow" filterUnits="objectBoundingBox">
    <feImage xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/sky.jpg" result="sky"/>
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
    <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="sky"/>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
</defs>

<g id="flower" style="filter: url(#sky-shadow)">
    <!-- flower graphic goes here -->
</g>

<!-- show original image -->
<image xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/sky.jpg" x="170" y="10"
    width="122" height="104"/>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint