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

<svg class="img-responsive" version="1.1" id="Capa_1"

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 ">

<g id="todo" style="transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)"

class="a">

<g id="b1270">

<g id="toro osb1611260954" class="a1270" style="transform:matrix3d

(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)">


<path d="m36.1624,731.753c-6.9775-16.5937 21.7169-28.7174 32.8571-42.8571 7.9623

-10.1061 17.2589-19.2224 24.2857-30 10.2358-15.6996 16.7772-33.5265 25.7143-50

9.5559-27.3902 11.9672-49.3606 34.2857-60-14.1025-29.2538 2.566-61.0557 5.7143-

91.4286-7.0256-31.6946-6.025-60.2585 12.8572-88.5714-4.457-13.4215-35.412-

16.9344-30-30 3.6446-8.7988 22.6498,7.4591 28.5714,0-49.2364-29.3826-57.8598-

92.1737-24.2857-104.2857-16.8153,56.3196 12.9463,60.8333 37.1429,74.2857 8.2849-

1.7373 17.0329-22.9027 77.1428-7.1429 18.083,1.6474 25.2268-13.846 58.5714,10

22.8283-13.8571 58.4563,14.6469 52.8571-74.2857 53.4778,89.8433-31.4908,64.635-

20,95.7143 2.2217,6.0089 15.1894,6.5147 14.2857,12.8572-2.163,15.1812-

35.86,5.7123-41.4286,20-11.7206,30.0724-2.9029,66.1325 35.7143,90 35.8971,8.326

49.3258,32.976 80,55.7143 42.6006-.6588 85.3826,23.525 108.5714,32.8571 146.0699

-84.8465-56.5656-37.3761-48.5714-94.2857 4.1547-26.6151 41.0264-35.5585 57.1429-

57.1429 11.3461-15.1955-25.1355-44.0457 27.1429-50-13.1512,26.7972 24.149,22.5866

14.2437,70.1015-48.8833,24.5331-83.4329,18.0782-71.8049,48.8165 42.6525,7.8687

158.0737,8.9842 42.3372,94.0109 12.5175,17.9569 38.863,19.1402 53.7955,54.2139

12.183,14.7807 22.5251,31.0139 32.8571,47.1429 12.6904,7.2452 29.9876,12.3599

38.5714,65.7143 9.2186,16.0938 35.6296,32.08 27.1429,48.5714-3.9463,7.6683-

15.4812,3.5597-25.7143,2.8571-9.5614-6.2965-4.4398-22.8497-10-32.8571-21.5176-

7.2137-17.4763-25.6968-30-34.2857-50.0257-14.9105-48.1921-30.9025-74.2857-27.1429

.8055,59.0851-22.5007,30.986-32.8571,24.2857-15.4674,27.4347-32.7313,7.7567-

38.5714-5.7143-9.05-.4279-18.7811-2.0595-27.1428,1.4286-6.5334,2.7254-

15.0067,7.2421-15.7143,14.2857-1.7706,17.6266 36.1816,25.7914 31.4286,42.8571-

4.9827,17.8905-33.0675,18.6412-51.4286,21.4286-15.1316,2.2971-11.8576,4.5404-

45.7143-4.2857-3.5262-14.7785 39.9873-9.1585 38.5714-24.2857-1.574-16.8162-

33.0184-9.3108-47.1429-18.5714-6.195-4.0617-15.1033-8.3317-15.7143-15.7143-.6757

-8.1648 17.5519-12.4865 14.2857-20-47.394,11.704-62.9362.3264-87.1429-11.4286-

10.6619,2.5507-18.2096,12.2171-27.1429,18.5714-11.0981,7.8943-21.8988,16.1986-

32.8571,24.2857-9.0427,6.6734-18.7271,12.5516-27.1429,20-8.8287,7.8139-

12.7783,23.1489-24.2857,25.7143-16.485,3.675-45.1591-1.7987-47.1429-18.5714-

2.7309-23.0896 41.9546-22.3958 57.1429-40 13.9114-16.1242 35.8963-37.1463

28.5714-57.1429-44.6272,12.4254-55.9656-4.9993-60-25.7143-7.8923,1.8631-

9.8671,12.9527-15.7143,18.5714-21.7727,20.9223-47.5679,26.0304-61.4286,52.8571-

4.8138,9.3169-3.4237,27.5108-11.4286,34.2857-12.0827,10.2262-41.0072,8.8775-

47.1429-5.7143z" fill="#000000">
</path>
</g>
</g> 
</g> 
</svg>

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 ¨<svg ¨

Luego podremos ver las etiquetas  ¨<g ¨que son agrupaciones que van englobando el texto de los gráficos .

Luego tenemos la etiqueta¨<path ¨que es la representación alfanuméricamente lo que sería nuestro vector

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

<svg width="140" height="140"  xmlns="http://www.w3.org/2000/svg">

 

<circle cx="70" cy="70" r="60" fill="red" stroke="blue" stroke-

width="4"></circle>

 

</svg>

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 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