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

Question

I'am injecting SVG elements into a webpage thanks to D3js. I have difficulties to style these elements since syntaxes like

path { border: 3px solid green; }

doesn't work.

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

http://www.w3.org/TR/SVG/propidx.html – Hashem Qolami Aug 20 '13 at 08:34 — Hashem Qolami, Aug 20 '13 at 08:34

score 80 · Accepted Answer · edited Apr 28 '20 at 20:23

80

In CSS, something like:

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

edited Apr 28 '20 at 20:23

Souleste

1,887
1
12
39

answered Aug 20 '13 at 08:27

Hugolpz

17,296
26
100
187

1

Worked for me: Chrome 27+, Linux. – Hugolpz Feb 27 '14 at 19:55
1

This code creates an outline of the original shape. In order to add an outline to an existing solid shape, I removed the `fill: none;;` line. Worked very nicely! Thank you! – John Crawford Sep 29 '16 at 20:42
Editing the SVG file and applying it to the style attribute worked like a charm. Couldnt get it to work in an html file for some reason but worked well otherwise. Thanks! – Devin Carpenter Aug 01 '19 at 03:29
How to make the outline a different color? And keep the fill color intact? – redanimalwar Mar 03 '21 at 14:31
@redanimalwar: change the `stroke: #646464` value + simply remove `fill: none;`. – Hugolpz Mar 03 '21 at 16:28

Souleste · Answer 2 · 2023-06-06T18:09:31.170

Try adding CSS filter() dropshadow (this can be applied on any svg: <img>, background-image, in the dom, etc.)

or

SVG <filter> <feDropShadow>

svg {
  fill: #fff;
}

#example_1 {
  filter: 
    drop-shadow(-1px -1px 0px #3e68ff) 
    drop-shadow(2px -1px 0px #3e68ff) 
    drop-shadow(2px 2px 0px #3e68ff)
    drop-shadow(-1px 2px 0px #3e68ff)
}

<svg id="example_1" width="100" height="100" viewBox="0 0 288 288">
        <path class="st0" d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18,68.18
        c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
        c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
        c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
        c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
        c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
        C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
        c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c15.98,0,22.02-1.48,34.32-4.84
        C181.52,163.65,184.9,166.55,184.23,169.45z"></path>
</svg>
<svg id="example_2" width="100" height="100" viewBox="0 0 288 288">
    <defs>
        <filter id="shadow">
            <feDropShadow dx="-2" dy="-2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
            <feDropShadow dx="2" dy="-2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
            <feDropShadow dx="2" dy="2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
            <feDropShadow dx="-2" dy="2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
        </filter>
    </defs>
  <g filter="url(#shadow)">
    <path d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18,68.18
      c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
      c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
      c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
      c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
      c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
      C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
      c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c15.98,0,22.02-1.48,34.32-4.84
      C181.52,163.65,184.9,166.55,184.23,169.45z"></path>
  </g>
</svg>

You could also create a javascript function that clones each of the elements within the svg, removing fill/stroke attributes, and wrapping them in a g tag that has fill="none" and stroke attributes set. Then prepend that to the svg.

I was able to use the drop-shadow filter for `` tags loading svg files as well. I found that 0.5 even works as well, so you can get some really fine control. It also gets a little finer if you move the shadow just x and y, not x+y, so `drop-shadow(0px 0.5px 0px #ccc) drop-shadow(0px -0.5px 0px #ccc) drop-shadow(0.5px 0px 0px #ccc) drop-shadow(-0.5px 0px 0px #ccc)` — brandonscript, Jun 10 '20 at 05:39
This works for any arbitrary svg and is a great answer thank you. — Phani Rithvij, Jul 12 '20 at 17:04

score 18 · Answer 3 · edited Mar 12 '18 at 13:37

18

For the question: How to add border/outline/stroke to SVG elements in webpages with CSS ?

You can do in CSS:

path { outline: 3px solid green; }

Please note as of 2018 it is supported by chrome and safari, but might not be available across all modern browsers. See example below:

I applied outline via CSS to a <g> group with paths inside. In static it looks good. In dynamic (dragging) I can see periodically these artifacts (to the left)

UPDATE:

if outline is "solid" - there are no artifacts
safari mobile doesn't support outline on <g> elements...

edited Mar 12 '18 at 13:37

Mr Lister

45,515
15
108
150

answered Mar 09 '18 at 18:54

Sergey Rudenko

8,809
2
24
51

2

ALso just realized that outline is not part of the standard properties for SVG...so this maybe something like "use at your own risk"... – Sergey Rudenko Mar 09 '18 at 20:08
any link source for this Sergey? – Pascal Jul 13 '18 at 19:30
Simple and works with image too. – ecstrema Jan 10 '22 at 01:35

score 3 · Answer 4 · answered Nov 25 '22 at 17:20

3

From this answer in a similar question, which actually creates an outline effect instead of stroke:

  stroke: black;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;

answered Nov 25 '22 at 17:20

J0ANMM

7,849
10
56
90

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

4 Answers4