Adding border to SVG image

Question

Is it possible to wrap a SVG image inside a border (that is - putting a border from CSS around that image) .

Havn't really used svg but i think you can use css rules. Have you tried simply adding it ?µ — Jean-Georges, Feb 07 '13 at 12:35

score 48 · Accepted Answer · edited Jun 13 '23 at 19:02

48

Draw a <rect> around the image using fill="none". You can use the stroke property to set a border.

edited Jun 13 '23 at 19:02

Mike Lowery

2,630
4
34
44

answered Feb 07 '13 at 12:35

Robert Longson

118,664
26
252
242

1

This is the correct answer when it comes to svg:image. – koullislp Jun 02 '16 at 20:31

score 25 · Answer 2 · edited Oct 25 '22 at 14:13

25

Here are some examples, tested in Firefox:

<svg width="100" height="100" style="border:1px solid black">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<br><br>

<svg width="300" height="100" style="border:1px solid black">
  <rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" />
</svg>

<br><br>

<svg width="170" height="170" style="border:1px solid black">
  <rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>

Hope it helps. :)

edited Oct 25 '22 at 14:13

ruth

29,535
4
30
57

answered Jun 13 '19 at 15:30

Pedro Figueiredo

457
5
13

very intuitive. tested in Firefox & Chromium – Hartmut Pfarr Dec 19 '21 at 22:02
I like the second option. – tirenweb Feb 04 '22 at 13:53

score 5 · Answer 3 · answered Jul 28 '22 at 03:04

If you want to add a border to some random geometric SVG shapes from CSS it's possible to do it with outline CSS property.

ellipse {
  outline: 1px solid red;
  outline-offset: 2px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    http-equiv="X-UA-Compatible"
    content="ie=edge"
  >
  <title>Demo</title>
</head>

<body>

<svg width="224" height="112" viewBox="0 0 224 115" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="112.5" cy="84" rx="28.5" ry="28" fill="#D9D9D9"/>
<path d="M26.5 0L52.9138 45H0.0862255L26.5 0Z" fill="#D9D9D9"/>
<path d="M196.5 0L202.899 19.3475H223.605L206.853 31.305L213.252 50.6525L196.5 38.695L179.748 50.6525L186.147 31.305L169.395 19.3475H190.101L196.5 0Z" fill="#D9D9D9"/>
</svg>



</body>

</html>

This solves the problem with CSS, which I think is closer to the spirit of the question. — s6mike, Oct 18 '22 at 12:04

Adding border to SVG image

3 Answers3

Linked

Related