Formato de archivo SVG
Un SVG no es una imagen sino un conjunto de instrucciones de dibujo escritas en XML, por lo que se mantiene nítido a cualquier tamaño y puede editarse en un editor de texto.
o arrástralos aquí · imágenes, vídeo, audio y documentos · hasta 2 GB
¿Qué es SVG?
SVG se convirtió en recomendación del W3C en 2001 y por dentro es texto plano. En lugar de una rejilla de píxeles guarda formas: este trazado, este grosor de línea, este color de relleno, estas coordenadas. El navegador ejecuta esas instrucciones al tamaño que pida la maquetación, y por eso un logotipo en SVG es perfectamente nítido en un teléfono, en una pantalla 5K y en un cartel impreso a partir de los mismos pocos kilobytes.
Ser texto tiene consecuencias más allá del escalado. Un SVG muestra diferencias limpias en Git, de modo que los cambios de diseño se revisan línea a línea. Sus elementos pueden estilizarse con CSS y animarse o manipularse con JavaScript como cualquier otro nodo del DOM. Y comprime tan bien con gzip que un conjunto complejo de iconos suele costar menos ancho de banda que un solo sprite PNG.
Esa misma apertura es un asunto de seguridad. Como SVG puede contener elementos <script>, referencias externas y manejadores de eventos, un archivo subido por un usuario y servido desde su propio dominio se convierte en vector de cross-site scripting. Todo lo que llegue de fuera debería sanearse o servirse desde un origen aparte, precaución que ningún formato de mapa de bits exige.
| Extensión | .svg |
|---|---|
| Categoría | Imagen |
| Tipo MIME | image/svg+xml |
| Año de aparición | 2001 |
| Desarrollado por | W3C |
| Compresión | Vectorial (sin compresión de píxeles) |
| Transparencia | Sí |
| Animación | Sí |
SVG: preguntas frecuentes
- ¿Por qué mi SVG muestra la fuente equivocada?
- Porque el archivo referencia una fuente por su nombre y espera que quien lo vea la tenga. Si falta, el renderizador sustituye otra y la composición se descoloca. Convierta el texto a curvas antes de exportar, o incruste la fuente, y el dibujo pasará a ser autónomo.
- ¿Puedo convertir un JPEG o PNG a SVG?
- Solo mediante vectorización, que es una aproximación y no una conversión. Los vectorizadores detectan bordes y ajustan curvas sobre ellos, lo que funciona bien con logotipos y dibujo lineal plano. Las fotografías salen como miles de parches mal ajustados: más grandes que el original y peores de ver.
- ¿Por qué un SVG no aparece en Photoshop o Word?
- Muchos editores de mapas de bits y suites ofimáticas antiguas rasterizan el archivo al importarlo o lo rechazan de plano, y el soporte de filtros, máscaras y fuentes incrustadas es desigual. Exportar un PNG al tamaño que realmente necesita es la forma fiable de entregar arte vectorial a esas herramientas.
- ¿Es seguro aceptar subidas de SVG de usuarios?
- No sin sanearlas. SVG puede llevar JavaScript, manejadores de eventos y referencias externas, así que un archivo malicioso servido desde su dominio ejecuta código en la sesión de sus usuarios. Elimine el scripting con un saneador o sirva el contenido de usuario desde un origen aparte.
- ¿Cómo hago más pequeño un archivo SVG?
- Páselo por un optimizador como SVGO: los editores dejan capas ocultas, metadatos propios, precisión absurda en las coordenadas y definiciones sin usar. Redondear las coordenadas a uno o dos decimales y fusionar trazados suele reducir el archivo a la mitad sin cambio visible, y gzip en el servidor hace el resto.
- ¿Los iconos en SVG o en PNG?
- En SVG casi siempre. Un solo archivo cubre cualquier densidad de pantalla sin exportaciones @2x y @3x aparte, los colores se cambian con CSS y suele pesar menos. Use PNG solo donde el destino no represente SVG, como clientes de correo y algunas aplicaciones heredadas.