Web design

A continuación vamos hablar de los gráficos svg

Lo primero  Que es  un gráfico svg.

• SVG es un formato de gráficos vectoriales bidimensionales,
• Los gráficos pueden ser tanto estáticos como animados,
• Dentro del código svg podremos colocar, figuras simples vectoriales, imágenes, videos, propiedades css y código javascript  en formato de lenguaje de marcado XML.
• Son dibujos escalables, no pierden definición al no ser pixeles
• Modificables en un editor de texto
• Con gran potencial para generar gráficos online y modificación por programación

Por todo esto conocer que es  un grafico svg debería ser asignatura obligatoria en diseño gráfico.

Pero una de las virtudes que yo veo a este tipo de formato es que el gráfico esta generado por texto y si el formato es correcto  es interpretado por los exploradores y por los programas gráficos,

Pongamos un ejemplo

Aquí tenéis un grafico svg en un explorador.

Este grafico esta generado a partir de un texto y guardado con la extensión “.svg “ .

Vamos a ver el archivo el texto

xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink»

x=»0px» y=»0px» preserveAspectRatio=»none» viewBox=»0 0 1470 800 «>

class=»a»>

Como veis no deja de ser una hoja con una serie de apartados que vamos a ir poco a poco viendo en los video tutoriales

Aunque no es el objeto de este curso enseñar gráficos svg, si es interesante saber que se copia y que se pega  en una pagina web

En este archivo podemos ver un encabezado que empieza en la etiqueta ¨

Luego podremos ver las etiquetas  ¨

Luego tenemos la etiqueta¨

Ya por ultimo  tenemos las etiquetas de cierre tanto de los grupos¨</g ¨ como de la cabecera ¨</svg ¨

Vamos a Realizar una pequeña  demostración del potencial que tienen la manipulación del  texto,

Vamos,modificar  la propiedad “fill” que es la que da el color,

Colocamos  un color azulado y guardamos el archivo acordaros de  cambiar la extensión a ”.svg” y

la lanzamos nuevamente a nuestro explorador ,

Podremos ver como nuestro vector ha cambiado de color.

Dentro del código svg  no solo podremos encontrar la figura “path” si no que hay otras figuras primitivas

Aquí os muestro el texto, son bastante intuitivas de cómo han sido fabricadas,

Como son

Circle, polygon ,line, polyline, rect ya los comentados path

Si este archivo lo arrastramos al explorador veremos el resultado de la interpretación que realiza el explorador de ese texto svg para convertirlo en imágenes como son  estas figuras primitivas.

Juguemos un poquito más con el código y cambiemos mas propiedades  por supuesto no hace falta que lo hagáis solo son demostraciones

Vamos a crear un nuevo archivo de texto que le pondremos circulo.svg como nombre

Escribiremos en el esto

width=»4″>

Aquí aparecen nuevos conceptos como son ;

El ancho y el alto de nuestro dibujo svg dentro de la etiqueta “svg”

Un Namespace que sirve para que el archivo xml sea interpretado correctamente por el explorador

En el circulo podemos cambiar donde está el centro del grafico svg .

El color  con la propiedad fill y la propiedad stroke y stroke –whidth  que modifica el color y el grosor del contorno

Asi podemos modificar las propiedades del los gráficos con solo modificar el texto,¿ interesante no¿ sobre todo cuando a lo largo del cursillo la uniremos a eventos y crearemos cambios de colores al pasar 1 segundo  o poner grosores , lo que vuestra imaginación pueda hacer

Bien queda demostrado que se pueden crear gráficos vectoriales y modificarlos  solo escribiendo  en un editor de texto muy simple

Por suerte tenemos herramientas más profesionales como software de sobremesa los mas conocidos son Adobe illustrador, y la versión gratuita  INKSCAPE  donde se pueden manipular los gráficos vectoriales svg  exportarlos e importarlos para crear animaciones

y  por supuesto nuestro programa online de creador de logos https://animacionesweb.online donde en próximos videos veremos cómo crear logotipos  banner en formatos svg y dales animación  y todo online y gratis no dejes de subscribirte y dale un like, mandame tus progresos  nos vemos en el siguiente video de creación de  las figuras para logotipos online