Почему SVG больше чем DIV?

Question

[ar5]

Друзья, объясните пожалуйста, почему в данном случае SVG больше чем див, почему он вылезает за рамки блока?
https://jsfiddle.net/j3g7ud91/1/

Comments

[ar5]

Почему не получается как в этом примере?
codepen.io/desandro/pen/gbMjVP

Answer 1

[Urvin]

svg
{
  box-sizing: border-box;
}

Comments

[ar5]

codepen.io/desandro/pen/gbMjVP а почему в данном примере и без этого работает?

[0leg5ergeev]

ar5: поотму что в своём примере к svg вы приписали style="width:100%; height:100%"

Answer 2

[Антон Измайлов]

Потому что вы задали ширину и высоту в 100%, все просто.

Comments

[ar5]

А как по другому?

[Антон Измайлов]

ar5: https://jsfiddle.net/yepy9z0r/