¿Qué es SVG?

Scalable Vector Graphics (SVG) es un formato basado en XML para gráficos vectoriales bidimensionales, texto, estilos, animación e interactividad. Sus elementos geométricos pueden escalar sin pérdida de resolución de rasterización.

Un documento SVG es un árbol XML de formas, trazados, texto, reglas de pintura, transformaciones y referencias que un motor de renderizado convierte en una escena bidimensional. La geometría sigue siendo editable e independiente de la resolución, aunque las imágenes rasterizadas incorporadas y los efectos de filtro siguen teniendo costos finitos de muestreo. SVG puede utilizarse como recurso de imagen o integrarse en un documento, y esos modos ofrecen distintos comportamientos de ejecución de scripts, aplicación de estilos y vinculación. Es adecuado para la creación, optimización, entrega y generación de derivados rasterizados de diagramas, iconos e ilustraciones.

viewBox recibe cuatro números (min-x, min-y, width, height) que definen qué rectángulo del sistema de coordenadas del propio dibujo se corresponde con el área de visualización, independientemente de los valores mostrados de width y height. Con el valor predeterminado xMidYMid meet de preserveAspectRatio, ese rectángulo se escala uniformemente, se mantiene completamente visible y se centra. Por lo tanto, un valor de viewBox que no coincida con la extensión del gráfico hace que este se muestre descentrado, reducido o rodeado de espacio vacío en todos los tamaños de renderizado.
La forma de cargar un SVG determina lo que puede hacer. SVG 2 establece que un archivo utilizado en lugar de una imagen rasterizada, por ejemplo mediante un elemento HTML img o una propiedad de imagen de CSS, debe ejecutarse en un modo restringido sin ejecución de scripts, referencias externas ni interactividad, y MDN enumera restricciones equivalentes que aplican los navegadores. El SVG en línea y el SVG incorporado como documento mediante iframe, object o embed no están restringidos de esta forma, por lo que la página puede aplicarles scripts y estilos.
Un SVG subido es un documento que puede contener scripts ejecutables, no solo una imagen. Las restricciones del contexto de imagen no se aplican cuando el archivo se abre directamente, por lo que un SVG proporcionado por un usuario y servido desde tu propio dominio puede ejecutar allí sus scripts. El registro del tipo de medio SVG también advierte que las entidades XML construidas de forma maliciosa pueden agotar la memoria de los procesadores XML. Sanea o rasteriza los SVG no confiables antes de servirlos, y trata el análisis del lado del servidor como procesamiento de entradas no confiables.
El texto en SVG se conserva como caracteres, por lo que puede buscarse, seleccionarse y leerse mediante tecnología de asistencia, pero SVG 2 señala que el renderizado correcto puede depender de disponer de la fuente utilizada durante la creación. Una fuente a la que el archivo hace referencia mediante una URL es un recurso externo, que los contextos de imagen no cargan a menos que se incluya en línea como una URL de data:. Convertir el texto en trazados fija su apariencia y supone renunciar a esas propiedades del texto.

Usa SVG para iconos, logotipos y diagramas independientes de la resolución cuando la compatibilidad del navegador o de la herramienta cubra las funciones necesarias. Sanea los archivos no confiables porque SVG puede contener scripts, enlaces y otro contenido activo.

Los datos de formatos de imagen de Transloadit para /image/resize, /image/enhance y /document/thumbs indican que SVG y SVGZ se pueden leer y escribir en ambos stacks de ImageMagick enumerados, y /image/resize escribe el formato indicado en su parámetro format, que es la vía documentada para producir un derivado rasterizado, como un PNG, a partir de un SVG subido.

Cuando format se deja sin configurar, la documentación indica que se utiliza el formato de entrada para la salida. Los datos de formatos no indican qué funciones de SVG respeta el motor de renderizado, como las referencias externas, las fuentes o los filtros. No se ejecutó ninguna Assembly para esta entrada; haz pruebas con tus propios archivos.

Explora los formatos de archivo y las capacidades de compresión de Transloadit

¿Qué es SVG?

Cómo funciona SVG

Datos clave

Cuándo importa SVG

Cómo ayuda Transloadit con SVG

Fuentes

Convierte tus conocimientos sobre multimedia en un pipeline funcional