CODEWITHSUNDEEP
htmlcsssvg
Yogi
Yogi

Reputation: 1579

what is stroke and stroke width in SVG and how is it rendered in the HTML?

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="5" fill="yellow"></circle></svg>

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="50" fill="yellow"></circle></svg>


<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="100" fill="yellow"></circle></svg>


<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="150" fill="yellow"></circle></svg>

with stroke-width 5with stroke-width 50with stroke-width 100with stroke-width 150

I've just started learning about SVGs and I am little confused about stroke and stroke width, and how they are rendered. In the developer tools, it looks strange whenever I increase the stroke width, the circle holding area increases but the dimensions are 100x100 always. I want to know if the stroke width is being added to the radius or am I confused on its rendering. Someone need to explain the concept behind the svgs or direct me to some pages so that i can learn deep

Upvotes: 3

Views: 3143

Answers (1)

Edison Biba
Edison Biba

Reputation: 4423

SVG stroke Property

  • The stroke property defines the color of a line, text or outline of an element

SVG stroke-width Property

  • The stroke-width property defines the thickness of a line, text or outline of an element

Check this w3schools article for svg properties

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

That problem that is showing to you is because the maximum stroke-width that you can apply to a circle with the radius 50px is 100px so it's a simple math. Your max stroke-width for r=50px is 2*r so it's 100px.

When you add stroke-width = 150 it means that the stroke-width radius need to be bigger to hande that. Chrome shows the circle as 100x100 and that's true the circle radius doesn't change only the stroke radius changes.

To prove that just change your stroke-width to 500px and you will clearly see how this is working and you will understand this.

This is also known as bug so you have this open issue in this link

Upvotes: 2

Related Questions