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

Robert Longson · Accepted Answer · 2013-02-07T13:26:22.027

43

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

edited Feb 07 '13 at 13:26

answered Feb 07 '13 at 12:35

Robert Longson

110,343
23
240
227

1

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

score 18 · Answer 2 · answered Jun 13 '19 at 15:30

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. :)

very intuitive. tested in Firefox & Chromium – Hartmut Pfarr Dec 19 '21 at 22:02 — Hartmut Pfarr, Dec 19 '21 at 22:02

Adding border to SVG image

2 Answers2

Linked

Related