SVG

Gráficos vectoriales escalables (SVG) es un formato de imagen vectorial basado en XML para definir gráficos bidimensionales, con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium desde 1999.

Las imágenes SVG se definen en un formato de gráficos vectoriales y se almacenan en archivos de texto XML. Por lo tanto, las imágenes SVG se pueden escalar en tamaño sin pérdida de calidad, y los archivos SVG se pueden buscar, indexar, codificar y comprimir. Los archivos de texto XML pueden crearse y editarse con editores de texto o editores de gráficos vectoriales, y son renderizados por los navegadores web más utilizados.

Resumen

Esta imagen ilustra la diferencia entre bitmap y imágenes vectoriales. La imagen bitmap se compone de un conjunto fijo de píxeles, mientras que la imagen vectorial se compone de un conjunto fijo de formas. En la imagen, escalar el bitmap revela los píxeles mientras escala la imagen vectorial preserva las formas.

SVG ha estado en desarrollo dentro del World Wide Web Consortium (W3C) desde 1999 después de que seis propuestas competitivas para lenguajes de gráficos vectoriales se presentaran al consorcio durante 1998 (ver más abajo).

El primer grupo de trabajo de SVG decidió no desarrollar ninguno de los envíos comerciales, sino crear un nuevo lenguaje de marcado que se basara en ninguno de ellos, pero que no se basara realmente en ellos.

SVG permite tres tipos de objetos gráficos: formas de gráficos vectoriales (como rutas que consisten en líneas rectas y curvas), imágenes de mapa de bits y texto. Los objetos gráficos se pueden agrupar, diseñar, transformar y componer en objetos previamente renderizados. El conjunto de funciones incluye transformaciones anidadas, trazados de recorte, máscaras alfa, efectos de filtro y objetos de plantilla. Los dibujos SVG pueden ser interactivos y pueden incluir animación, definida en los elementos SVG XML o mediante secuencias de comandos que acceden al Modelo de Objetos de Documento (DOM) SVG. SVG usa CSS para diseñar y JavaScript para secuencias de comandos. El texto, incluidas la internacionalización y la localización, que aparece en texto sin formato dentro del SVG DOM, mejora la accesibilidad de los gráficos SVG.

La especificación SVG se actualizó a la versión 1.1 en 2011. Hay dos 'Perfiles SVG móviles' SVG Tiny y SVG Basic, destinados a dispositivos móviles con capacidades computacionales y de visualización reducidas. Scalable Vector Graphics 2 se convirtió en una recomendación candidata del W3C el 15 de septiembre de 2016. SVG 2 incorpora varias características nuevas además de las de SVG 1.1 y SVG Tiny 1.2.

Impresión

Aunque la especificación SVG se centra principalmente en el lenguaje de marcado de gráficos vectoriales, su diseño incluye las funciones básicas de un lenguaje de descripción de páginas como el PDF de Adobe. Contiene disposiciones para gráficos enriquecidos y es compatible con CSS para fines de diseño. SVG tiene la información necesaria para colocar cada glifo e imagen en una ubicación elegida en una página impresa.

Guión y animación

Los dibujos SVG pueden ser dinámicos e interactivos. Las modificaciones de los elementos basadas en el tiempo se pueden describir en SMIL o se pueden programar en un lenguaje de secuencias de comandos (por ejemplo, JavaScript). El W3C recomienda explícitamente SMIL como estándar para la animación en SVG.

Se puede asignar un amplio conjunto de controladores de eventos como "onmouseover" y "onclick" a cualquier objeto gráfico SVG para aplicar acciones y eventos.

Compresión

Las imágenes SVG, al ser XML, contienen muchos fragmentos de texto repetidos, por lo que son adecuadas para los algoritmos de compresión de datos sin pérdidas. Cuando una imagen SVG se comprimió con el algoritmo gzip, se denomina "SVGZ" imagen y usa la extensión de nombre de archivo .svgz correspondiente. Los visores que cumplan con SVG 1.1 mostrarán imágenes comprimidas. Un archivo SVGZ suele tener entre un 20 y un 50 por ciento del tamaño original. W3C proporciona archivos SVGZ para probar la conformidad.

