72

I'm not familiar enough with svg drawing.

I have this arrow in SVG format. How can I increase the thickness of the arrow?

<div style="width: 100px; height:100px;">
  <svg viewBox="0 0 100 100">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
  </svg>
</div>

3 Answers 3

102

You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.

OLD:
<div style="width: 100px; height:100px;">
  <svg viewBox="0 0 100 100">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
  </svg>
</div>
<br>
NEW:
<div style="width: 100px; height:100px;">
  <svg viewBox="-10 -10 120 120">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)" stroke="black" stroke-width="10"></path>
  </svg>
</div>

1
  • 3
    This answer is technically not using CSS.
    – gurtner
    Oct 23, 2021 at 0:35
9

The stroke should be the background color and the stroke-width between 1 and 2

 svg path {
      stroke: #ffffff; /* Background color against your svg */
      stroke-width: 1px; /*Between 1px and 2px*/
    }
8

You can adjust stroke and stroke-width with CSS:

div svg path {
  stroke: #000000;
  stroke-width: 3px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.