Unidad 16. Ejercicio: Gráficos SVG

En este ejercicio practicaremos con los gráficos SVG. Para realizar este ejercicio no es necesario descargar ningún archivo, vamos a crear un archivo nuevo.

Ejercicio 1: Gráficos SVG.

Crea el archivo nuevo grafico_svg.html y copia el código que se muestra a continuación, puedes guardarlo en la carpeta de ejercicios/cursos-aulaclic:

 <!doctype html>
    <html lang="es">
      <head>
      <meta charset="utf-8" />
      <title>16. Ejercicio paso a paso SVG </title>
    </head>
    <body> 
    </body>
</html>

Para entender el sistema de coordenadas y la creación de formas básicas vamos a realizar un dibujo con varios elementos. En primer lugar, dentro del body, vamos a escribir la etiqueta svg con las dimensiones del área de dibujo o lienzo (viewport) y el tamaño del área de visualización (viewBox), además, para ver el viewport creamos un rectángulo de las mismas dimensiones con fondo azul claro:

<svg x="0" y="0" width="50%" height="auto" viewBox="0 0 300 120" >

<rect x="0" y="0" width="300" height="2000"  fill="#C1DBF7"  /> 

</svg>

Veremos esto:

En segundo lugar vamos a dibujar un círculo con el centro en (60,60) y un radio de 50 px., el contorno será de color negro con un grosor de 4 px., y un color de relleno verde:
```
 <circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="green" />
```
Recuerda que el origen de coordenadas (0,0) está en la esquina superior izquierda del viewport, como muestra esta imagen:
Seguidamente dibujamos un trazado con forma de trapecio y fondo rojo:
```
 <path d="M100,50 L200,50 180,100  120,100Z" fill="red" stroke="black" stroke-width="4"/>
```
Con el comando M100,50 colocamos el punto inicial (100,50) pero no dibujamos nada, el siguiente comando L200,50; dibuja una línea desde el punto actual (100,50) al punto (200,50); el siguiente comando 180,100; (la letra L se puede omitir) dibuja una línea desde el punto actual (200,50) al punto (180,100); el siguiente comando 120,100; dibuja una línea desde el punto actual (180,100) al punto (120,100); el comando Z, cierra el trazado, es decir, dibuja una línea entre el punto inicial (100,50) y el último punto (120,100).
A continuación situamos el trapecio detrás del círculo y creamos un degradado radial para el círculo:
```
<svg x="0" y="0" width="50%" height="auto" viewBox="0 0 300 120" >
<rect x="0" y="0" width="300" height="2000"  fill="#C1DBF7"  />
<path d="M100,50 L200,50 180,100  120,100Z" fill="red" stroke="black" stroke-width="4"/>
<circle cx="60" cy="60" r="50" stroke="black" stroke-width="1" fill="url(#circular)" />
<defs>
<radialGradient id="circular"  >
<stop offset="2%"  stop-color="#89f08d"/>
<stop offset="95%" stop-color="#0a4014"/>
</radialGradient>
</defs>
</svg>
```
Dentro de la etiqueta defs definimos el degradado radial, y le damos el identificador "circular", para asignar el gradiente al círculo, asignamos al relleno ese identificador: fill="url(#circular)"

Para especificar el degrado utilizamos dos etiquetas stop, donde indicamos un color con stop-color, y donde empieza y acaba el degradado con offset. En nuestro caso, el color verde claro (#89f08d) va desde el centro del círculo hasta el 2% del radio, ahí comienza el degradado que llega hasta el 95% del radio, a partir de ahí hasta el final el color es el verde oscuro (#0a4014).
Para finalizar insertamos un texto que sigue un trazado. El trazado se define como cualquier otro trazado, en este caso, hemos utilizado en arco:
```
<path id="aulaclic" d="M180,90 a55,65 0 0,1 290,195" /> 
```
Para crear el texto utilizamos la etiqueta text indicando el color, el tamaño, y la fuente; a continuación asignamos el trazado al texto con textPath:
```
 <text  fill="blue" font-size="30" font-family="verdana">
   <textPath xlink:href="#aulaclic">aulaClic  </textPath>
</text>
```

El código final es este:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />        
   <title>16. Ejercicio paso a paso SVG </title>      
  </head>      
<body> 
 <svg x="0" y="0" width="50%" height="auto" viewBox="0 0 300 120" >
   <rect x="0" y="0" width="300" height="2000"  fill="#C1DBF7"  />
   <circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="url(#circular)" />
   <path d="M100,50 L200,50 180,100  120,100Z" fill="red" stroke="black" stroke-width="4"/>
  <defs>
    <radialGradient id="circular"  >
      <stop offset="2%"  stop-color="#89f08d"/>
      <stop offset="95%" stop-color="#0a4014"/>
    </radialGradient>
    <path id="aulaclic" d="M210,110 a55,65 0 0,1 290,195" />
  </defs>
  <text fill="blue" font-size="30" font-family="verdana">
    <textPath xlink:href="#aulaclic">aulaClic  </textPath>
  </text>
</svg>
</body>  
</html>

Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies