Ejercicio 114

Un ejemplo de lenguaje de marcas es SVG (Scalable Vector Graphics). Este formato nos permite definir gráficos vectoriales, es decir, gráficos generados a partir de elementos fundamentales como líneas, círculos, polígonos, etc.

La gran mayoría de navegadores pueden interpretar el formato SVG y es muy empleado para la creación de logotipos e iconos en Internet.

Copia el siguiente código SVG en un editor de texto y guárdalo como un archivo con extensión .svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
	<rect x="25" y="10" width="200" height="100" fill="orange" stroke="blue" stroke-width="3" />
	<rect x="225" y="25" width="50" height="85" fill="blue" stroke="red" stroke-width="8" />
	<circle cx="70" cy="110" r="25" fill="green" stroke="red"/>
	<circle cx="220" cy="110" r="25" fill="green" stroke="red"/>
	<path fill="pink" d="M 316 9 L 396 9 L 359 46 L 359 94 C 359 94 357 100 384 102
	    		L 384 103 L 331 103 L 331 102 C 356 100 354 94 354 94
			L 354 46 L 316 9 z " />
	<line stroke="green" stroke-width="8" x1="25" y1="150" x2="400" y2="150" />
	<polyline fill="red" points="20, 250 85, 350 120, 350" />
	<polygon fill="green" points="250,250 297, 284 279,340 220, 340 202, 284" />
	<ellipse fill="blue" cx="400" cy="300" rx="72" ry="50"/>
</svg>

A continuación, abre el archivo con un navegador web. El navegador deberá mostrar una imagen como la siguiente:

Haz zoom en la imagen y comprueba que no pierde definición. Esto es debido a que se trata de un formato vectorial: al ser generada a partir de elementos matemáticos fundamentales, la definición siempre es la misma independientemente de la escala.

Edita el fichero y comprueba los cambios en la imagen. Puedes apoyarte en los tutoriales de la W3C Schools.

Adicionalmente, puedes descargar este fichero SVG para hacer más pruebas.