Adding a border to an SVG image element with SVG filters

Question

I'm looking for a way to add a border to an SVG image element using SVG filters not CSS, but I can't figure out how.

The file should be stand-alone, i.e. it is not meant for a webpage. I'm working in Notepad++ intending to develop a script for batch processing were images may be of different sizes, and have different aspect ratios.

Although I could read the image dimension and position a rectangle on top, I was thinking that it may be possible to use SVG filters, as discussed developer.mozilla.org.

Below is a MWE.

<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">


  <defs>
    <filter id="image">
      <feImage xlink:href="abstract.jpg"/>
    </filter>
  </defs>


<rect width="100%" height="100%" fill="DodgerBlue" />

  <rect x="10mm" y="10mm" width="20mm" height="30mm"
      style="filter:url(#image);"/>

</svg>

The example image in the MWE,

Image by Pexels from Pixabay

Answer 1

You could add the image in an <image> tag and apply the filter to that. In this example I put x="1" and y="1" to distance the image from the edges since it can cut off the filter effect where the image is flush with the edge of the SVG.

<svg viewBox="0 0 210 297" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">

  <filter id="outline">
    <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="1"/>
    <feFlood flood-color="black"/>
    <feComposite in2="expanded" operator="in"/>
    <feComposite in="SourceGraphic"/>
  </filter>
  <image filter="url(#outline)" href="https://i.sstatic.net/cJwpE.jpg" height="200" width="200" x="1" y="1"/>
</svg>

Technique for adding border taken from this article by CSS Tricks.