Scalable Vector Graphics

De Wikipedia, la enciclopedia libre
(Redirigido desde «SVG»)
Saltar a: navegación, búsqueda
Gráficos Vectoriales Redimensionables
Desarrollador
World Wide Web Consortium
w3.org/Graphics/SVG/
Información general
Extensión de archivo .svg, .svgz
Tipo de MIME image/svg+xml[1]
Lanzamiento inicial 4 de septiembre de 2001
Última versión 4.2T
10 de agosto de 2006; hace 7 años (2006-08-10)
Tipo de formato Gráfico vectorial
Extendido de XML
Formato abierto Sí 
Imagen estática generada desde un ejemplo SVG. El fichero original requiere un navegador con soporte nativo o mediante plugin.

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

SVG se convirtió en una recomendación del W3C en septiembre de 2001, por lo que ya ha sido incluido de forma nativa en el navegador web del W3C Amaya. Las versiones 1.5 y posteriores de Mozilla Firefox soportan gráficos hechos con SVG, así como el navegador Opera que desde su versión 8 ha implementado SVG 1.1 Tiny en su núcleo. Navegadores como Google Chrome, Safari e Internet Explorer 9 también son capaces de mostrar imágenes en formato SVG sin necesidad de complementos externos. Otros navegadores web, como versiones anteriores a la 9 de Internet Explorer, necesitan un conector o plug-in.

Vista general[editar]

La imagen ilustra una diferencia entre mapas de bits e imágenes vectoriales. La imagen vectorial puede ser redimensionada, tanto como se requiera, sin pérdida de calidad de imagen. Esto no es así con un mapa de bits.

El SVG permite tres tipos de objetos gráficos:

Los objetos gráficos pueden ser agrupados, transformados y compuestos en objetos previamente renderizados, y pueden recibir un estilo común. El texto puede estar en cualquier espacio de nombres XML admitido por la aplicación, lo que mejora la posibilidad de búsqueda y la accesibilidad de los gráficos SVG. El juego de características incluye las transformaciones anidadas, los clipping paths, las máscaras alfa, los filtros de efectos, las plantillas de objetos y la extensibilidad.

El dibujado de los SVG puede ser dinámico e interactivo. El Document Object Model (DOM) para SVG, que incluye el DOM XML completo, permite animaciones de gráficos vectoriales sencillas y eficientes mediante ECMAScript o SMIL. Un juego amplio de manejadores de eventos, como "onMouseOver" y "onClick", pueden ser asignados a cualquier objeto SVG. Debido a su compatibilidad y relación con otras normas Web, características como el scripting pueden ser aplicadas a elementos SVG y a otros elementos XML desde distintos espacios de nombre XML simultáneamente dentro de la misma página web. Un ejemplo extremo de esto es un juego completo de tetris realizado como un objeto SVG, disponible aquí. (El enlace requiere un navegador con soporte de SVG).

Si el espacio de almacenamiento es un problema, las imágenes SVG pueden salvarse comprimidas con gzip, en cuyo caso pasan a ser imágenes SVGZ. Debido a la verbosidad del XML, este tiende a comprimirse muy bien, y estos ficheros pueden ser mucho más pequeños. Aun así, a menudo el fichero vectorizado original (SVG) es más pequeño que la versión de mapa de bits.

Complejidad

Tomate en SVG.

A pesar de ser un lenguaje vectorial, SVG permite crear imágenes complejas.

Elementos geométricos[editar]

Los elementos geométricos son objetos provistos de atributos genéricos básicos y optativos o por defecto.

Todos los objetos se encuentran enmarcados en una ventana determinada por un ancho width y un alto height valorados con enteros con origen de coordenadas en la parte superior izquierda, hacia la derecha x positiva y hacia abajo y positiva:

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

Atributos[editar]