Historial de desarrollo

SVG fue desarrollado por el W3C SVG Working Group a partir de 1998, después de que se recibieron seis presentaciones de gráficos vectoriales de la competencia ese año:

• Web Schematics, from CCLRC
• PGML, de Adobe Systems, IBM, Netscape y Sun Microsystems
• VML, por Autodesk, Hewlett-Packard, Macromedia, Microsoft y Vision
• Hiper Graphics Markup Language (HGML), por Orange UK y PRP
• WebCGM, de Boeing, InterCAP Graphics Systems, Inso Corporation, CCLRC y Xerox
• DrawML, de Excosoft AB

El grupo de trabajo estaba presidido en ese momento por Chris Lilley del W3C.

Versión 1.x

• SVG 1.0 se convirtió en una recomendación W3C el 4 de septiembre de 2001.
• SVG 1.1 se convirtió en una recomendación W3C el 14 de enero de 2003. La especificación SVG 1.1 se modulariza para permitir que los subconjuntos se definan como perfiles. Aparte de esto, hay muy poca diferencia entre SVG 1.1 y SVG 1.0.
  • SVG Tiny and SVG Basic (the Mobile SVG Profiles) became W3C Recommendations on 14 January 2003. Se describen como perfiles de SVG 1.1.
• SVG Tiny 1.2 se convirtió en una recomendación W3C el 22 de diciembre de 2008. Inicialmente fue redactado como un perfil del SVG Full 1.2 (que desde entonces ha sido retirado a favor de SVG 2), pero fue posteriormente refactorizado como una especificación independiente. Por lo general, es mal apoyado.
• SVG 1.1 Second Edition, which includes all the errata and clarifications, but no new features to the original SVG 1.1 was released on 16 August 2011.
• SVG Tiny 1.2 Portable/Secure, Un subconjunto más seguro del perfil SVG Tiny 1.2 presentado como un proyecto de norma IETF el 29 de julio de 2020. También conocido como SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure es un requisito del proyecto de estándar BIMI.

Versión 2

SVG 2 elimina o descarta algunas funciones de SVG 1.1 e incorpora nuevas funciones de HTML5 y Web Open Font Format:

• Por ejemplo, SVG 2 elimina varios elementos de fuentes como glyph y altGlyph (sustituida por el formato de fuente WOFF).
• El xml:space atributo es deprecado a favor de CSS.
• Características HTML5 tales como translate y data-* atributos se han añadido.
• Las características de manejo de texto de SVG Tiny 1.2 están anotadas en cuanto a ser incluidas, pero aún no formalizadas en texto. Algunas otras 1.2 características son la cereza seleccionada, pero SVG 2 no es un superset de SVG pequeña 1.2 en general.

SVG 2 alcanzó la etapa de Candidato a recomendación el 15 de septiembre de 2016, y las versiones revisadas se publicaron el 7 de agosto de 2018 y el 4 de octubre de 2018. El último borrador se publicó el 21 de marzo de 2022.

Perfiles móviles

Debido a la demanda de la industria, se introdujeron dos perfiles móviles con SVG 1.1: SVG Tiny (SVGT) y SVG Basic (SVGB).

Estos son subconjuntos del estándar SVG completo, destinados principalmente a agentes de usuario con capacidades limitadas. En particular, SVG Tiny se definió para dispositivos móviles altamente restringidos, como teléfonos celulares; no admite estilos ni secuencias de comandos. SVG Basic se definió para dispositivos móviles de nivel superior, como los teléfonos inteligentes.

En 2003, 3GPP, un grupo internacional de estándares de telecomunicaciones, adoptó SVG Tiny como el formato multimedia de gráficos vectoriales obligatorio para los teléfonos de próxima generación. SVGT es el formato de gráficos vectoriales requerido y la compatibilidad con SVGB es opcional para el servicio de mensajería multimedia (MMS) y el servicio de transmisión por paquetes conmutados. Más tarde se agregó como formato requerido para gráficos vectoriales en 3GPP IP Multimedia Subsystem (IMS).

Diferencias con SVG no móvil

Ninguno de los perfiles móviles incluye soporte para el modelo de objeto de documento (DOM) completo, mientras que solo SVG básico tiene soporte opcional para secuencias de comandos, pero debido a que son subconjuntos totalmente compatibles del estándar completo, la mayoría de los gráficos SVG todavía pueden ser renderizados por dispositivos que solo es compatible con los perfiles móviles.

SVGT 1.2 agrega un microDOM (μDOM), estilo y secuencias de comandos.

Trabajo relacionado

El estándar MPEG-4 Parte 20 - Representación de escena de aplicación ligera (LASeR) y formato de agregación simple (SAF) se basa en SVG Tiny. Fue desarrollado por MPEG (ISO/IEC JTC 1/SC29/WG11) y publicado como ISO/IEC 14496-20:2006. Las capacidades de SVG se mejoran en MPEG-4 Parte 20 con características clave para servicios móviles, como actualizaciones dinámicas, codificación binaria, representación de fuentes de última generación. SVG también se acomodó en MPEG-4 Parte 11, en el formato Extensible MPEG-4 Textual (XMT), una representación textual del contenido multimedia MPEG-4 usando XML.

Funcionalidad

La especificación SVG 1.1 define 14 áreas funcionales o conjuntos de características:

Senderos

Los contornos de forma simples o compuestos se dibujan con líneas curvas o rectas que se pueden rellenar, esbozar o usar como una ruta de recorte. Los caminos tienen una codificación compacta.

Por ejemplo, M (para "move to") precede la numérica inicial x y Sí. coordenadas, y L (para "línea a") precede un punto al que debe dibujarse una línea. Otras cartas de mando (C, S, Q, T, y A) precede datos que se utilizan para dibujar varias curvas Bézier y elípticas. Z se utiliza para cerrar un camino.

En todos los casos, las coordenadas absolutas siguen los comandos mayúsculas y las coordenadas relativas se utilizan después de las letras mayúsculas equivalentes.

Formas básicas

Se pueden dibujar caminos y caminos rectos formados por una serie de segmentos conectados de línea recta (polylines), así como polígonos cerrados, círculos y elipses. Los rectángulos y rectángulos redondeados también son elementos estándar.

Texto

El texto de caracteres Unicode incluido en un archivo SVG se expresa como datos de caracteres XML. Muchos efectos visuales son posibles, y la especificación SVG maneja automáticamente texto bidireccional (para componer una combinación de texto inglés y árabe, por ejemplo), texto vertical (como se puede escribir chino o japonés) y caracteres a lo largo de un camino curvado (como el texto alrededor del borde del Gran Sello de los Estados Unidos).

Pintura

Las formas SVG se pueden rellenar y esbozar (pintado con un color, un gradiente o un patrón). Los rellenos pueden ser opacos o tener cualquier grado de transparencia.

"Marcadores" son características de línea de extremo, tales como puntas de flecha, o símbolos que pueden aparecer en los vértices de un polígono.

Color

Los colores se pueden aplicar a todos los elementos visibles SVG, ya sea directamente o vía fill, stroke, y otras propiedades. Los colores se especifican de la misma manera que en CSS2, es decir, usando nombres como black o blue, en hexadecimal como #2f0 o #22ff00, en decimal como rgb(255,255,127), o como porcentajes de la forma rgb(100%,100%,50%).

Gradientes y patrones

Las formas SVG se pueden rellenar o esbozar con colores sólidos como arriba, o con gradientes de color o con patrones de repetición. Los gradientes de color pueden ser lineales o radiales (circulares), y pueden implicar cualquier número de colores así como repeticiones. También se pueden especificar los gradientes de opacidad. Los patrones se basan en objetos gráficos vectoriales predefinidos, que pueden repetirse en x y y direcciones. Los ingredientes y patrones pueden ser animados y scripted.

Desde 2008, se ha discutido entre los usuarios profesionales de SVG que las mallas gradientes o las curvas de difusión preferentemente podrían ser útiles para la especificación SVG. Se dice que una "representación simple [utilizando curvas de difusión] es capaz de representar incluso efectos de afeitado muy sutiles" y que "las imágenes curvas de difusión son comparables tanto en la calidad como en la eficiencia de codificación con mallas gradientes, pero son más simples de crear (según varios artistas que han utilizado ambas herramientas), y pueden ser capturados de bitmaps completamente automáticamente". El actual borrador de SVG 2 incluye mallas gradientes.

Clipping, masking and compositing

Los elementos gráficos, incluyendo texto, caminos, formas básicas y combinaciones de estos, se pueden utilizar como esquemas para definir ambos dentro y afuera regiones que se pueden pintar (con colores, gradientes y patrones) independientemente. Totalmente opaco Recorridos de caminos y semitransparente máscaras son composited juntos para calcular el color y la opacidad de cada pixel de la imagen final, utilizando mezcla alfa.

Efectos de filtro

Un efecto filtrante consiste en una serie de operaciones gráficas que se aplican a un gráfico vectorial de origen dado para producir un resultado bitmapped modificado.

Interactividad

Las imágenes SVG pueden interactuar con los usuarios de muchas maneras. Además de hipervínculos como se menciona a continuación, cualquier parte de una imagen SVG puede ser receptiva a eventos de interfaz de usuario como cambios en el enfoque, clics del ratón, desplazamiento o zoom de la imagen y otros eventos de puntero, teclado y documento. Los manipuladores de eventos pueden iniciar, detener o alterar las animaciones, así como los scripts de activación en respuesta a tales eventos.

Enlace

Las imágenes SVG pueden contener hipervínculos a otros documentos, utilizando XLink. Mediante el uso del elemento o un identificador de fragmentos, URLs pueden conectarse a archivos SVG que cambian el área visible del documento. Esto permite crear estados de vista específicos que se utilizan para ampliar / fuera de un área específica o para limitar la vista a un elemento específico. Esto es útil al crear sprites. Soporte XLink en combinación con el El elemento también permite vincular y reutilizar elementos internos y externos. Esto permite que los codificadores hagan más con menos marcado y hace que el código más limpio.

Scripting

Todos los aspectos de un documento SVG se pueden acceder y manipular usando scripts de forma similar al HTML. El lenguaje de scripting predeterminado es JavaScript y hay objetos definidos Modelo de Objetos de Documentos (DOM) para cada elemento y atributo SVG. Los scripts están encerrados elementos. Pueden correr en respuesta a eventos punteros, eventos de teclado y eventos de documentos según sea necesario.

Animación

El contenido de SVG se puede animar utilizando elementos de animación incorporados como , y . El contenido se puede animar manipulando el DOM usando ECMAScript y los temporizadores incorporados del lenguaje de scripting. La animación SVG ha sido diseñada para ser compatible con versiones actuales y futuras de Synchronized Multimedia Integration Language (SMIL). Las animaciones pueden ser continuas, pueden buclear y repetir, y pueden responder a los eventos de usuario, como se mencionó anteriormente.

Fuentes

Como con HTML y CSS, el texto en SVG puede hacer referencia a archivos de fuentes externos, como fuentes de sistema. Si los archivos de fuentes requeridos no existen en la máquina donde se renderiza el archivo SVG, el texto puede no aparecer como se desee. Para superar esta limitación, el texto se puede mostrar en un Fuente SVG, donde los glifos requeridos se definen en SVG como una fuente que luego se hace referencia a elemento.

Metadatos

De acuerdo con la iniciativa Semántica Web de W3C, SVG permite a los autores proporcionar metadatos sobre contenido SVG. La instalación principal es la elemento, donde se puede describir el documento utilizando propiedades de metadatos básicos de Dublín (por ejemplo, título, creador/autor, tema, descripción, etc.). También se pueden utilizar otros esquemas de metadatos. Además, SVG define