Ejercicios unidad 16: Introducción a SVG. Gráficos redimensionables
En este ejercicio practicaremos con los gráficos SVG. Para realizar este ejercicio utilizaremos el archivo svg_propuesto_ini.html que puedes descargarte de la carpeta ejercicios/unidad-16/svg_propuesto_ini.html y guardarlo en la carpeta de ejercicios/unidad16 (o copiar el código que se muestra a continuación).
Ejercicio 1: Gráficos SVG.
- Partimos del archivo svg_propuesto_ini.html que contiene este código:
<!doctype html>
<html lang="es">
<head>
<title>16. Ejercicio propuesto SVG </title>
<link href='https://fonts.googleapis.com/css?family=Chakra+Petch' rel='stylesheet' type='text/css'>
</head>
<body>
<svg x="0" y="0" width="500" height="400" >
<rect x="0" y="0" width="500" height="400" fill="grey" />
</svg>
</body>
</html>
- Para practicar creando gráficos SVG te proponemos realizar un gráfico como el que ves a continuación:
- El archivo svg_propuesto_ini.html que crea un lienzo SVG de 500 x 400, dibuja un rectángulo con esas medidas y le da color gris para que te sirva de referencia, una vez acabado el ejercicio puedes borrar este rectángulo. Este archivo también tiene el enlace para usar la fuente 'Chakra Petch'.
- Hay distintas formas de resolver este ejercicio, para comprobar la solución te aconsejamos que lo hagas como nosotros, de la manera siguiente: Un símbolo para la casa compuesto por un trazado con lineto para el contorno de la casa y un rectángulo para la puerta. Un símbolo para la nube con un trazado con arcos elípticos y un degradado radial para el relleno. Un símbolo para la gota de agua compuesto por una sola línea, para la lluvia hemos creado un símbolo compuesto por seis gotas. Un rectángulo con degradado lineal para el cielo y otro para la tierra. El texto usa la fuente 'Chakra Petch' y la fuente 'times' para la palabra "aula".
Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.
Cursos Informática Gratuitos