Todos los objetos comparten algunos atributos genéricos:

  • Todo elemento visual de una figura tiene un color con 4 posibles expresiones con el negro por defecto:
  • Nominalmente: red, yellow, blue, aqua, salmon, tomato, orange, lightgreen...
  • Valores hexadecimales: #ff0000, #ffff00...
  • Valores hexadecimales resumidos #abc=#aabbcc: #f00, #ff0...
  • Funcionales: enteros rgb(255,32,50)... o porcentuales rgb(100%,10%,0%)...
  • Toda figura tiene un borde y puede ser modificado en grosor, stroke-width, y color, stroke.
  • Casi todas las figuras tienen un relleno que puede ser modificado en color, fill.
  • Toda figura tiene una opacidad, opacity, su valor varía entre 0(transparente) y 1(opaco por defecto).

Líneas[editar]

El objeto línea consta básicamente de dos puntos, x1 y1 y x2 y2, entre los cuales se dibuja un segmento recto:

<line ... />

Rectángulos[editar]

El objeto rectángulo consta básicamente de un punto de origen, x y, y las dimensiones del rectángulo, height widt:

<rect ... />

Círculo[editar]

El objeto círculo consta básicamente de un punto origen, cx cy, y un radio, r:

<circle ... />

Elipse[editar]

El objeto elipse consta básicamente de un punto origen, cx cy, un radio horizontal, rx, y un radio vertical, ry:

<ellipse ... />

Recinto[editar]

Muestra de diferentes órdenes de orientación para una misma cadena d.

El objeto recinto consta básicamente de puntos que pueden cerrar o no un espacio, estos puntos forman cadenas que se inician con M (las mayúsculas tienen el origen en el origen de coordenadas) o con m(las minúsculas tienen su origen es el punto anterior):

<path d="M ... m ... M ... " />

Enlaces entre puntos:

  • Si después de un punto usamos L o l, esto indica que los puntos siguientes se unen con segmentos rectos.
  • Si después de un punto usamos Q o q, esto indica que el par de puntos siguientes generan una parábola que une el primero con el tercero.
  • T o t enlaza parábolas sucesivamente ahorrando cada vez un punto de control.
  • Si después de un punto usamos C o c, esto indica que la terna de puntos siguientes generan una curva cúbica que une el primero con el cuarto.
  • S o s enlaza curvas cúbicas sucesivamente ahorrando cada vez un punto de control.
  • Si después de un punto usamos A o a, esto indica que se unirán puntos con una curva elíptica.
  • Para cerrar curvas se finalizará la cadena de puntos con Z o z sin ninguna diferencia.

Aberturas:

Para generar una abertura en un recinto con interior(fill distinto de "none") ésta se efectúa mediante una cadena con orientación contraria al borde del recinto(hay dos posibles órdenes el horario y el antihorario), esto generará un recinto cuyo interior tendrá una sola orientación, en caso contrario no hay abertura quedando reforzada(resistencia a un nuevo agujero) la superfície.

Imagen[editar]

Se puede añadir o incrustar enlace a imágenes del tipo *.png, *.jpg o *.svg dentro de un rectángulo de parámetros x, y, width y height:

<image xlink:href="..." x="..." y="..." width="..." height="..." />

Texto[editar]

Se puede añadir texto, a partir de: un punto base x e y, tipo de letra font-family(serif, garamond, ariel, monospace o courier), tamaño de letras font-size y estilo de letra font-style(oblique o italic):

<text x="..." y="..." > ... </text>

Agrupaciones[editar]

Se pueden agrupar objetos para que compartan atributos por defecto y una disposición fija en el espacio para poder duplicarlos cómodamente:

<g ... >...</g>

Duplicados[editar]

Se puede duplicar objetos identificados:

<use xlink:href="#..." ... />

Navegadores[editar]

  • Mozilla 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. A partir de la versión 3.5, 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. Usando <image> o <use>.
  • Windows Internet Explorer: Aunque tardíamente, Internet Explorer empezó a soportar este estándar desde su novena versión.
  • Apple 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.
  • Google Chrome: Desde su primera versión implementa SVG de forma nativa (ya que utiliza WebKit).

Software de edición[editar]

Actualmente hay muchos programas de diseño gráfico que lo soportan. Entre los que son software libre el más popular es Inkscape y también hay editores en línea que permiten abrir archivos, como svgreal.[2]

Véase también[editar]

Referencias[editar]

Enlaces externos[editar]

Ejemplos[editar]