Ventajas del gráfico svg basado en texto

Ventajas del gráfico svg , este blog está orientado a  formación y diseño de paginas web de nuestra página principal https://animacionesweb.online

Las siglas S.V.G  pertenecen a  Scalable Vector Graphics, en castellano seria como gráficos basados en vectores escalables

SVG es un estándar Web abierto basado en texto

Es un formato que ya existía desde finales de siglo xx pero hasta ahora no se le ha dado cobertura total en los exploradores web

svg tiene la extensión en el nombre  .svg

SVG es un estándar Web abierto basado en texto

Esto es lo que nos encontramos dentro de un grafico svg si lo abrimos desde con un blog de notas

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

<circle x="200" y="200" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<rect x="0" y="200" width="200" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb (0,0,0)" />

</svg>

una de las Ventajas del gráfico svg es solo texto donde podemos encontrar varias secciones como cabecera y figuras simples con etiquetas de apertura y cierre que conforman el grafico svg etc,

En diferentes blog iremos explicando cada una de esas partes para que puedas dominar y modificar tu svg con solo modificar el texto que lo contiene,

Si quieres juguetear con este grafico puede hacer esto

  1. Desde el escritorio por ejemplo, boton derecho y abre nuevo documento de texto.
  2. Cambia la extensión del archivo para que sea el nombre.svg (seguramente te dira si quieres cambiar la extensión del archivo)
  3. Copia y pega el texto del código svg anterior y guarda .
  4. Arrastra el nombre del archivo a la cabecera de un explorador para abrir el archivo con el Explorer preferido
  5. Si todo ha ido bien se verán las figuras como si en una página web se tratase
  6. Cambia en el texto original la propiedad “ fill” que es el color del elemento y le pones otro
  7.  guardas y reinicias el explorador

Poder modificar un svg al ser texto es una ventaja muy considerable pues podemos acceder a sus propiedades ya sea escribiendo directamente sobre su código , como hemos realizado en el ejercicio anterior cambiando los colores de las figuras o podemos acceder a las propiedades a través de código  javascript , creando un montón de combinaciones , poco a poco iremos colocando ejemplos de cómo modificar y crear animaciones web con gráficos svg y poderlos animar  , ala izquierda podrás ver ejemplos de animaciones web creadas con este formato y realizadas desde nuestra página web cabecera https://animacionesweb.online

Un saludo y gracias por tu atención

Deja un comentario