Creación de formas básicas en SVG

SVG contiene los siguientes elementos para la creación de formas básicas: RECT, CIRCLE, ELLIPSE, LINE, POLYLINE, POLYGON. Además estaría el elemento PATH con el que se podría crear cualquier forma incluida éstas. Vamos a ver cómo se crean las diferentes formas básicas en SVG y desde JavaScript. Hemos de tener en cuenta, que para crear las formas en JavaScript debemos usar métodos DOM ‘namespace-aware’.

Rectángulo

SVG

<rect x="5" y="5" width="50" height="50" fill="skyblue" stroke="black" stroke-width="2"/>

1	<rect x="5" y="5" width="50" height="50" fill="skyblue" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function crearForma() {
                var forma = document.createElementNS(svgns, "rect");
                forma.setAttributeNS(null, "x", 5);
                forma.setAttributeNS(null, "y", 5);
                forma.setAttributeNS(null, "width",  50);
                forma.setAttributeNS(null, "height", 50);
                forma.setAttributeNS(null, "fill", "skyblue");
                forma.setAttributeNS(null, "stroke", "black");
                forma.setAttributeNS(null, "stroke-width", "2");

                svgDocument.documentElement.appendChild(forma);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function crearForma() {

var forma = document.createElementNS(svgns, "rect");

forma.setAttributeNS(null, "x", 5);

forma.setAttributeNS(null, "y", 5);

forma.setAttributeNS(null, "width", 50);

forma.setAttributeNS(null, "height", 50);

forma.setAttributeNS(null, "fill", "skyblue");

forma.setAttributeNS(null, "stroke", "black");

forma.setAttributeNS(null, "stroke-width", "2");

svgDocument.documentElement.appendChild(forma);

}

]]>

Rectángulo redondeado

Los atributos rx y ry son los radios de los ejes de las elipses usados para redondear las esquinas del rectángulo.

SVG

<rect x="5" y="5" width="50" height="50" rx="10" ry="10" fill="skyblue" stroke="black" stroke-width="2"/>

1	<rect x="5" y="5" width="50" height="50" rx="10" ry="10" fill="skyblue" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function makeShape() {
                var shape = document.createElementNS(svgns, "rect");

                shape.setAttributeNS(null, "x", 5);
                shape.setAttributeNS(null, "y", 5);
                shape.setAttributeNS(null, "rx", 10);
                shape.setAttributeNS(null, "ry", 10);
                shape.setAttributeNS(null, "width",  50);
                shape.setAttributeNS(null, "height", 50);
                shape.setAttributeNS(null, "fill", "skyblue");
                shape.setAttributeNS(null, "stroke", "black");
                shape.setAttributeNS(null, "stroke-width", "2");

                svgDocument.documentElement.appendChild(shape);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function makeShape() {

var shape = document.createElementNS(svgns, "rect");

shape.setAttributeNS(null, "x", 5);

shape.setAttributeNS(null, "y", 5);

shape.setAttributeNS(null, "rx", 10);

shape.setAttributeNS(null, "ry", 10);

shape.setAttributeNS(null, "width", 50);

shape.setAttributeNS(null, "height", 50);

shape.setAttributeNS(null, "fill", "skyblue");

shape.setAttributeNS(null, "stroke", "black");

shape.setAttributeNS(null, "stroke-width", "2");

svgDocument.documentElement.appendChild(shape);

}

]]>

Círculo

Basado en el centro del círculo que define la posición del mismo, en función de los atributos cx y cy, y del radio del círculo definido por el atributo r.

SVG

<circle cx="30" cy="30" r="25" fill="skyblue" stroke="black" stroke-width="2"/>

1	<circle cx="30" cy="30" r="25" fill="skyblue" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function crearForma() {
                var forma = document.createElementNS(svgns, "circle");

                forma.setAttributeNS(null, "cx", 30);
                forma.setAttributeNS(null, "cy", 30);
                forma.setAttributeNS(null, "r",  25);
                forma.setAttributeNS(null, "fill", "skyblue");
                forma.setAttributeNS(null, "stroke", "black");
                forma.setAttributeNS(null, "stroke-width", "2");

                document.documentElement.appendChild(forma);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function crearForma() {

var forma = document.createElementNS(svgns, "circle");

forma.setAttributeNS(null, "cx", 30);

forma.setAttributeNS(null, "cy", 30);

forma.setAttributeNS(null, "r", 25);

forma.setAttributeNS(null, "fill", "skyblue");

forma.setAttributeNS(null, "stroke", "black");

forma.setAttributeNS(null, "stroke-width", "2");

document.documentElement.appendChild(forma);

}

]]>

Elipse

Es similar al círculo pero con dos rádios, rx y ry.

SVG

<ellipse cx="55" cy="30" rx="50" ry="25" fill="skyblue" stroke="black" stroke-width="2"/>

