Svg Path with Border

SVG path with border

You have to draw the path as an outline as so:

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220">    <path fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>    <path fill="#fff" stroke="#00b400" stroke-width="4"      d="M 159.8 30.3        h -110        v 120        h-20        l 30 40           30 -40        h-20        v-100        h90"/></svg>

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;
}

SVG path border radius

If your path was just a single open curve that ran from 12 o'clock to 10 o'clock, then it would be easy. You could just add stroke-linecap="round".

<svg xmlns="http://www.w3.org/2000/svg">  <path d="M 80 18.75 A 61.25 61.25 0 1 1 30.45 44.00"        fill="none" stroke="black" stroke-width="17.5" stroke-linecap="round"></path></svg>

Add border to an svg

Sure - just draw a path with a stroke on top of the shape.

<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">           <path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>                      <path fill="none" stroke="grey" stroke-width="1px" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0"></path>     </svg>

Specify border for svg path element

You seem to have forgotten to close your path with Z like

<svg  width=320 height=50 viewBox="0 0 320 50">  <path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8 Z" stroke-width="3" stroke='#3fa9f5' ></path></svg>

Changing the stroke color for an inline SVG

The CSS in the SVG is inline CSS and so is being applied after your stylesheet and thus is overriding it.

The simplest solution is to extract the CSS from the SVG and put it all in your stylesheet.

.highlight {
  fill: none;
  stroke-width: 3;
  stroke: #491EC4;
}

.highlight:hover {
  /* background-color: pink; */
  stroke: red;
}

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " />
</svg>

Svg Path with Border