Polígonos y polilíneas

Los polígonos (<polygon>) y las polilíneas (<polylines>) representan formas cerradas o abiertas mediante líneas rectas especificadas por una lista de vértices pasada en el atributo points. La única diferencia entre ellos es que los polígonos cierran la forma. Para cerrar una polilínea, es necesario repetir las coordenadas iniciales. También tienen un atributo fill-rule que controla el orden de curvado y determina si se dibujará un agujero dentro de la forma cuando un contorno se cruce consigo mismo.

El siguiente código crea dos polígonos. El segundo tiene una regla de relleno que revelará un agujero:

<svg width="600" height="300">
    <polygon
        points="150,150 50,150 100,20 150,50 200,200 50,200 20,154 48,82 32,20" fill="blue" />
    <polygon
        points="450,150 350,150 400,20 450,50 500,200 350,200 320,154 348,82 332,20" fill="red" fill-rule="evenodd" />
</svg>

El resultado se muestra a continuación:

SVG polygon + fill-rule