Qué es un Archivo Vectorial SVG

Diseño Gráfico / Diseño Web 26 abril 2017

Qué es un Archivo Vectorial SVG

Para hacer una primera introducción al artículo “qué es un archivo vectorial SVG”, aquí va una definición propia, explicada de forma muy clara.

Es aquel archivo que vas a poder aumentarlo y reducirlo todo lo que quieras, pero que nunca va a perder calidad, siempre se va a mostrar nítido.

Esa definición se podría aplicar tanto a un archivo vectorial, a secas, como a un archivo vectorial SVG. Pero ahora entraremos más en detalle para ver en qué consiste este último.

Qué es SVG

Scalable Vector Graphics, es el significado de las siglas.

SVG es un formato de archivos vectoriales que se utiliza para web. Y esto empezó a utilizarse en el año 2001 ya que se empezó a convertirse en una recomendación de W3C. De esta forma los navegadores web empezaron a tenerlo en cuenta y empezaron a prepararse para poder mostrar este tipo de archivos.

Los archivos SVG se construyen a través del lenguaje de XML, que es un lenguaje aprobado por la W3C.

W3C es la comunidad internacional que estipula y desarrolla los estándares web. Es la biblia de las páginas web.

Hay que tener en cuenta que es un formato gráfico bidimensional. En donde no existe la profundidad y se basa en colores planos, rectas, curvas…

Los SVG también pueden formar animaciones, que estas van a ser simples y que pueden estar controladas a través de eventos.

Para qué se utiliza SVG

Los archivos con esta extensión, se utilizan en web para poder crear imágenes de una calidad muy buena. Y para que puedan ser adaptados a cualquier tamaño de pantalla, haciendo que estos nunca pierdan calidad.

También hay que tener en cuenta que los archivos están construidos en código XML, de tal forma que la velocidad de carga va a ser mucho menor que una imagen tradicional. Esto es debido a que el navegador está interpretando un código y esto lo va a leer más rápido que el tener que descargarse una imagen.

Cómo se utiliza SVG

Los archivos SVG se pueden incluir de dos formas diferentes en el código HTML.

  • Como una imagen:
    El archivo se guardaría fuera del html y desde este se le llamaría.
    <img src=’imagen.svg’>
    De esta forma el código habría que incluirlo en un archivo externo y este guardarlo con la extensión . svg.
  • Incluyendo el código
    Sería incluyendo el código del .svg dentro del html de forma que se puedan ir creando formas, como este armario raro.
    Código SVG Captura
    Captura de código para crear SVG
    Representación de código SVG
    Representación de código visualmente

Programas que trabajan con SVG

Para trabajar con SVG lo puedes hacer de dos formas:

  • A través de código:
    Esta es la parte difícil, ya que lo tendrás que ir haciendo de forma manual. Ir poco a poco construyendo tu .svg mientras que lo vas escribiendo en un programa de código.

    Es la peor opción, pero si tienes que hacer algo sencillo podría ser tu solución.

  • A través de programas
    Es la opción más recomendable ya que te podrás hacer más cosas con menos esfuerzo. Para ello lo podrás hacer a través de programas como pueden ser:

    • GoLive
    • Corel Drav
    • Illustrator

Para mí la última opción es la más recomendable, ya que tú puedes crear tu diseño en Illustrator, con todo lo que hayas querido de líneas, curvas… cualquier cosa que hayas creado en él y luego simplemente guardas como… y eliges .svg. Y ya tienes tu archivo .SVG listo.

Luego sólo tendrás que meterlo en tu web como imagen y lo tendrías dentro. También lo podrías poner dentro del código, pero entonces tendrías que abrir el archivo .svg y volver a copiarlo, sería más trabajo.

Atributos

En este punto te voy a nombrar todas las opciones que vas a tener para crear tus archivos .svg, de forma muy rápida sin entrar en detalle.

  • Color :(nominal, hexadecimal, funcionales, alpha)
  • Bordes
  • Ángulos, en punta, redondeados o planos
  • Extremos de líneas
  • Relleno de formas
  • Opacidad
  • Formas
    • Líneas
    • Rectángulos
    • Círculos
    • Elipse
    • Trayectoria (se dan las coordenadas y una línea pasa por esos puntos en concreto)
    • Enlazar diferentes puntos
    • Aberturas de espacios dentro de una forma
    • Textos
    • Agrupar varios formas
    • Duplicar los objetos
    • Recortar algunos objetos
    • Transformaciones, que se pueden aplicar a transformaciones

Si esta parte resulta interesante puedes comentarla para poder preparar un artículo específico de esta última parte para poder entender mejor cómo se construyen los .SVG.

Espero que con el artículo ya sepas en qué consiste un archivo vectorial .SVG y para qué sirve. Si tienes dudas o quieres ampliar la información comenta.

Datos del artículo
Qué es un Archivo Vectorial SVG
Título
Qué es un Archivo Vectorial SVG
Descripción Breve
Se explica qué es un archivo vectorial SVG, entrando en detalle viendo para qué, cómo y con qué puedes llegar a utilizarlo.
Autor
Publicado en:
aexpositogonzalez.com
Logotipo:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *