The ability to reference SVG graphics in a filter

[scottkellum]

I would like the ability to reference a graphic to use within an SVG filter. For example, a repeating star pattern that can be applied to text effects, or a gradient to be used as a displacement. Currently the only way I can think to do this is by using feImage. Maybe having a place for vector paths to be stored in <defs> similar to how linearGradient works, with the addition of a method to pull those definitions into a filter for use.

[BigBadaboom]

There is a way. Just use feImage.

You might be under the impression that feImage can only point to an external image. That's not the case.

<svg viewBox="0 0 250 250">
  <defs>
    <filter id="Image" x="0" y="0" width="250" height="250">
      <feImage xlink:href="#smiley" />
    </filter>
    
    <g id="smiley">
      <circle cx="125" cy="125" r="100" fill="yellow"/>
      <circle cx="90" cy="100" r="10" fill="black"/>
      <circle cx="160" cy="100" r="10" fill="black"/>
      <circle cx="125" cy="110" r="70"
              fill="none" stroke="black" stroke-width="4"
              stroke-dasharray="130 1000" stroke-dashoffset="-40"/>
    </g>
  </defs>
  
  <rect x="0"  y="0" width="250" height="250" filter="url(#Image)"/>
</svg>

See: https://jsfiddle.net/r462w7eq/

[scottkellum]

@BigBadaboom
Thank you! I’ve spent way too much time trying to get this working assuming Firefox would have a feature like this. It looks like the only browser it works in is Chrome…

This is exactly what I was looking for (and what I had tried) so thank you! I hope it gets implemented cross browser soon.