Adding Border to Svg Image

Adding border to SVG image

Draw a <rect> round the image which is fill="none". You can use the stroke of the <rect> as the border.

SVG image with a border / stroke

stroke does not apply to <image> or <use>, only shapes and text. If you want to draw a border round it, draw a <rect> after the image with the same x,y,width and height as the image and give that a stroke and a fill of "none".

As to translate vs x/y - it depends on your use case.

How to add border/outline/stroke to SVG elements in CSS?

In CSS, something like:

path {
  fill: none;
  stroke: #646464;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

Adding a border to an SVG image element with SVG filters

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.stack.imgur.com/cJwpE.jpg" height="200" width="200" x="1" y="1"/>
</svg>

Add border to svg image in D3 graph

I don't think you can play with the border of a svg image, but if all your images are circles, then you could alternatively append to each node a circle which will simulate the border of your image:

node.append("circle")
  .attr("cx", 12.5)
  .attr("cy", 0)
  .attr("r", 17.5)
  .style("fill", "transparent")
  .style("stroke", "black")
  .style("stroke-width", "2px");

var json = {

  "nodes": [

    {"x": 50, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 150, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 250, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 350, "y": 150, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 450, "y": 150, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 50, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 150, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},

    {"x": 250, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"}

  ],

  "links": [

    {"source":  0, "target":  1},

    {"source":  1, "target":  2},

    {"source":  2, "target":  3},

    {"source":  3, "target":  4},

    {"source":  5, "target":  6},

    {"source":  6, "target":  7},

    {"source":  7, "target":  3}

  ]

};

  // setting up the canvas size :)

  var width = 900,

    height = 500;

  // initialization

  var svg = d3.select("body").append("svg")

  .attr("width", width)

  .attr("height", height);

  // build the arrow.

  svg.append("svg:defs").selectAll("marker")

  .data(["end"])      // Different link/path types can be defined here

  .enter().append("svg:marker")    // This section adds in the arrows

  .attr("id", String)

  .attr("viewBox", "0 -5 15 15")

  .attr("refX", 12)

  .attr("refY", 0)

  .attr("markerWidth", 25)

  .attr("markerHeight", 25)

  .attr("orient", "auto")

  .append("svg:path")

  .attr("d", "M0,-5L10,0L0,5");

  var force = d3.layout.force()

  .gravity(0) // atom's cohesiveness / elasticity of imgs :)

  .charge(-50) // meta state transition excitement

  .linkDistance(140)

  .size([width, height]); // degree of freedom to the canvas

  // exception handling

  // d3.json("graph.json", function(error, json) {

  //   if (error) throw error;

    // Restart the force layout

    force

    .nodes(json.nodes)

    .links(json.links)

    .start();

    // Build the link

    var link = svg.selectAll(".links")

    .data(json.links)

    .enter().append("line")

    .attr("class", "link")

    .attr("marker-end", "url(#end)"); // add the arrow with and identify it wiht the tag "end" :)

    var node = svg.selectAll(".nodes")

    .data(json.nodes)

    .enter().append("g")

    .attr("class", "node")

    .call(force.drag);

    // Append custom images

    node.append("svg:image")

      .attr("xlink:href",  function(d) { return d.img;}) // update the node with the image

      .attr("x", function(d) { return -5;}) // how far is the image from the link??

      .attr("y", function(d) { return -19;}) // --- same ---

      .attr("height", 35) // size

      .attr("width", 35)

      .style("stroke", "red") //------ DOESNT WORK

      .style("fill", "auto") //------ DOESNT WORK

      .style("stroke-width", 5) //------ DOESNT WORK

    ;

    node.append("circle")

      .attr("cx", 12.5)

      .attr("cy", 0)

      .attr("r", 17.5)

      .style("fill", "transparent")

      .style("stroke", "black")

      .style("stroke-width", "2px");

    force.on("tick", function() {

      link.attr("x1", function(d) { return d.source.x; })

      .attr("y1", function(d) { return d.source.y; })

      .attr("x2", function(d) { return d.target.x; })

      .attr("y2", function(d) { return d.target.y; });

      node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      force.stop();

    });

  // });

.link {

  stroke: black;

}

.node text {

  pointer-events: none;

   font: 10px sans-serif;

}

.node:not(:hover) .nodetext {

  display: none;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="style.css">

<body>

<script src="//d3js.org/d3.v3.min.js"></script>

</body>

</html>

Can I use a SVG element in the same file to display a border-image?

You could include the SVG as a data URL.

div {
  border: 10px solid;
  border-image: url('data:image/svg+xml,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="10" fill="red"/></svg>');
  border-image-slice: 10;
}

<div>This should have rounded corners</div>

Adding outline border to SVG image

CSS filter drop-shadows are applied to SVG elements:

Sample Image

<style>
 svg{
  width:180px;
  filter:drop-shadow(5px 5px 0px darkgreen) drop-shadow(-5px -5px 0px darkgreen); 
 }
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" style="stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round">
        <path d="M 22.5,11.63 L 22.5,6M 20,8 L 25,8M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:#ffffff; stroke:#000000; stroke-linecap:butt; stroke-linejoin:miter;"/>
        <path d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37z " style="fill:#ffffff; stroke:#000000;"/>
        <path d="M 11.5,30 C 17,27 27,27 32.5,30M 11.5,33.5 C 17,30.5 27,30.5 32.5,33.5" style="fill:none; stroke:#000000;"/>
        <path d="M 11.5,37 C 17,34 27,34 32.5,37" style="fill:none; stroke:#000000;"/>
    </svg>

Mask Image with SVG Shape and add a Border

<!DOCTYPE html>
<html>
    <style>

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 300px;
  height: 300px;
  margin: 1em auto;
}

.frame-border {
  stroke: #10c020;
  stroke-width: 4;
}

</style>
    <body>
        <div class="container">
            <svg viewBox="-10 -10 120 120">
                <defs>
                    <mask id="mask">
                        <rect fill="#000000" x="0" y="0" width="300" height="300"></rect>
                        <path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" fill="#FFFFFF"/>
                    </mask>
                </defs>
                <image mask="url(#mask)"
                    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://randomuser.me/api/portraits/women/47.jpg" width="100" height="100">
                </image>
                <g class="frame-border" fill="none">
                    <path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" stroke-linecap="round" />
                </g>
            </svg>
        </div>
    </body>
</html>

How to add a border to an image inside an SVG circle

You could change the radius on your clipPath circle to be a little bit less than the other circle and use a square image so it fits perfectly.

render() {
  return (
    <svg id='svg1'  viewBox='0 0 48 48'>
      <defs>
        <clipPath id='circleView'>
          <circle cx='24' cy='24' r='18' fill='none' stroke='#FF62E1' strokeWidth='2' />
        </clipPath>
      </defs>
      <image
        x="0"
        y="0"
        width='48'
        height='48'
        xlinkHref={'https://source.unsplash.com/random/1500x1500/'}
        clipPath='url(#circleView)'
      />
      <circle
        cx='24'
        cy='24'
        r='22'
        fill='none'
        stroke='#FF62E1'
        strokeWidth='2'
        // @ts-ignore
        ref={(circle) => { this.circle = circle }} >
      </circle>
    </svg>
    )
  }
}

Codepen

This option leaves a transparent gap where the background can be seen, so may or may not be exactly what you want. The alternative is to create another circle with a stroke but no fill on top with a different radius again.

Alternative Codepen

Adding Border to Svg Image