gráficas vectoriales escalables

Scalable Vector Graphics ( SVG ) es un formato de imagen vectorial basado en Extensible Markup Language (XML) para 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 (W3C) desde 1999.

gráficas vectoriales escalables
SVG Logo.svg
Tipo de medio de Internetimage/svg+xml[1] [2]
Identificador de tipo uniforme (UTI)public.svg-image
Desarrollado porW3C
Versión inicial4 de Septiembre de 2001 (hace 19 años) ( 04/09/2001 )
Último lanzamiento
1.1 (Segunda edición)
(16 de agosto de 2011 ; hace 9 años )  ( 2011-08-16 )
Tipo de formatoGráficos vectoriales
Extendido desdeXML
EstándarSVG del W3C
¿ Formato abierto ?sí
Sitio webwww .w3 .org / Graphics / SVG /

Las imágenes SVG y sus comportamientos se definen en archivos de texto XML. Esto significa que se pueden buscar , indexar , programar y comprimir . Como archivos XML, las imágenes SVG se pueden crear y editar con cualquier editor de texto , así como con software de dibujo . El programador y calígrafo árabe Unicode , Thomas Milo, atribuye a Wikipedia la adopción de SVG como la razón por la que la tecnología de imágenes compactas ganó popularidad. [3]

Todos los principales navegadores web modernos, incluidos Mozilla Firefox , Internet Explorer , Google Chrome , Opera , Safari y Microsoft Edge, tienen soporte para renderizado SVG .

Esta imagen ilustra la diferencia entre imágenes de mapa de bits e imágenes vectoriales. La imagen de mapa de bits 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 mapa de bits revela los píxeles mientras que escalar la imagen vectorial conserva las formas.

SVG ha estado en desarrollo dentro del Consorcio World Wide Web (W3C) desde 1999 después de que se presentaran al consorcio seis propuestas competitivas [ cita requerida ] para lenguajes de gráficos vectoriales durante 1998. El primer grupo de trabajo de SVG decidió no desarrollar ninguno de los presentaciones, sino para crear un nuevo lenguaje de marcado que fue informado por, pero no realmente basado en ninguno de ellos. [4]

SVG permite tres tipos de objetos gráficos: formas de gráficos vectoriales como trazados y contornos que constan de 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 características 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 XML de SVG o mediante secuencias de comandos que acceden al Modelo de objetos de documento (DOM) de SVG . SVG usa CSS para el estilo y JavaScript para la creación de scripts. El texto, incluida la internacionalización y la localización , que aparece en texto sin formato dentro del DOM de SVG, mejora la accesibilidad de los gráficos SVG. [5]

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, diseñados para dispositivos móviles con capacidades informáticas y de visualización reducidas. [6] 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. [7]

Impresión

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

Scripting y animación

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

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 repetidos de texto, por lo que son adecuadas para algoritmos de compresión de datos sin pérdida . Cuando una imagen SVG se ha comprimido con el algoritmo gzip , se denomina imagen "SVGZ" y utiliza la .svgzextensión de nombre de archivo correspondiente . Los visores compatibles con SVG 1.1 mostrarán imágenes comprimidas. [10] Un archivo SVGZ suele tener entre el 20 y el 50 por ciento del tamaño original. [11] W3C proporciona archivos SVGZ para probar la conformidad. [12]

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

  • Esquemas web, de CCLRC [13]
  • PGML , de Adobe Systems , IBM , Netscape y Sun Microsystems [14]
  • VML , de Autodesk , Hewlett-Packard , Macromedia , Microsoft y Vision [15]
  • Hyper Graphics Markup Language (HGML), de Orange UK y PRP [16]
  • WebCGM , de Boeing , InterCAP Graphics Systems, Inso Corporation , CCLRC y Xerox [17]
  • DrawML, de Excosoft AB [4]

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 del W3C el 4 de septiembre de 2001. [18]
  • SVG 1.1 se convirtió en una Recomendación del W3C el 14 de enero de 2003. [19] La especificación SVG 1.1 está modularizada 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 y SVG Basic (los perfiles SVG móviles) se convirtieron en recomendaciones del W3C el 14 de enero de 2003. Estos se describen como perfiles de SVG 1.1. [20]
  • SVG Tiny 1.2 se convirtió en una Recomendación del W3C el 22 de diciembre de 2008. [21] Inicialmente se redactó como un perfil del SVG Full 1.2 planificado (que desde entonces se ha descartado en favor de SVG 2), [22] pero luego fue refactorizado como un especificación independiente. Por lo general, está mal soportado.
  • SVG 1.1 Second Edition, que incluye todas las erratas y aclaraciones, pero no se lanzó ninguna característica nueva del SVG 1.1 original, se lanzó el 16 de agosto de 2011. [5]
  • SVG Tiny 1.2 Portable / Secure, un subconjunto más seguro del perfil SVG Tiny 1.2 presentado como borrador de estándar IETF el 29 de julio de 2020. [23] También conocido como SVG Tiny P / S. SVG Tiny 1.2 Portable / Secure es un requisito del borrador del estándar BIMI . [24]

Versión 2.x

SVG 2.0 elimina o desaprueba algunas características de SVG 1.1 e incorpora nuevas características de HTML5 y Web Open Font Format : [25]

  • Por ejemplo, SVG 2.0 elimina varios elementos de fuente como glyphy altGlyph(reemplazado por el formato de fuente WOFF).
  • El xml:spaceatributo está obsoleto en favor de CSS.
  • Se han agregado características HTML5 como atributos translatey data-*.
  • Las funciones de manejo de texto de SVG Tiny 1.2 están anotadas para ser incluidas, pero aún no formalizadas en el texto. [26] Algunas otras características 1.2 están seleccionadas, [25] pero SVG 2.0 no es un superconjunto de SVG tiny 1.2 en general.

Llegó a la fase de recomendación candidata el 15 de septiembre de 2016. El último borrador se publicó el 26 de mayo de 2020. [27]

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, principalmente destinados a agentes de usuario con capacidades limitadas. En particular, SVG Tiny se definió para dispositivos móviles muy restringidos, como teléfonos móviles ; no admite estilos ni secuencias de comandos. [28] SVG Basic se definió para dispositivos móviles de nivel superior, como teléfonos inteligentes .

En 2003, el 3GPP , un grupo de estándares de telecomunicaciones internacionales, adoptó SVG Tiny como el formato de medios 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 secuencias conmutadas por paquetes. [29] [30] [31] Fue más tarde [ ¿cuándo? ] agregado como formato requerido para gráficos vectoriales en 3GPP IP Multimedia Subsystem (IMS). [32] [33]

Diferencias del SVG no móvil

Ninguno de los perfiles móviles incluye soporte para el Modelo de Objetos de Documento (DOM) completo, mientras que solo SVG Basic 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 aún pueden ser procesados ​​por dispositivos que solo admiten el perfiles móviles. [34]

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

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. [35] Fue desarrollado por MPEG ( ISO / IEC JTC1 / SC29 / WG11) y publicado como ISO / IEC 14496-20: 2006. [36] Las capacidades 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. [37] SVG también se incluyó en MPEG-4 Parte 11 , en el formato extensible MPEG-4 Textual (XMT) , una representación textual del contenido multimedia MPEG-4 utilizando XML . [38]

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

Rutas
Los contornos de formas simples o compuestas se dibujan con líneas curvas o rectas que se pueden rellenar, delinear o utilizar como trazado de recorte . Las rutas tienen una codificación compacta.
Por ejemplo, M(por "Mover a") precede inicial numérico x y Y coordenadas , y L(para la "línea a") precede a un punto en que una línea debe ser dibujada. Otras letras de comando ( C, S, Q, T, y Alos datos preceden a) que se utiliza para dibujar diversos Bézier y elípticas curvas. Zse utiliza para cerrar un camino.
En todos los casos, las coordenadas absolutas siguen los comandos de letras mayúsculas y las coordenadas relativas se utilizan después de las letras minúsculas equivalentes. [39]
Formas básicas
Se pueden dibujar trazados de línea recta y trazados formados por una serie de segmentos de línea recta conectados (polilíneas), así como polígonos cerrados, círculos y elipses. Los rectángulos y los rectángulos de esquinas redondeadas también son elementos estándar. [40]
Texto
El texto de caracteres Unicode incluido en un archivo SVG se expresa como datos de caracteres XML . Son posibles muchos efectos visuales, y la especificación SVG maneja automáticamente texto bidireccional (para componer una combinación de texto en inglés y árabe, por ejemplo), texto vertical (como se escribió históricamente en chino) y caracteres a lo largo de una ruta curva (como el texto alrededor el borde del Gran Sello de los Estados Unidos ). [41]
Cuadro
Las formas SVG se pueden rellenar y delinear (pintar con un color, un degradado o un patrón). Los rellenos pueden ser opacos o tener cualquier grado de transparencia.
Los "marcadores" son entidades de final de línea, como puntas de flecha o símbolos que pueden aparecer en los vértices de un polígono. [42]
Color
Los colores se pueden aplicar a todos los elementos SVG visibles, ya sea directamente o a través de fill, strokey otras propiedades. Los colores se especifican de la misma manera que en CSS2 , es decir, usando nombres como blacko blue, en hexadecimal como #2f0o #22ff00, en decimal como rgb(255,255,127), o como porcentajes de la forma rgb(100%,100%,50%). [43]
Degradados y patrones
Las formas SVG se pueden rellenar o delinear con colores sólidos como se muestra arriba, o con degradados de color o con patrones repetidos. Los degradados de color pueden ser lineales o radiales (circulares) y pueden incluir cualquier número de colores y repeticiones. También se pueden especificar degradados de opacidad. Los patrones se basan en objetos de gráficos vectoriales o ráster predefinidos, que se pueden repetir en xy ydirecciones. Los degradados y patrones se pueden animar y programar. [44]
Desde 2008, se ha debatido [45] [46] entre los usuarios profesionales de SVG que podrían añadirse mallas de gradiente o preferiblemente curvas de difusión a la especificación de SVG. Se dice que una "representación simple [usando curvas de difusión] es capaz de representar incluso efectos de sombreado muy sutiles" [47] y que "las imágenes de la curva de difusión son comparables tanto en calidad como en eficiencia de codificación con mallas de gradiente, pero son más simples de crear ( según varios artistas que han utilizado ambas herramientas), y se pueden capturar de mapas de bits de forma totalmente automática ". [48] El borrador actual de SVG 2 incluye mallas de degradado. [49]
Recorte, enmascaramiento y composición
Los elementos gráficos, que incluyen texto, trazados, formas básicas y combinaciones de estos, se pueden usar como contornos para definir regiones tanto internas como externas que se pueden pintar (con colores, degradados y patrones) de forma independiente. Totalmente opaco trazados de recorte y semi-transparentes máscaras están compuestas juntos para calcular el color y la opacidad de cada píxel de la imagen final, utilizando alpha de mezcla. [50]
Efectos de filtro [51]
Un efecto de filtro consiste en una serie de operaciones gráficas que se aplican a un gráfico vectorial de origen determinado para producir un resultado de mapa de bits modificado .
Interactividad
Las imágenes SVG pueden interactuar con los usuarios de muchas formas. Además de los hipervínculos que se mencionan a continuación, cualquier parte de una imagen SVG se puede hacer receptiva a los eventos de la interfaz de usuario , como cambios en el enfoque , clics del mouse, desplazamiento o zoom de la imagen y otros eventos de puntero, teclado y documento. Los controladores de eventos pueden iniciar, detener o alterar animaciones, así como activar scripts en respuesta a tales eventos. [52]
Enlace
Las imágenes SVG pueden contener hipervínculos a otros documentos, utilizando XLink . Mediante el uso del elemento o un identificador de fragmento , las URL pueden vincularse a archivos SVG que cambian el área visible del documento. Esto permite crear estados de vista específicos que se utilizan para acercar / alejar un área específica o para limitar la vista a un elemento específico. Esto es útil al crear sprites . El soporte XLink en combinación con el elemento también permite vincular y reutilizar elementos internos y externos. Esto permite a los programadores hacer más con menos marcado y hace que el código sea más limpio. [53]
Scripting
Se puede acceder y manipular todos los aspectos de un documento SVG utilizando scripts de manera similar a HTML. El lenguaje de secuencias de comandos predeterminado es JavaScript y hay objetos del Modelo de objetos de documento (DOM) definidos para cada elemento y atributo de SVG. Los scripts se incluyen entre
Contribute a better translation