Paso 1
Agregar uno completo SVG
Cargue un archivo .svg local de hasta 2 MiB o pegue el marcado SVG bien formado. La fuente permanece editable hasta que la borre o la reemplace.
Gratis SVG Optimizador y Minificador
Cargue o pegue el marcado SVG, optimícelo localmente con SVGO y compare el código, el tamaño del archivo y el resultado visual antes de descargarlo. No es necesario iniciar sesión ni cargar el servidor.
Uno SVG · hasta 2 MiB · procesamiento local
Optimiza un SVG en este navegador
Pegue el marcado o cargue un archivo, elija qué SVGO puede cambiar y luego compare la fuente exacta y el resultado antes de exportar.
XML completo con una raíz <svg>. Presione Ctrl/Comando+Entrar para optimizar.
Aún no hay resultados optimizados
Agregue un SVG completo, revise la configuración y ejecute el optimizador.
Cómo optimizar un SVG
Paso 2
Elige los límites de transformación
Mantenga los valores predeterminados conservadores o cambie deliberadamente las configuraciones de ID, elemento descriptivo, dimensión, precisión, secuencia de comandos, multipaso y formato.
Paso 3
Comparar y exportar el resultado
Revise los cambios exactos de bytes y estructuras, además de las vistas previas restringidas, luego copie o descargue el SVG optimizado y pruébelo en la integración deseada.
Qué cambios de optimización SVG
Un SVG es un marcado XML, por lo que a menudo se obtienen ahorros útiles eliminando datos exportados y representando las mismas formas de forma más compacta. La reducción disponible depende de cómo se creó la fuente.
Eliminar exportación y formato hinchado
La canalización SVGO predeterminada elimina comentarios, metadatos, espacios de nombres del editor, valores vacíos y otras marcas redundantes. También puede compactar estilos, colores, transformaciones y grupos.
Simplificar datos numéricos y de ruta
La precisión de coordenadas y las transformaciones de rutas pueden ahorrar bytes, especialmente en dibujos detallados. Los redondeos de menor precisión son más agresivos, por lo que la geometría fina requiere una revisión visual más cercana.
Esperar resultados dependientes de la fuente
Una exportación detallada de una herramienta de diseño puede ofrecer más datos extraíbles que un ícono minimizado a mano. Una fuente pequeña o ya optimizada puede permanecer casi sin cambios o hacerse más grande bajo la configuración de preservación o de salida legible.
Elija configuraciones de optimización más seguras SVG
El margen de beneficio más pequeño no es automáticamente el mejor activo. Mantenga la información que el sitio, componente, hoja de estilo o tecnología de asistencia circundante aún necesita.
Conservar los ID utilizados fuera del archivo
Las referencias internas URL se pueden actualizar durante la limpieza de ID, pero los selectores externos CSS, las búsquedas de JavaScript y los documentos en línea separados son invisibles para el optimizador. Conserve las identificaciones cuando esas dependencias puedan existir.
Mantener elementos descriptivos por defecto
Un título o descripción SVG puede contribuir a un nombre o explicación accesible dependiendo de cómo esté integrado el activo. Elimine esos elementos sólo después de comprobar la integración final.
Cambiar dimensiones solo a propósito
Eliminar el ancho y el alto mantiene o crea un viewBox cuando es posible, pero cambia el tamaño intrínseco del activo. Confirme que el CSS o el contenedor proporcione las dimensiones que desea.
Revise el SVG optimizado antes del envío
El banco de trabajo proporciona una comparación rápida, no una prueba de que cada navegador, editor, componente o animación se comporta de manera idéntica. Pruebe el resultado donde realmente se ejecutará.
Comparar ambas vistas previas restringidas
La fuente y el resultado se muestran como recursos de imagen no interactivos. Úselos para detectar cambios obvios de color, geometría, recorte y relación de aspecto sin insertar el marcado SVG en esta página.
Texto de prueba, filtros, animación y referencias
Las fuentes, el espaciado del texto, los filtros, las máscaras, CSS, la animación, los recursos externos y los scripts dependen del contexto. Abra el archivo descargado en el sitio o aplicación deseado antes de reemplazar un activo de producción.
Mantener la fuente editable
El marcado optimizado suele ser un artefacto de exportación. Conserve el archivo de diseño original o SVG legible cuando sea necesario realizar ediciones, transferencias, revisiones de accesibilidad o depuraciones en el futuro.
Comprender los límites de seguridad y procesamiento local
El procesamiento local reduce la transferencia de datos innecesaria, mientras que las vistas previas restringidas evitan la ejecución de la fuente en línea. Esas opciones no convierten un SVG arbitrario en un código de aplicación confiable.
El procesamiento de origen permanece en esta pestaña
El archivo seleccionado se lee como texto y se pasa a la compilación SVGO del navegador instalado. Esta página no envía la fuente ni el resultado a un punto final de optimización externo.
La vista previa no se ejecuta en línea SVG
Ambas vistas previas utilizan el contexto de imagen SVG del navegador, donde los scripts están deshabilitados y los recursos externos no se cargan. Allí no se prueba intencionadamente el comportamiento interactivo.
La optimización no es desinfección
Eliminar scripts y controladores de eventos es útil para un recurso estático, pero pueden permanecer otras marcas riesgosas o sensibles al contexto. Nunca incorpore resultados que no sean de confianza sin un desinfectante y una política de seguridad dedicados.
Privacidad y límites
El archivo fuente o el marcado pegado se procesa en esta pestaña del navegador. No se agrega ninguna solicitud de optimización externa y esta página no guarda la fuente.
- • Un SVG completo a la vez, desde marcas pegadas o un archivo .svg local de hasta 2 MiB.
- • SVGO puede reestructurar marcas y geometría redondeada; La equivalencia visual no está garantizada.
- • Las vistas previas restringidas no prueban scripts, recursos externos ni todas las integraciones de la página host.
- • La optimización y la eliminación de scripts no certifican que SVG no confiable sea seguro para insertar en línea.
Preguntas frecuentes
¿Este optimizador SVG es de uso gratuito?
Sí. Puede pegar o cargar un SVG, optimizarlo, obtener una vista previa del resultado, copiar el marcado y descargar el archivo sin registrarse, iniciar sesión ni desbloquear el resultado.
¿La herramienta carga o almacena mi SVG?
No se utiliza ningún servicio de optimización externo. El archivo seleccionado se lee como texto y se procesa en la pestaña actual del navegador; Esta página no agrega una solicitud de carga o almacenamiento para su SVG.
¿Qué optimizador SVG utiliza esta página?
Utiliza la compilación del navegador instalado de SVGO 4 con la canalización de complementos preestablecida por defecto más las configuraciones que se muestran en el banco de trabajo. El multipaso está habilitado de forma predeterminada.
¿Puedo cargar un archivo SVG o pegar el código SVG?
Ambos son compatibles para un SVG a la vez. Un archivo .svg local puede tener hasta 2 MiB, o puede pegar un documento SVG completo y bien formado en el editor de origen.
¿El SVG optimizado siempre se verá idéntico?
No es posible una garantía universal. SVGO puede reestructurar el marcado y redondear valores numéricos, y las fuentes, los filtros, las animaciones o el comportamiento específico de la integración pueden representarse de manera diferente. Compare las vistas previas y pruebe el resultado descargado en su contexto real.
¿Por qué se conservan los ID de SVG de forma predeterminada? Se puede hacer referencia a los ID de
mediante degradados, máscaras, rutas de clip, CSS, JavaScript u otro documento. El optimizador puede actualizar las referencias internas, pero no puede descubrir todas las dependencias externas, por lo que esta página conserva los ID a menos que usted opte por la limpieza.
¿Qué hace eliminar el ancho y el alto?
La opción removeDimensions de SVGO elimina el ancho y alto fijos cuando existe un viewBox, o puede derivar un viewBox a partir de dimensiones numéricas simples. Eso puede hacer que un tamaño SVG hasta CSS, pero cambia el comportamiento de tamaño intrínseco y debe probarse donde se usa el activo.
¿El optimizador conserva los elementos de título y descripción de SVG?
Sí, de forma predeterminada. El banco de trabajo conserva <title> y <desc> porque pueden admitir nombres o descripciones accesibles en algunas integraciones. Puede eliminarlos deliberadamente para obtener un resultado más pequeño después de revisar el contexto.
¿La eliminación de scripts hace que sea seguro insertar un SVG?
No. La opción elimina elementos de script, atributos de controlador de eventos y enlaces de script manejados por SVGO, pero la optimización no es un desinfectante completo. SVG no confiable que se insertará en línea necesita una revisión de seguridad, un desinfectante y una política de contenido dedicados.
¿Por qué el SVG optimizado no cambia o es más grande?
Es posible que una fuente ya sea compacta, que la configuración de preservación pueda limitar las transformaciones disponibles, que el formato legible agregue espacios en blanco o que el marcado requerido pueda compensar otros ahorros. El resultado informa la diferencia de bytes UTF-8 real en lugar de asumir que cada archivo se vuelve más pequeño.
Herramientas relacionadas
Continúa con otra herramienta basada en navegador.
Sd Herramientas de diseño gratuitas
Inspeccionar y convertir SVG colores
Selector de color
Elija un color visualmente o ingrese un valor HEX, luego ajuste RGB, HSL y opacidad. Obtenga una vista previa del resultado, compare tonos cercanos y copie el código de color exacto sin iniciar sesión.
Cd Herramientas de diseño gratuitas
Compruebe un par de colores SVG
Comprobador de contraste de color
Pruebe el texto y los colores de fondo con WCAG 2.2 AA y AAA. Vea la relación de contraste exacta, obtenga una vista previa del tamaño y peso de fuente seleccionados e identifique si el par pasa.
Gd Herramientas de diseño gratuitas
Crear un CSS Degradado
Generador de degradados CSS
Crea degradados lineales, radiales o cónicos con dos a seis paradas de color. Obtenga una vista previa del resultado en vivo, ajuste la dirección u origen relevante y copie CSS listo para usar sin iniciar sesión.
Cd Imagen
Convierte un SVG a PNG
Convertidor de SVG a PNG
Sube uno SVG, elige el tamaño PNG que necesitas, obtén una vista previa del resultado y descárgalo. Uso gratuito sin registro ni inicio de sesión.