Articulo de referencia

SVG

.svg , .svgz "},"_nomimecode":{"wt":"on"},"mime":{"wt":" image/svg+xml {{cite web |title=Media Type Registration for image/svg+xml |url=http://www.w3.org/TR/SVG/mimereg.html |pu...

Los gráficos vectoriales escalables ( SVG ) son un formato de gráficos vectoriales 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 Consorcio World Wide Web desde 1999.

Las imágenes SVG se definen en formato de gráficos vectoriales y se almacenan en archivos de texto XML. Por lo tanto, las imágenes SVG se pueden escalar sin pérdida de calidad, y los archivos SVG se pueden buscar , indexar , procesar mediante scripts y comprimir . Los archivos de texto XML se pueden crear y editar con editores de texto o editores de gráficos vectoriales , y la mayoría de los navegadores web los visualizan correctamente . SVG puede incluir JavaScript , lo que podría dar lugar a ataques de secuencias de comandos entre sitios (XSS) .

Historia

SVG ha estado en desarrollo dentro del Consorcio World Wide Web (W3C) desde 1999, después de que se presentaran seis propuestas competidoras para lenguajes de gráficos vectoriales al consorcio durante 1998 (véase más abajo). [ 3 ]

El grupo de trabajo inicial de SVG decidió no desarrollar ninguna de las propuestas comerciales, sino crear un nuevo lenguaje de marcado que se inspirara en ellas, pero que en realidad no se basara en ninguna de ellas. [ 3 ]

SVG fue desarrollado por el Grupo de Trabajo SVG del W3C a partir de 1998, después de que se recibieran ese año seis propuestas de gráficos vectoriales que competían entre sí:

En aquel momento, el grupo de trabajo estaba presidido por Chris Lilley, del W3C.

La adopción inicial se vio limitada por la falta de compatibilidad con versiones antiguas de Internet Explorer. Sin embargo, a partir de 2011, todos los principales navegadores de escritorio comenzaron a admitir SVG. La compatibilidad nativa con los navegadores ofrece diversas ventajas, como no requerir complementos, permitir la combinación de SVG con otro contenido y mejorar la fiabilidad de la renderización y la programación. La compatibilidad móvil con SVG existe en varias formas, con diferentes dispositivos y navegadores compatibles con SVG Tiny 1.1 o 1.2. SVG se puede crear utilizando editores de gráficos vectoriales y renderizar en formatos rasterizados . En aplicaciones web, Inline SVG permite incrustar contenido SVG dentro de documentos HTML.

La especificación SVG se actualizó a la versión 1.1 en 2011. 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. [ 9 ]

Versión 1.x

  • SVG 1.0 se convirtió en una recomendación del W3C el 4 de septiembre de 2001. [ 10 ]
  • SVG 1.1 se convirtió en una recomendación del W3C el 14 de enero de 2003. [ 11 ] La especificación SVG 1.1 está modularizada para permitir la definición de subconjuntos como perfiles. Aparte de esto, existen muy pocas diferencias entre SVG 1.1 y SVG 1.0.
    • SVG Tiny y SVG Basic (los perfiles SVG para móviles) se convirtieron en recomendaciones del W3C el 14 de enero de 2003. Se describen como perfiles de SVG 1.1. [ 12 ]
  • SVG Tiny 1.2 se convirtió en una recomendación del W3C el 22 de diciembre de 2008. [ 13 ] Inicialmente se redactó como un perfil del planificado SVG Full 1.2 (que desde entonces se ha descartado en favor de SVG 2), [ 14 ] pero posteriormente se refactorizó como una especificación independiente. En general, cuenta con escaso soporte.
  • SVG 1.1 Segunda Edición, que incluye todas las erratas y aclaraciones, pero ninguna característica nueva con respecto al SVG 1.1 original, se publicó el 16 de agosto de 2011. [ 15 ]
  • SVG Tiny 1.2 Portable/Secure, un subconjunto más seguro del perfil SVG Tiny 1.2 presentado como un borrador de estándar IETF el 29 de julio de 2020. [ 16 ] También conocido como SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure es un requisito del borrador de estándar BIMI . [ 17 ]

Versión 2

SVG 2 elimina o deja en desuso algunas características de SVG 1.1 e incorpora nuevas características de HTML5 y Web Open Font Format (WOFF): [ 18 ]

  • Por ejemplo, SVG 2 elimina varios elementos de fuente como glyphy altGlyph(reemplazados por WOFF).
  • Este xml:spaceatributo está obsoleto y se recomienda usar CSS.
  • Se han añadido características de HTML5 como translatey atributos.data-*
  • Las características de manejo de texto de SVG Tiny 1.2 están anotadas para ser incluidas, pero aún no formalizadas en el texto. [ 19 ] Algunas otras características de 1.2 se seleccionan de manera selectiva, [ 18 ] pero SVG 2 no es un superconjunto de SVG Tiny 1.2 en general.

SVG 2 alcanzó la etapa de Recomendación Candidata el 15 de septiembre de 2016, [ 20 ] y las versiones revisadas se publicaron el 7 de agosto de 2018 y el 4 de octubre de 2018. [ 21 ] El último borrador se publicó el 14 de septiembre de 2025. [ 22 ]

Características

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, al escalar el mapa de bits se revelan los píxeles, mientras que al escalar la imagen vectorial se conservan las formas.

SVG admite interactividad, animación y funciones gráficas avanzadas, lo que lo hace ideal tanto para aplicaciones web como impresas. Las imágenes SVG se pueden comprimir con el algoritmo gzip , lo que da como resultado archivos SVGZ que suelen ser entre un 20 % y un 50 % más pequeños que los originales. SVG también admite metadatos, lo que permite una mejor indexación, búsqueda y recuperación del contenido SVG.

SVG admite tres tipos de objetos gráficos: formas vectoriales (como trazados formados por líneas rectas y curvas), imágenes de mapa de bits y texto. Los objetos gráficos se pueden agrupar, estilizar, transformar y combinar con objetos previamente renderizados . Entre sus funciones se incluyen transformaciones anidadas , trazados de recorte , máscaras alfa , efectos de filtro y plantillas de objetos. Los dibujos SVG pueden ser interactivos e incluir animaciones , definidas en los elementos XML de SVG o mediante scripts que acceden al Modelo de Objetos del Documento (DOM) de SVG.

SVG utiliza CSS para el estilo y JavaScript para la programación. El texto, incluyendo la internacionalización y la localización , que aparece en texto plano dentro del DOM de SVG, mejora la accesibilidad de los gráficos SVG. [ 15 ]

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 contiene la información necesaria para colocar cada glifo e imagen en una ubicación elegida en una página impresa. [ 23 ]

Guionización y animación

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

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.

perfiles móviles

Debido a la demanda del sector, con SVG 1.1 se introdujeron dos perfiles para dispositivos móviles: 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 celulares ; no admite estilos ni scripts. [ 25 ] SVG Basic se definió para dispositivos móviles de nivel superior, como teléfonos inteligentes .

En 2003, el 3GPP , un grupo internacional de estándares de telecomunicaciones, 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 Conmutación de Paquetes. [ 26 ] [ 27 ] [ 28 ] Posteriormente se agregó como formato requerido para gráficos vectoriales en el Subsistema Multimedia IP (IMS) del 3GPP. [ 29 ]

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 scripts, pero debido a que son subconjuntos totalmente compatibles del estándar completo, la mayoría de los gráficos SVG aún pueden ser renderizados por dispositivos que solo admiten los perfiles móviles. [ 30 ]

SVGT 1.2 añade un microDOM (μDOM), estilos y scripts. [ 25 ] SVGT 1.2 también incluye algunas características que no se encuentran en SVG 1.1, como trazos no escalables, que son compatibles con algunas implementaciones de SVG 1.1, como Opera, Firefox y WebKit. A medida que aumentaron las bases de código compartidas entre navegadores de escritorio y móviles, también aumentó el uso de SVG 1.1 sobre SVGT 1.2.

Compresión

Las imágenes SVG, al ser XML, contienen muchos fragmentos de texto repetidos, por lo que son muy adecuadas para algoritmos de compresión de datos sin pérdida . Cuando una imagen SVG se ha comprimido con el algoritmo gzip , se la denomina imagen "SVGZ" y utiliza la .svgzextensión de archivo correspondiente. Los visores compatibles con SVG 1.1 mostrarán las imágenes comprimidas. [ 31 ] Un archivo SVGZ suele tener entre el 20 y el 50 por ciento del tamaño original. [ 32 ] El W3C proporciona archivos SVGZ para comprobar la conformidad. [ 33 ]

Diseño

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

Caminos
Los contornos de formas simples o compuestas se dibujan con líneas curvas o rectas que se pueden rellenar, perfilar o usar como trazado de recorte . Los trazados tienen una codificación compacta.
Por ejemplo, (para "mover a") precede a las coordenadasM numéricas iniciales x e y , y (para "línea a") precede a un punto al que se debe dibujar una línea. Otras letras de comando ( , , , , y ) preceden a los datos que se utilizan para dibujar varias curvas de Bézier y elípticas . se utiliza para cerrar una ruta.LCSQTAZ
En todos los casos, las coordenadas absolutas siguen a los comandos en mayúsculas y las coordenadas relativas se utilizan después de las letras minúsculas equivalentes. [ 34 ]
Formas básicas
Se pueden dibujar trayectorias en línea recta y trayectorias formadas 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. [ 35 ]
Texto
El texto con caracteres Unicode incluido en un archivo SVG se expresa como datos de caracteres XML . Se pueden lograr muchos efectos visuales, y la especificación SVG maneja automáticamente el texto bidireccional (para componer una combinación de texto en inglés y árabe, por ejemplo), el texto vertical (como se puede escribir en chino o japonés) y los caracteres a lo largo de una trayectoria curva (como el texto que rodea el borde del Gran Sello de los Estados Unidos ). [ 36 ]
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 elementos que aparecen en los extremos de las líneas, como puntas de flecha o símbolos, en los vértices de un polígono. [ 37 ]
Color
Los colores se pueden aplicar a todos los elementos SVG visibles, ya sea directamente o mediante fill, stroke, y 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%). [ 38 ]
Gradientes y patrones
Las formas SVG se pueden rellenar o delinear con colores sólidos como se muestra arriba, o con degradados de color o patrones repetitivos. Los degradados de color pueden ser lineales o radiales (circulares) y pueden incluir cualquier número de colores, así como repeticiones. También se pueden especificar degradados de opacidad. Los patrones se basan en objetos gráficos rasterizados o vectoriales predefinidos, que se pueden repetir en xambas ydirecciones. Los degradados y patrones se pueden animar y programar. [ 39 ]
Desde 2008, se ha debatido [ 40 ] [ 41 ] entre usuarios profesionales de SVG sobre la posibilidad de añadir mallas de gradiente o, preferiblemente, curvas de difusión a la especificación SVG. Se afirma que una "representación simple [mediante curvas de difusión] es capaz de representar incluso efectos de sombreado muy sutiles" [ 42 ] y que "las imágenes de curvas de difusión son comparables en calidad y eficiencia de codificación con las mallas de gradiente, pero son más sencillas de crear (según varios artistas que han utilizado ambas herramientas) y pueden capturarse a partir de mapas de bits de forma totalmente automática". [ 43 ] El borrador actual de SVG 2 incluye mallas de gradiente. [ 44 ]
Recorte, enmascaramiento y composición
Los elementos gráficos, incluidos texto, trazados, formas básicas y combinaciones de estos, pueden usarse como contornos para definir regiones tanto internas como externas que pueden pintarse (con colores, degradados y patrones) de forma independiente. Los trazados de recorte totalmente opacos y las máscaras semitransparentes se combinan para calcular el color y la opacidad de cada píxel de la imagen final, utilizando la fusión alfa . [ 45 ]
Efectos de filtro [ 46 ]
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 maneras. Además de los hipervínculos mencionados a continuación, cualquier parte de una imagen SVG puede hacerse receptiva a eventos de la interfaz de usuario , como cambios de enfoque , clics del ratón, desplazamiento o zoom de la imagen y otros eventos del puntero, el teclado y el documento. Los controladores de eventos pueden iniciar, detener o modificar animaciones, así como activar scripts en respuesta a dichos eventos. [ 47 ]
Enlace
Las imágenes SVG pueden contener hipervínculos a otros documentos mediante XLink . Mediante el uso del <view>elemento o un identificador de fragmento , las URL pueden enlazar a archivos SVG que modifican el área visible del documento. Esto permite crear estados de vista específicos que se utilizan para acercar o alejar una zona concreta o para limitar la vista a un elemento específico. Esto resulta útil al crear sprites . La compatibilidad con XLink , en combinación con el <use>elemento, también permite enlazar y reutilizar elementos internos y externos. Esto permite a los programadores hacer más con menos marcado y genera un código más limpio. [ 48 ]
Programación de scripts
Todos los aspectos de un documento SVG pueden ser accedidos y manipulados mediante scripts de forma similar a HTML. El lenguaje de scripting predeterminado es JavaScript y existen objetos del Modelo de Objetos del Documento (DOM) definidos para cada elemento y atributo SVG. Los scripts se encuentran dentro de elementos. Pueden ejecutarse en respuesta a eventos de puntero, eventos de teclado y eventos del documento según sea necesario. [ 49 ]<script>
Animación
El contenido SVG se puede animar utilizando los elementos de animación integrados , como y . El contenido se puede animar manipulando el DOM mediante ECMAScript y los temporizadores integrados del lenguaje de scripting. La animación SVG se ha diseñado para ser compatible con las versiones actuales y futuras del Lenguaje de Integración Multimedia Sincronizada (SMIL). Las animaciones pueden ser continuas, pueden repetirse en bucle y pueden responder a eventos del usuario, como se mencionó anteriormente. [ 50 ]<animate><animateMotion><animateColor>
Fuentes
Al igual que con HTML y CSS, el texto en SVG puede hacer referencia a archivos de fuente externos, como las fuentes del sistema. Si los archivos de fuente necesarios no existen en la máquina donde se renderiza el archivo SVG, es posible que el texto no se muestre como se espera. Para superar esta limitación, el texto se puede mostrar en una fuente SVG , donde los glifos necesarios se definen en SVG como una fuente a la que luego se hace referencia desde el elemento. [ 51 ]<text>
Metadatos
De acuerdo con la iniciativa de la Web Semántica del W3C , SVG permite a los autores proporcionar metadatos sobre el contenido SVG. La principal funcionalidad es el elemento, donde el documento se puede describir utilizando propiedades de metadatos de Dublin Core (por ejemplo, título, creador/autor, asunto, descripción, etc.). También se pueden utilizar otros esquemas de metadatos. Además, SVG define elementos y donde los autores también pueden proporcionar material descriptivo en texto plano dentro de una imagen SVG para facilitar la indexación, la búsqueda y la recuperación por diversos medios. [ 52 ]<metadata><title><desc>

Un documento SVG puede definir componentes como formas, degradados, etc., y utilizarlos repetidamente. Las imágenes SVG también pueden contener gráficos rasterizados , como imágenes PNG y JPEG , y otras imágenes SVG.

Este código generará las formas coloreadas que se muestran en la imagen, excluyendo la cuadrícula y las etiquetas:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width= "391" height= "391" viewBox= "-70.5 -70.5 391 391" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" > <rect fill= "#fff" stroke= "#000" x= "-70" y= "-70" width= "390" height= "390" /> <g opacity= "0.8" > <rect x= <circle cx = "125" cy= "125" r = "75" fill = "orange" /> <polyline points= "50,150 50,200 200,200 200,100" stroke= "red" stroke-width = " 4 " fill = " none " / > < line x1 = " 50 " y1 = "50" x2 = " 200 " y2 = " 200 " stroke = "blue" stroke-width= " 4" /> </g> </svg>

Implementación

El uso de SVG en la web se vio limitado por la falta de compatibilidad con versiones antiguas de Internet Explorer (IE). Muchos sitios web que ofrecen imágenes SVG también las proporcionan en formato ráster , ya sea automáticamente mediante negociación de contenido HTTP o permitiendo al usuario seleccionar directamente el archivo.

navegadores web

Konqueror fue el primer navegador en admitir SVG en su versión 3.2, lanzada en febrero de 2004. [ 53 ] En 2011, todos los principales navegadores de escritorio, y muchos otros menos conocidos, contaban con algún nivel de compatibilidad con SVG. Las implementaciones de otros navegadores aún no estaban completas; consulte la comparación de motores de renderizado para obtener más detalles.

Algunas versiones anteriores de Firefox (por ejemplo, versiones entre 1.5 y 3.6 [ 54 ] ), así como algunos otros navegadores web, ahora obsoletos, capaces de mostrar gráficos SVG, necesitaban que se incrustaran en elementos o para mostrarlos integrados como partes de una página web HTML en lugar de usar la forma estándar de integrar imágenes con . [ 55 ] Sin embargo, las imágenes SVG se pueden incluir en páginas XHTML usando espacios de nombres XML . [ 56 ]<object><iframe><img>

Tim Berners-Lee , el inventor de la World Wide Web , criticó las primeras versiones de Internet Explorer por su falta de compatibilidad con SVG. [ 57 ]

  • Opera (desde la versión 8.0) es compatible con la especificación SVG 1.1 Tiny, mientras que Opera 9 incluye compatibilidad con SVG 1.1 Basic y parcialmente con SVG 1.1 Full. Opera 9.5 ofrece compatibilidad parcial con SVG Tiny 1.2. También es compatible con SVGZ (SVG comprimido).
  • Los navegadores basados ​​en el motor de renderizado Gecko (como Firefox , Flock , Camino y SeaMonkey ) han tenido soporte incompleto para la especificación SVG 1.1 Full desde 2005. El sitio de Mozilla ofrece una descripción general de los módulos compatibles con Firefox [ 58 ] y de los módulos en desarrollo. [ 59 ] Gecko 1.9, incluido en Firefox 3.0 , añade soporte para más elementos de la especificación SVG (incluidos filtros). [ 60 ]
  • Pale Moon , que utiliza el motor de diseño Goanna (una bifurcación del motor Gecko ), es compatible con SVG.
  • Los navegadores basados ​​en WebKit (como Safari de Apple , Google Chrome y OmniWeb de The Omni Group ) han tenido soporte incompleto para la especificación SVG 1.1 Full desde 2006. [ 61 ]
  • Amaya tiene soporte parcial para SVG.
  • Internet Explorer 8 y versiones anteriores no admiten SVG. [ 62 ] [ 63 ] IE9 (lanzado el 14 de marzo de 2011) admite el conjunto básico de características SVG. [ 64 ] IE10 amplió la compatibilidad con SVG al agregar filtros SVG 1.1. [ 65 ]
  • Microsoft Edge Legacy admite SVG 1.1. [ 66 ]
  • El navegador Maxthon Cloud también es compatible con SVG.

Existen varias ventajas en el soporte nativo y completo: no se necesitan complementos , SVG se puede mezclar libremente con otro contenido en un solo documento, y la representación y la programación se vuelven considerablemente más fiables. [ 67 ]

dispositivos móviles

La compatibilidad con SVG puede estar limitada a SVGT en teléfonos inteligentes más antiguos o con funciones más limitadas , o puede estar limitada principalmente por su sistema operativo respectivo. Adobe Flash Lite ha sido compatible opcionalmente con SVG Tiny desde la versión 1.1. En la conferencia SVG Open 2005, Sun demostró una implementación móvil de SVG Tiny 1.1 para la plataforma Connected Limited Device Configuration (CLDC). [ 68 ]

Los móviles que usan Opera Mobile , así como el navegador integrado del iPhone , también incluyen compatibilidad con SVG. Sin embargo, aunque usaba el motor WebKit , el navegador integrado de Android no era compatible con SVG antes de la versión 3.0 (Honeycomb). [ 69 ] Antes de la versión 3.0, Firefox Mobile 4.0b2 (beta) para Android fue el primer navegador que se ejecutaba en Android en admitir SVG de forma predeterminada. [ 70 ]

El nivel de compatibilidad con SVG Tiny varía según el dispositivo móvil y el motor SVG instalado. Muchos dispositivos móviles más recientes admiten funciones adicionales más allá de SVG Tiny 1.1, como degradados y opacidad; a esto a veces se le denomina "SVGT 1.1+", aunque no existe un estándar al respecto.

BlackBerry de RIM tiene soporte integrado para SVG Tiny 1.1 desde la versión 5.0. [ 71 ] El soporte continúa para el navegador BlackBerry Torch basado en WebKit en OS 6 y 7. [ 72 ]

La plataforma S60 de Nokia tiene soporte integrado para SVG. Por ejemplo, los iconos generalmente se renderizan utilizando el motor SVG de la plataforma. Nokia también ha liderado el grupo de expertos JSR 226: API de gráficos vectoriales 2D escalables que define la API Java ME para la presentación y manipulación de SVG. Esta API se ha implementado en S60 Platform 3rd Edition Feature Pack 1 y versiones posteriores. [ 73 ] Algunos teléfonos de la Serie 40 también son compatibles con SVG (como el Nokia 6280 ). [ 74 ]

La mayoría de los teléfonos Sony Ericsson a partir del K700 (según la fecha de lanzamiento) son compatibles con SVG Tiny 1.1. Los teléfonos a partir del K750 también son compatibles con funciones como la opacidad y los degradados. Los teléfonos con la plataforma Java 8 de Sony Ericsson son compatibles con JSR 226.

Windows Phone es compatible con SVG desde la versión 7.5.

SVG también es compatible con varios dispositivos móviles de Motorola , Samsung , LG y Siemens mobile / BenQ-Siemens . eSVG, una biblioteca de renderizado SVG escrita principalmente para dispositivos integrados , está disponible en algunas plataformas móviles. [ 75 ] [ 76 ]

Creación de contenido

Además de introducir código manualmente y utilizar editores de gráficos vectoriales, los usuarios pueden usar la función de concatenación de los programas de hojas de cálculo para unir valores numéricos de celdas y cadenas de texto en serie, para generar declaraciones SVG completas.

Las imágenes SVG se pueden codificar manualmente o generar con un editor de gráficos vectoriales, como Inkscape , Adobe Illustrator , Adobe Animate o CorelDRAW , y se pueden convertir a formatos de imagen rasterizados comunes, como PNG, utilizando el mismo software. Además, editores como Inkscape y Boxy SVG ofrecen herramientas para trazar imágenes rasterizadas a curvas de Bézier , generalmente mediante sistemas de trazado de imágenes como potrace , [ 77 ] autotrace e imagetracerjs.

Se puede programar software para renderizar imágenes SVG utilizando una biblioteca como librsvg , empleada por GNOME desde el año 2000, y por Batik y ThorVG desde 2020 para sistemas ligeros. Las imágenes SVG también se pueden convertir a cualquier formato de imagen popular deseado mediante ImageMagick , una utilidad gratuita de línea de comandos (que también utiliza librsvg internamente).

Para aplicaciones web, el modo de uso denominado SVG en línea permite incrustar contenido SVG dentro de un documento HTML mediante una etiqueta. Sus capacidades gráficas se pueden emplear para crear interfaces de usuario sofisticadas, ya que SVG y HTML comparten contexto, gestión de eventos y CSS.<svg>

Otros usos de SVG incluyen la incrustación para su uso en procesamiento de textos (por ejemplo, con LibreOffice ) y autoedición (por ejemplo, Scribus ), la creación de gráficos (por ejemplo, gnuplot ) y la importación de trazados (por ejemplo, para su uso en GIMP o Blender ). Los servicios de aplicación Microsoft 365 y Microsoft Office 2019 ofrecen compatibilidad para exportar, [ 78 ] importar y editar imágenes SVG. El identificador de tipo uniforme para SVG utilizado por Apple es public.svg-imagey cumple con public.imagey public.xml.

Seguridad

Como formato de documento, similar a los documentos HTML, SVG puede alojar scripts o CSS. Esto representa un problema cuando un atacante puede subir un archivo SVG, como una imagen de perfil, a un sitio web y el archivo se trata como una imagen normal, pero contiene contenido malicioso. [ 79 ] Por ejemplo, si un archivo SVG se implementa como imagen de fondo CSS, o un logotipo en un sitio web o en una galería de imágenes, entonces, cuando la imagen se carga en un navegador, activa un script u otro contenido. Esto podría bloquear el navegador (el ataque de Billion Risas ), pero también podría provocar inyección HTML y ataques de secuencias de comandos entre sitios (XSS ). Por lo tanto, el W3C estipula ciertos requisitos cuando SVG se usa simplemente para imágenes: Seguridad de SVG. [ 80 ]

El W3C afirma que el SVG en línea (un archivo SVG cargado de forma nativa en un sitio web) se considera un riesgo de seguridad menor porque el contenido forma parte de un documento más grande, por lo que no sería inesperado el uso de scripts y CSS. [ 80 ]

El estándar MPEG-4 Parte 20 – Representación ligera de escenas de aplicaciones (LASeR) y formato de agregación simple (SAF) se basa en SVG Tiny. [ 81 ] Fue desarrollado por MPEG ( ISO/IEC JTC 1 /SC29/WG11) y publicado como ISO/IEC 14496-20:2006. [ 82 ] 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 y representación de fuentes de última generación. [ 83 ] SVG también se incorporó en MPEG-4 Parte 11 , en el formato Extensible MPEG-4 Textual (XMT) – una representación textual del contenido multimedia MPEG-4 mediante XML . [ 84 ]

creadores de miniaturas

Aunque SVG ha tenido una amplia adopción en el mercado como el estándar de facto para gráficos vectoriales escalables, los archivos aún no son compatibles de forma nativa en Windows, por lo que los usuarios deben descargar un generador de miniaturas de vista previa de SVG para el Explorador de archivos [ 85 ] o usar un explorador de archivos alternativo con soporte nativo.

Véase también

Referencias

  1. "Registro de tipo de medio para imagen/svg+xml" . W3C . Archivado del original el 19 de febrero de 2014. Consultado el 5 de febrero de 2014 .
  2. St. Laurent, Simon; Makoto, Murata; Kohn, Dan (enero de 2001). Tipos de medios XML . Grupo de trabajo de la red. doi : 10.17487/RFC3023 . RFC 3023 .Estándar propuesto. sec. 8.19. Obsoleto por RFC 7303. Actualizado por RFC 6839. Obsoleto RFC 2376. Actualiza RFC 2048 .    
  3. 1 2 3 "Origen secreto de SVG" . Consorcio World Wide Web . 21 de diciembre de 2007. Archivado del original el 24 de diciembre de 2020. Recuperado el 1 de enero de 2011 .
  4. "Gráficos esquemáticos" . W3C . Archivado del original el 31 de enero de 2022. Consultado el 19 de julio de 2019 .
  5. Al-Shamma, Nabeel; Robert Ayers; Richard Cohn; Jon Ferraiolo; Martin Newell; Roger K. de Bry; Kevin McCluskey; Jerry Evans (10 de abril de 1998). "Precision Graphics Markup Language (PGML)" . W3C . Archivado del original el 16 de diciembre de 2021. Recuperado el 8 de mayo de 2009 .
  6. Mathews, Brian; Brian Dister; John Bowler; Howard Cooperstein; Ajay Jindal; Tuan Nguyen; Peter Wu; Troy Sandal (13 de mayo de 1998). "Vector Markup Language (VML)" . W3C . Archivado del original el 6 de noviembre de 2021. Recuperado el 8 de mayo de 2009 .
  7. "Lenguaje de marcado de hipergráficos (HGML)" . W3C . Archivado del original el 7 de abril de 2022. Consultado el 19 de julio de 2019 .
  8. "Perfil WebCGM" . xml.coverpages.org . Archivado del original el 14 de agosto de 2022. Consultado el 4 de marzo de 2019 .
  9. "Gráficos vectoriales escalables (SVG) 2" . W3C. Archivado del original el 27 de enero de 2017. Consultado el 28 de enero de 2017 .
  10. Ferraiolo, Jon (4 de septiembre de 2001). "Especificación de gráficos vectoriales escalables (SVG) 1.0" . Consorcio World Wide Web. Archivado del original el 11 de mayo de 2008. Recuperado el 24 de febrero de 2010 .
  11. 1 2 Ferraiolo, Jon (16 de agosto de 2011). "Especificación de gráficos vectoriales escalables (SVG) 1.1" . Consorcio World Wide Web. Archivado del original el 16 de septiembre de 2012. Recuperado el 14 de abril de 2016 .
  12. Capin, Tolga (15 de junio de 2009). "Perfiles SVG móviles: SVG Tiny y SVG Basic" . Consorcio World Wide Web. Archivado del original el 9 de octubre de 2010. Recuperado el 24 de octubre de 2010 .
  13. Andersson, Ola (22 de diciembre de 2008). "Especificación de gráficos vectoriales escalables (SVG) Tiny 1.2" . Consorcio World Wide Web. Archivado del original el 7 de diciembre de 2020. Recuperado el 24 de febrero de 2010 .
  14. Dengler, Patrick (8 de julio de 2010). "Llegando a SVG 2.0: Un informe de la reunión presencial del Grupo de Trabajo de SVG (24 de mayo - 1 de junio de 2010)" . Microsoft Developer Network . Microsoft . Archivado del original el 12 de mayo de 2016. Recuperado el 26 de agosto de 2010 .
  15. 1 2 "Gráficos vectoriales escalables (SVG) 1.1 (Segunda edición)" . W3C. Archivado del original el 24 de septiembre de 2011. Recuperado el 29 de agosto de 2011 .
  16. Brotman, Alex; Adams, J. Trent (29 de julio de 2020). "SVG Tiny Portable/Secure" . Ietf Datatracker . Archivado del original el 14 de febrero de 2021. Recuperado el 9 de febrero de 2021 .
  17. "Guía de implementación" . Grupo BIMI . Archivado del original el 28 de febrero de 2021. Consultado el 9 de febrero de 2021 .
  18. 1 2 "Apéndice K: Cambios de SVG 1.1" . Consorcio World Wide Web. 26 de mayo de 2020. Archivado del original el 4 de febrero de 2021. Recuperado el 31 de diciembre de 2020 .
  19. "Capítulo 11: Texto" . Consorcio World Wide Web. 26 de mayo de 2020. Archivado del original el 21 de abril de 2021. Consultado el 31 de diciembre de 2020 .
  20. "Gráficos vectoriales escalables (SVG) 2" . Consorcio World Wide Web. 15 de septiembre de 2016. Archivado del original el 9 de septiembre de 2021. Consultado el 17 de agosto de 2021 .
  21. "Gráficos vectoriales escalables (SVG) 2" . Consorcio World Wide Web. 4 de octubre de 2018. Archivado del original el 19 de julio de 2021. Consultado el 17 de agosto de 2021 .
  22. "Gráficos vectoriales escalables (SVG) 2" . Consorcio World Wide Web. 14 de septiembre de 2025. Archivado del original el 10 de febrero de 2021. Consultado el 7 de enero de 2024 .
  23. Alex, Danilo; Fujisawa, Jun (2002). "SVG como lenguaje de descripción de páginas" . svgopen.org. Archivado del original el 29 de mayo de 2010. Recuperado el 24 de febrero de 2010 .
  24. Paul, Festa (9 de enero de 2003). "El W3C publica un estándar de scripting, advertencia" . CNet . Archivado del original el 17 de mayo de 2011. Recuperado el 24 de febrero de 2010 .
  25. 1 2 "SVG Tiny 1.2" . Especificación de gráficos vectoriales escalables (SVG) Tiny 1.2 . W3C . 22 de diciembre de 2008. Archivado del original el 30 de enero de 2014. Recuperado el 5 de marzo de 2014 .
  26. "SVG en los servicios de mensajería y transmisión multimedia 3GPP (versión de marzo de 2003)" . SVG Open. 2003. Archivado del original el 26 de junio de 2009. Consultado el 19 de octubre de 2009 .
  27. "Servicio de mensajería multimedia (MMS) de 3GPP; formatos y códecs multimedia (versión 5); 3GPP TS 26.140 V5.2.0 (2002-12); especificación técnica" ( documento comprimido ) . 3GPP . 2 de enero de 2003. Archivado del original el 8 de febrero de 2007. Consultado el 25 de febrero de 2010 .
  28. "Proyecto de Asociación de Tercera Generación; Servicios del Grupo de Especificaciones Técnicas y Aspectos del Sistema; Servicio de Mensajería Multimedia (MMS); Formatos y códecs multimedia (Versión 5)" ( documento comprimido ) . 3GPP TS 26.140 V5.2.0 (2002-12) . 3GPP . Marzo de 2003. Archivado del original el 12 de febrero de 2007. Consultado el 24 de febrero de 2010 .
  29. "Detalle de la especificación 3GPP - 3GPP TS 26.141: Mensajería y presencia del sistema multimedia IP (IMS); formatos y códecs multimedia" . 3GPP . 10 de diciembre de 2009. Archivado del original el 7 de octubre de 2008. Consultado el 24 de febrero de 2010 .
  30. "Listado de teléfonos compatibles con SVG" . Svg.org. Archivado del original el 8 de enero de 2010. Consultado el 24 de octubre de 2010 .
  31. Véase www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers , donde se indica : " Las implementaciones de SVG deben admitir correctamente flujos de datos codificados con gzip [RFC 1952] y deflate [RFC 1951 ] , para cualquier tipo de contenido ( incluidos SVG, archivos de script e imágenes). "  
  32. "Guardar SVG comprimido (SVGZ)" . SVG Zone . Adobe Systems . 14 de julio de 2009. Archivado del original el 1 de junio de 2010. Consultado el 24 de febrero de 2010 .
  33. Por ejemplo, dev .w3 .org /SVG /profiles /1 .1F2 /test /harness /htmlObject /conform-viewers-01-t .html
  34. "Especificación SVG, "Rutas"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 21 de junio de 2012. Recuperado el 19 de octubre de 2009 .
  35. "Especificación SVG, "Formas básicas"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 2 de octubre de 2009. Recuperado el 19 de octubre de 2009 .
  36. "Especificación SVG, "Texto"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 6 de octubre de 2009. Recuperado el 19 de octubre de 2009 .
  37. "Especificación SVG, "Pintura: Relleno, Trazado y Símbolos de Marcador"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 17 de septiembre de 2009. Recuperado el 19 de octubre de 2009 .
  38. "Especificación SVG, "Color"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 7 de septiembre de 2009. Recuperado el 19 de octubre de 2009 .
  39. "Especificación SVG, "Gradientes y patrones"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 21 de septiembre de 2009. Recuperado el 19 de octubre de 2009 .
  40. "Registro IRC de svg el 17-11-2008" . W3C. 2008. Archivado del original el 10 de octubre de 2016. Recuperado el 25 de mayo de 2009. DS: Las prioridades deberían ser el diseño, las curvas de difusión, 2.5D y asegurarnos de que trabajamos bien con CSS en eso.
  41. "Propuestas para la próxima especificación SVG" . W3C. 16 de marzo de 2009. Archivado del original el 14 de mayo de 2011. Recuperado el 25 de mayo de 2009. De hecho, planeamos agregar nuevas capacidades de gradiente a SVG en la próxima versión, y estamos estudiando las curvas de difusión, que creo que satisfarán sus necesidades... *Las curvas de difusión* parecen una idea realmente genial.
  42. Rusin, Zack (2008). "SVG en KDE: Libertad de belleza" . SVG Open. Archivado del original el 22 de julio de 2009. Recuperado el 25 de mayo de 2009 .
  43. Orzan, Alexandrina; Bousseau, Adrien; Winnemöller, Holger; Barla, Pascal; Thollot, Joëlle; Salesin, David (2008). "Curvas de difusión: una representación vectorial para imágenes sombreadas suaves" ( PDF) . ACM Transactions on Graphics . 27. doi : 10.1145/1360612.1360691 . Archivado (PDF) del original el 18 de junio de 2009. Recuperado el 25 de mayo de 2009 .
  44. "Gráficos vectoriales escalables (SVG) 2, borrador del editor del W3C, 13 de junio de 2013" . SVG WG. 2013. Archivado del original el 4 de diciembre de 2013. Consultado el 17 de septiembre de 2013 .
  45. "Especificación SVG, "Recorte, enmascaramiento y composición"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 1 de diciembre de 2009. Recuperado el 19 de octubre de 2009 .
  46. "Especificación SVG, "Efectos de filtro"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 28 de agosto de 2006. Recuperado el 19 de octubre de 2009 .
  47. "Especificación SVG, "Interactividad"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 5 de julio de 2019. Recuperado el 19 de octubre de 2009 .
  48. "Especificación SVG, "Enlace"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 25 de junio de 2019. Recuperado el 19 de octubre de 2009 .
  49. "Especificación SVG, "Scripting"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 1 de octubre de 2009. Recuperado el 19 de octubre de 2009 .
  50. "Especificación SVG, "Animación"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 27 de agosto de 2006. Recuperado el 19 de octubre de 2009 .
  51. "Especificación SVG, "Fuentes"" . Consorcio World Wide Web. 14 de enero de 2003. Archivado del original el 26 de septiembre de 2009. Recuperado el 19 de octubre de 2009 .
  52. "Especificación SVG, "Metadatos"" . Consorcio World Wide Web. Archivado del original el 3 de mayo de 2009. Recuperado el 19 de octubre de 2009 .
  53. Streichardt, Andreas (16 de septiembre de 2003). "KDE conquista los vectores con KSVG" . Noticias de KDE . Archivado del original el 30 de junio de 2023. Recuperado el 11 de febrero de 2012 .
  54. "Error 276431: el SVG externo no se carga desde la etiqueta img" . Mozilla. Archivado del original el 24 de octubre de 2012. Consultado el 9 de noviembre de 2011 .
  55. Lusotec (25 de febrero de 2009). "Imagen SVG no mostrada por Firefox" . mozilla.dev.tech.svg . Grupos de Google . Archivado del original el 14 de mayo de 2011. Recuperado el 25 de febrero de 2010 .
  56. Brettz9 (25 de agosto de 2008). "Introducción a SVG en HTML" . Centro de desarrolladores de Mozilla . Mozilla . Archivado del original el 5 de diciembre de 2008. Consultado el 25 de febrero de 2010 .
  57. Svensson, Peter (10 de septiembre de 2008). "El creador de la web detecta un fallo en Internet Explorer" . NBC News . Associated Press. Archivado del original el 9 de noviembre de 2013. Consultado el 25 de febrero de 2010 .
  58. "SVG en Firefox" . Centro de desarrolladores de Mozilla . Mozilla . 23 de octubre de 2009. Archivado del original el 23 de junio de 2008. Consultado el 25 de febrero de 2010 .
  59. "Estado de SVG de Mozilla" . Mozilla . Archivado del original el 5 de marzo de 2010. Consultado el 25 de febrero de 2010 .
  60. Mgjbot (15 de enero de 2008). "Mejoras de SVG en Firefox 3" . Centro de desarrolladores de Mozilla . Mozilla . Archivado del original el 9 de febrero de 2014. Recuperado el 25 de febrero de 2010 .
  61. "Estado de WebKit SVG" . WebKit . 5 de enero de 2010. Archivado del original el 10 de febrero de 2010. Consultado el 25 de febrero de 2010 .
  62. "Chat de la Zona de Expertos de Windows Internet Explorer 8 (19 de junio de 2008)" . Microsoft. 19 de junio de 2008. Archivado del original el 17 de marzo de 2010. Consultado el 24 de octubre de 2010 .
  63. Schiller, Jeff (13 de febrero de 2010). "Soporte para SVG" . Archivado del original el 16 de febrero de 2009. Recuperado el 25 de febrero de 2010 .
  64. "Novedades de Internet Explorer 9" . Red de desarrolladores de Microsoft . Microsoft . 22 de marzo de 2011. Archivado del original el 5 de abril de 2011. Consultado el 22 de marzo de 2011 .
  65. "SVG (Windows)" . Centro de desarrollo de Internet Explorer . Microsoft . Archivado del original el 20 de marzo de 2014. Consultado el 27 de agosto de 2014 .
  66. "Estado y hoja de ruta de las características de la plataforma web Microsoft Edge - Desarrollo de Microsoft Edge" . developer.microsoft.com . Archivado del original el 15 de abril de 2018. Consultado el 19 de abril de 2018 .
  67. "Prepárate para navegar sin complementos" . MSDN . 2014. Archivado del original el 31 de diciembre de 2014. Consultado el 5 de marzo de 2014 .
  68. "SVG Open 2005 Conference and Exhibition - Proceedings - Cartoon Oriented User Interfaces" . svgopen.org. Archivado del original el 3 de diciembre de 2010. Consultado el 29 de agosto de 2010 .
  69. "El navegador no muestra imágenes SVG" . Archivado del original el 20 de mayo de 2011. Consultado el 1 de enero de 2011 .
  70. "Firefox Mobile 4.0b2 (beta) para Android admite imágenes SVG" . Problema 1376 de Android . 16 de diciembre de 2010. Archivado del original el 21 de agosto de 2014. Consultado el 29 de enero de 2014 .
  71. "Soporte para SVG" . RIM. Archivado del original el 10 de octubre de 2011. Recuperado el 6 de octubre de 2011 .
  72. "BlackBerry Torch: La tarjeta de puntuación para desarrolladores de HTML5" . Sencha . Archivado del original el 5 de marzo de 2014. Recuperado el 6 de octubre de 2011 .
  73. "Información del producto S60" . S60.com. Archivado del original el 13 de octubre de 2007. Consultado el 19 de octubre de 2009 .
  74. "Nokia lanza el kit de desarrollo de software Series 40, 6.ª edición, para la plataforma de desarrollo móvil de mayor volumen del mundo" . www.fieldtechnologiesonline.com . Consultado el 12 de junio de 2025 .
  75. Jezic, Damir (15–17 de julio de 2002). "SVG para sistemas embebidos" . Zúrich, 2002. svgopen.org. Archivado del original el 16 de marzo de 2012. Consultado el 5 de abril de 2012 .
  76. "eSVG" . Intesis Intelligent Embedded Software . 2010. Archivado del original el 3 de marzo de 2012. Recuperado el 29 de enero de 2014 .
  77. Selinger, Peter (2001–2013). "Potrace – Transformación de mapas de bits en gráficos vectoriales" . Proyecto Potrace de SourceForge . Archivado del original el 9 de septiembre de 2009. Recuperado el 29 de enero de 2014 .
  78. "Novedades de PowerPoint para Microsoft 365" . support.microsoft.com . Septiembre de 2019. Archivado del original el 13 de marzo de 2021. Consultado el 17 de abril de 2021 .
  79. Nguyen, Thanh Nguyen (7 de noviembre de 2019). "Anatomía de la superficie de ataque de gráficos vectoriales escalables (SVG) en la web" . Blog de Fortinet . Archivado del original el 21 de febrero de 2023. Recuperado el 21 de febrero de 2023 .
  80. 1 2 "Seguridad SVG - Wiki del W3C" . W3C . Archivado del original el 21 de febrero de 2023. Recuperado el 21 de febrero de 2023 .
  81. Concolato, Cyril (julio de 2005). "Documento técnico sobre MPEG-4 LASeR" . Organización Internacional de Normalización . Archivado del original el 25 de julio de 2011. Recuperado el 29 de agosto de 2010 .
  82. "ISO/IEC 14496-20:2008 - Tecnología de la información – Codificación de objetos audiovisuales – Parte 20: Representación ligera de escenas de aplicación (LASeR) y formato de agregación simple (SAF)" . Organización Internacional de Normalización . Archivado del original el 14 de mayo de 2011. Consultado el 30 de octubre de 2009 .
  83. "LASeR: el estándar MPEG para servicios de contenido multimedia enriquecido" (PDF) . Archivado (PDF) del original el 21 de febrero de 2011. Recuperado el 11 de abril de 2010 .
  84. Chiariglione, Leonardo (8 de marzo de 2005). "Montando los bits de los medios: bits y bytes" . Archivado del original el 25 de septiembre de 2010. Recuperado el 30 de octubre de 2009 .
  85. GrantMeStrength. "Utilidad de complementos PowerToys File Explorer para Windows" . learn.microsoft.com . Consultado el 29 de junio de 2026 .
  • Especificaciones de página SVG del W3C , lista de implementacionesEdita esto en Wikidata
  • Introducción a SVG del W3C Introducción al W3C (borrador) bajo los auspicios del Grupo de Interés en SVG
  • MDN - SVG: Gráficos vectoriales escalables