fill-rule

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- fill-rule の既定値 -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  図形の中心は、無限大との間に 2 つの
  パス線分（赤いストロークで表示）があります。
  したがって、図形の外側にあると見なされ、
  塗りつぶされません。
  -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="150,0 121,90 198,35 102,35 179,90" />
</svg>

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- 交差するパスの区間に対する非ゼロ塗りつぶしルールの効果 -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  パスの区間が同じ方向に移動する図形内の図形に対する、
  塗りつぶしルールが非ゼロの場合の効果（どちらの正方形も
  時計回りに描画し、「右」方向に移動する）
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />

  <!--
  パス区間が反対方向に移動する図形内の図形に対する、
  塗りつぶしルールが非ゼロの場合の効果（1 つの正方形は
  時計回りに、もう一方は反時計回りに描画する）
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z" />
</svg>

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- 交差するパス区間に対する偶奇塗りつぶしルールの効果 -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  パス区間が反対方向に移動する図形内の図形に対する、
  塗りつぶしルールが非ゼロの場合の効果（両方の正方形が
  時計回りに、「右」に描画する）
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />

  <!--
  パス区間が反対方向に移動する図形内の図形に対する
  偶奇塗りつぶしルールの効果（1 つの正方形は時計回りに、
  もう一方は反時計回りに描画する）
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z" />
</svg>