1	<ellipse cx="55" cy="30" rx="50" ry="25" fill="skyblue" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function crearForma() {
                var forma = document.createElementNS(svgns, "ellipse");
                forma.setAttributeNS(null, "cx", 55);
                forma.setAttributeNS(null, "cy", 30);
                forma.setAttributeNS(null, "rx", 50);
                forma.setAttributeNS(null, "ry", 25);
                forma.setAttributeNS(null, "fill", "skyblue");
                forma.setAttributeNS(null, "stroke", "black");
                forma.setAttributeNS(null, "stroke-width", "2");

                svgDocument.documentElement.appendChild(forma);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function crearForma() {

var forma = document.createElementNS(svgns, "ellipse");

forma.setAttributeNS(null, "cx", 55);

forma.setAttributeNS(null, "cy", 30);

forma.setAttributeNS(null, "rx", 50);

forma.setAttributeNS(null, "ry", 25);

forma.setAttributeNS(null, "fill", "skyblue");

forma.setAttributeNS(null, "stroke", "black");

forma.setAttributeNS(null, "stroke-width", "2");

svgDocument.documentElement.appendChild(forma);

}

]]>

Línea

Segmento con un punto inicial y otro final.

SVG

<line x1="5" y1="5" x2="50" y2="50" stroke="black" stroke-width="2"/>

1	<line x1="5" y1="5" x2="50" y2="50" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function crearForma() {
                var forma = document.createElementNS(svgns, "line");
                forma.setAttributeNS(null, "x1", 5);
                forma.setAttributeNS(null, "y1", 5);
                forma.setAttributeNS(null, "x2", 50);
                forma.setAttributeNS(null, "y2", 50);
                forma.setAttributeNS(null, "stroke", "black");
                forma.setAttributeNS(null, "stroke-width", "2");

                svgDocument.documentElement.appendChild(forma);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function crearForma() {

var forma = document.createElementNS(svgns, "line");

forma.setAttributeNS(null, "x1", 5);

forma.setAttributeNS(null, "y1", 5);

forma.setAttributeNS(null, "x2", 50);

forma.setAttributeNS(null, "y2", 50);

forma.setAttributeNS(null, "stroke", "black");

forma.setAttributeNS(null, "stroke-width", "2");

svgDocument.documentElement.appendChild(forma);

}

]]>

Polilínea

Es un conjunto de líneas rectas conectadas, que generalmente definen formas abiertas:

SVG

<polyline points="5,5 45,45 5,45 45,5" fill="none" stroke="black" stroke-width="2"/>

1	<polyline points="5,5 45,45 5,45 45,5" fill="none" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function crearForma() {
                forma = document.createElementNS(svgns, "polyline");
                forma.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");
                forma.setAttributeNS(null, "fill", "none");
                forma.setAttributeNS(null, "stroke", "black");
                forma.setAttributeNS(null, "stroke-width", "2");

                svgDocument.documentElement.appendChild(forma);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function crearForma() {

forma = document.createElementNS(svgns, "polyline");

forma.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");

forma.setAttributeNS(null, "fill", "none");

forma.setAttributeNS(null, "stroke", "black");

forma.setAttributeNS(null, "stroke-width", "2");

svgDocument.documentElement.appendChild(forma);

}

]]>

Polígono

Es un conjunto de líneas rectas conectadas, que definen una forma cerrada.

SVG

<polygon points="19,54 5,30 19,5 48,5 62,30 48,54" fill="skyblue" stroke="black" stroke-width="2"/>

1	<polygon points="19,54 5,30 19,5 48,5 62,30 48,54" fill="skyblue" stroke="black" stroke-width="2"/>

JavaScript

        <![CDATA[
            var svgns = "http://www.w3.org/2000/svg";

            function crearForma() {
                var forma = document.createElementNS(svgns, "polygon");
                forma.setAttributeNS(null, "points", "19,54 5,30 19,5 48,5 62,30 48,54");
                forma.setAttributeNS(null, "fill", "skyblue");
                forma.setAttributeNS(null, "stroke", "black");
                forma.setAttributeNS(null, "stroke-width", "2");

                svgDocument.documentElement.appendChild(forma);
            }
        ]]>

1

2

3

4

5

6

7

8

9

10

11

12

13

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function crearForma() {

var forma = document.createElementNS(svgns, "polygon");

forma.setAttributeNS(null, "points", "19,54 5,30 19,5 48,5 62,30 48,54");

forma.setAttributeNS(null, "fill", "skyblue");

forma.setAttributeNS(null, "stroke", "black");

forma.setAttributeNS(null, "stroke-width", "2");

svgDocument.documentElement.appendChild(forma);

}

]]>

También podemos crear formas con programas como Illustrator o Inkscape. Si estas formas básicas las construimos desde estos programas, veremos que Illustrator usa las formas básicas de SVG mientras que InkScape únicamente usa RECT, mientras que el resto de formas las convierte en PATH.