¿Qué es el formato de archivo SVG?
La abreviatura .svg significa Scalable Vector Graphics (Gráficos Vectoriales Escalables), y es un formato para archivos gráficos en 2D. SVG es un lenguaje basado en XML diseñado para describir gráficos 2D en texto plano. El formato .svg fue desarrollado por el *World Wide Web Consortium (W3C)* y es el formato estándar para mostrar gráficos vectoriales en la web, convirtiéndose en una Recomendación del W3C en 2001 (SVG 1.1 le siguió en 2011).
Debido a que se utiliza texto para describir los gráficos vectoriales, la escala de un archivo .svg puede cambiarse sin ninguna pérdida de calidad. En pocas palabras: el contenido del archivo, una imagen, puede mostrarse a cualquier tamaño sin pixelación, lo que hace que el .svg sea ideal para iconos, logotipos, ilustraciones y elementos de interfaz de usuario que deben verse nítidos en cualquier resolución.
Los archivos .svg también pueden comprimirse utilizando la compresión GZIP, tras lo cual el formato cambia a .svgz, con el tamaño final reducido aproximadamente entre un 50 y un 80%.
Debido a su naturaleza textual basada en XML, los archivos .svg pueden ser buscados, indexados, comprimidos y programados mediante scripts, lo que los hace perfectamente adecuados para compartir gráficos en la web. Todos los navegadores modernos renderizan de forma nativa imágenes .svg sin necesidad de ningún complemento. Los archivos .svg son igualmente compatibles con editores de texto plano y editores vectoriales avanzados como Inkscape o Adobe Illustrator, y pueden incrustar imágenes ráster PNG, animaciones, estilos CSS y JavaScript interactivo directamente dentro del archivo. El tipo MIME es image/svg+xml.
Seguridad y protección
RIESGO: MEDIUMEl SVG es XML y puede INCRUSTAR CSS y JavaScript, por lo que un .svg abierto en un navegador puede ejecutar scripts; esto convierte a los SVG maliciosos en un vector real de cross-site scripting, redireccionamiento y phishing, y los archivos adjuntos de correo electrónico SVG se han utilizado en campañas de malware (una «imagen inofensiva» que en realidad contiene un script o un formulario HTML). Trate los archivos .svg no solicitados como páginas web, no como imágenes: no los abra si provienen de remitentes desconocidos, y en los sitios web desinfecte los SVG subidos (elimine scripts y controladores de eventos) antes de servirlos. Abrir un SVG en un visor que no admita scripts o en un editor de código para inspeccionar el XML es seguro. Evite los sitios de descarga sospechosos de «abridor/convertidor de SVG gratuito» que incluyen adware: el navegador e Inkscape cubren las necesidades reales.
Detalles del formato
en pocas palabrasProgramas que abren archivos SVG
Detalles técnicos
especificación profunda| Estructura del archivo | Texto XML plano; legible por humanos y editable en cualquier editor de texto sin software especial |
| Tipo MIME | image/svg+xml |
| Codificación de caracteres | UTF-8 (declarado en la cabecera XML); el archivo es texto Unicode plano sin contenido binario |
| Escalabilidad | Escalado infinito sin pérdidas: la geometría se define matemáticamente, por lo que no se produce pixelación a ningún tamaño |
| Variante comprimida | .svgz - el mismo XML de SVG envuelto en gzip; el tamaño del archivo suele ser entre un 50 y un 80% menor |
| Soporte de animación | Se admiten tanto las animaciones declarativas SMIL como las animaciones y transiciones CSS |
| Scripting | JavaScript puede consultar y modificar elementos SVG a través de la API DOM estándar, permitiendo la interactividad |
| Estilizado | El CSS se puede aplicar mediante atributos de estilo en línea, bloques <style> incrustados o hojas de estilo externas |
| Sistema de coordenadas | Lienzo infinito con unidades definidas por el usuario; el atributo viewBox mapea las coordenadas del documento al viewport |
| Primitivas de forma | path, circle, rect, ellipse, polygon, polyline, line - además de degradados, patrones, máscaras y efectos de filtro |
| Renderizado en el navegador | Soporte nativo en todos los navegadores modernos (Chrome, Firefox, Edge, Safari) - no requiere complementos |
| Incrustación en HTML | Puede usarse en línea como <svg>, referenciarse mediante <img>, <object>, <embed>, o como una imagen de fondo CSS |
| Accesibilidad | Los nodos de texto son legibles por máquinas; admite elementos <title> y <desc> además de atributos ARIA |
| Incrustación de ráster | Las imágenes ráster externas (PNG, JPEG) pueden incrustarse mediante elementos <image> usando rutas de archivo o URI de datos |
| Identificación del archivo | Sin bytes mágicos binarios; se identifica por el elemento raíz <svg, opcionalmente precedido por una declaración XML o DOCTYPE |
| Lanzado | 2001 (SVG 1.0 W3C Recommendation); SVG 1.1 (2011); SVG 2 in development |
| Estándar abierto | Sí · libre de regalías |
| Especificación | www.w3.org |
Conversiones de SVG
Preguntas y respuestas de la comunidad
preguntado por usuariosAún no hay preguntas; sea el primero en preguntar sobre los archivos SVG.