Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 28/10/2012

Introduccion a los Gráficos Vectoriales Redimensionables (SVG)

Los Gráficos Vectoriales Redimensionables (del inglés Scalable Vector Graphics) o SVG es una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en formato XML.

Dicho de otra manera más sencilla, SVG es un formato que permite definir gráficos definidos como texto basados en la especificación del lenguaje XML y su desarrollo está a cargo del consorcio W3C (World Wide Web Consortium).

Al margen de su naturaleza tecnológica, el formato SVG cuenta con numerosas ventajas que deberíamos tener en cuenta. En primer lugar, es un formato estandar gratuito, es decir, que cualquiera puede utilizarlo.

En segundo lugar, SVG es el medio ideal para diseñar bonitos gráficos con un peso muy aceptable. No es un formato fácil de manejar pero sus posibilidades son mucho más espectaculares de lo que uno se imagina.

A veces es impresionante ver las cosas que algunas personas hacen en formato SVG sin usar compresiones o incrustaciones, sólo XML.

Ventajas de utilizar SVG:

  • Renderizado con antialiasing.
  • Patrones de relleno y gradientes.
  • Filtros y efectos avanzados.
  • Clipping.
  • Animaciones.
  • No pierde calidad si se hace zoom o si se redimensiona.
  • Puede escalarse.
  • Ideal para ser impreso.
  • Pueden mostrarse de forma progresiva (igual que los GIF), no teniendo que esperar a que todo el documento sea descargado.
  • Pueden distribuirse en formato comprimido GZIP para la reducción del tiempo de descarga .SVGZ.
  • Pueden ser indexados y buscados debido a que su contenido es XML y es textual.
  • Pueden ser transformados por hojas de estilos (XSL o CSS).
  • Integración con otras tecnologias XML del W3 y compatible con:
  • XML 1.0
  • XML Namespaces
  • XLink y XML Base para la referencia a URIs
  • Xpointer
  • CSS
  • XSL
  • DOM nivel 1 y 2 incluyendo DOM-Style y DOM-Event
  • SMIL 1.0. Sólo algunas de sus funcionalidades
  • HTML 4 y XHTML 1.0
  • UNICODE
  • Accesibilidad a contenidos web (WAI)

SVG y los Navegadores

  • Firefox: Implementa SVG en forma nativa desde su versión 1.5. A través del tiempo fue mejorando el cumplimiento del estándar, pero con alto consumo de procesador. En la nueva versión 3.5 de Firefox se puede comprobar que el render SVG se ha modificado y mejorado.
  • Opera: Al igual que Firefox también implementa SVG en forma nativa, pero con poco consumo de procesador. La versión 9.5 Beta, incorpora la posibilidad de llamar en forma externa a una imagen en formato svg.
  • MSIE: Lo implementan a partir de su versión 9 tanto para imágenes como para texto avanzado.
  • Safari: Su versión 3.1 (para computadores con sistema operativo Windows o Mac OS X) implementa SVG tanto para imágenes como para texto avanzado.
  • Chrome: Desde su primera versión implementa SVG de forma nativa (ya que utiliza WebKit).

Opciones de uso

SVG puede ser usado como:

  • Como una página web única
  • Embebido por referencia
  • Embebido en línea
  • A través de links externos
  • A través de CSS
  • A través de XSL

Cómo se especifica un SVG

Para empezar a definir o crear un gráfico en Formato SVG, lo primero, es poner la cabecera indicador de que se va a interpretar como un gráfico. Esto es:


<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
</svg>

Dentro de la estructura podremos ir insertando gráficos individuales, véase, círculos, rectangulos o cajas, texto, degradados, imágenes comprimidas en Base 64, ...

Ejemplo sencillo

SVG

<?xml version="1.0"?>
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="13" y="42" width="172" height="142" style="fill:rgb(255,244,193);stroke:rgb(0,0,0);stroke-width:1"/>
    <text x="105" y="172" fill="rgba(0,0,250,0.5)" font-size="35" font-family="Arial">SVG</text>
    <ellipse cx="76" cy="108" rx="40" ry="38" fill="red" stroke="black" stroke-width="1"/>
</svg> 


Las coordenadas (x,y) dónde empezar a dibujar son x e y y width y height son el ancho y alto.

La palabra cx es la coordenada en el eje X, cy la coordenada en el eje Y, r el radio y fill el color de relleno.

Pronto pondremos más pequeños tutoriales a cerca del formato SVG

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.