Optimizador y conversor de SVG gratuito: minimice y limpie SVG (por lotes), convierta SVG a PNG, JPG, React JSX o URI de datos, edite rutas, recorte viewBox, cambie el color, cree sprites, además de generadores de ondas, manchas, patrones, gradientes de malla y ruido. Sin carga.
23 herramientas SVG en un espacio de trabajo privado
Un espacio de trabajo SVG privado y gratuito con 23 herramientas. Optimice y minimice los SVG al estilo SVGO (en lotes, con comprobaciones antes y después), limpie las exportaciones de Figma e Illustrator y convierta SVG a PNG, JPG, WebP, componentes de React o URI de datos. También puede validar archivos, editar rutas, recortar el viewBox, cambiar el color, crear sprites y generar ondas, manchas, patrones, gradientes de malla, texturas de grano y divisores, todo en su navegador.
SVG Forge reúne en una sola página los trabajos SVG que normalmente distribuiría en cinco sitios web: un optimizador estilo SVGO con exportación ZIP por lotes, un minificador, un limpiador y un formateador; convertidores de SVG a PNG, JPG, WebP, componentes de React y URI de datos; un validador; un editor de rutas visual, un recortador de viewBox, un sustituto de color y un generador de sprites; y diez generadores de ondas, manchas, patrones, gradientes de malla, texturas de grano y divisores de sección. Cualquier resultado se puede pasar a la siguiente herramienta con un solo clic. Puede generar un blob, cambiarle el color, optimizarlo y exportarlo como un componente de React sin copiar y pegar entre pestañas.
Características
23 herramientas SVG: optimizar, convertir, editar y generar
Optimizador estilo SVGO: 21 alternancias, ajustes preestablecidos, ZIP por lotes y diferencias visuales
SVG a PNG, JPG y WebP en cualquier tamaño, incluido un conjunto de iconos de 16 a 512 px
SVG para React/React Native componente (TSX o JSX)
Codificador y decodificador de URI de datos, fondo CSS y salida de máscara CSS
Validador: informe de seguridad, accesibilidad, tamaño y gzip
Editor de rutas con puntos de anclaje, conversión de abs↔rel y ajuste a icono
Recorte de contenido de ViewBox, sustituto de color (tono, escala de grises, color actual) y generador de sprites
Generadores de ondas, manchas, patrones, gradientes de malla, ruido, divisores, polígonos, estrellas, espirales y garabatos
Primero local: los archivos nunca se cargan
Cómo utilizar Optimizador, convertidor y generador de SVG
1
Elige una herramienta
Elija entre Optimizar, Convertir, Editar o Generar en la barra lateral (o en el selector en el móvil). Cada herramienta también tiene su propio enlace, como #svg-to-png.
2
Añade tu SVG
Pegue el marcado, cargue o arrastre y suelte uno o más archivos .svg, o léalo desde el portapapeles. Los generadores parten de un diseño ya hecho que puedes aleatorizar.
3
Ajustar y comprobar
Sintonice ajustes preestablecidos, controles deslizantes y conmutadores. La vista previa se actualiza en vivo y el optimizador muestra el original y el resultado uno al lado del otro con ahorros de bytes y gzip.
4
Exportar o entregar
Copie como SVG, React, URI de datos, Base64 o CSS, descargue .svg, exporte PNG/JPG/WebP o envíe el resultado directamente a otra herramienta con "Abrir en...".
Casos de uso comunes
Optimice y minimice íconos e ilustraciones antes de enviarlos a producción.
Limpiar exportaciones SVG infladas de Figma, Illustrator, Inkscape o Sketch
Comprima por lotes una carpeta de iconos completa y descárguela como ZIP
Convierta un logotipo SVG a PNG para correo electrónico, redes sociales o un conjunto de favicon
Convierta los íconos SVG en componentes escritos de React o React Native
Pequeños iconos en línea en CSS como el URI de datos más pequeño posible
Recorte el espacio vacío alrededor de un SVG ajustando el viewBox a su contenido
Cambie el color de un SVG a una paleta de marca o cámbielo a currentColor
Agrupe iconos en un objeto <symbol> reutilizable
Cree fondos ondulados, blobs, degradados de malla y granulados para páginas de destino
guía detallada
¿Qué herramienta SVG necesito?
Comience con el trabajo, no con el nombre de la herramienta. Para reducir el tamaño de un archivo, utilice Optimizar. Para usar un SVG en algún lugar que quiera un mapa de bits, código o CSS, use Convertir. Para arreglar o cambiar el estilo de un SVG existente, use Editar. Para crear nuevas ilustraciones a partir de controles deslizantes, use Generar.
Grupo
Herramientas
Lo mejor para
Optimizar y limpiar
Optimizador, Minificador, Limpiador, Formateador, Simplificador de Rutas
Reducción de íconos e ilustraciones antes de su envío.
Convertir e inspeccionar
SVG → PNG/JPG/WebP, SVG → React (JSX/TSX), codificador/decodificador de URI de datos, visor y validador
Obtener un SVG en el formato que necesita su aplicación, correo electrónico o CSS
Editar
Editor de ruta, ViewBox y recorte, sustituto de color, generador de sprites
Arreglando caminos, recortando espacios en blanco, recoloreando y agrupando íconos
Generar
Ondas, Blob, Patrón, Degradado de malla, Ruido y grano, Divisor de forma, Polígono, Estrella, Espiral, Garabato
Fondos, secciones de héroes, divisores y formas decorativas.
Cómo funciona el optimizador SVG y qué configuraciones son seguras
El optimizador analiza su archivo en un documento XML real en el navegador y aplica 21 optimizaciones modeladas en SVGO. Cada uno se puede activar o desactivar, y tres ajustes preestablecidos (Equilibrado, Máximo, Solo limpio) cubren los casos comunes. Una verificación visual en paralelo muestra el renderizado original y optimizado, para que pueda confirmar que no ha cambiado nada antes de descargar. Puede colocar docenas de archivos a la vez y recuperarlos como un único ZIP. Las exportaciones típicas de Illustrator, Inkscape o Figma se reducen entre un 30% y un 70%, y se muestra un tamaño gzip porque eso es lo que realmente envía su servidor.
Mejoramiento
que hace
Riesgo visual
Eliminar datos y metadatos del editor
Elimina los espacios de nombres, <metadatos> y comentarios de Inkscape, Sodipodi, Illustrator, Sketch y Figma.
Ninguno
Números redondos/comprimir rutas
Redondea las coordenadas con la precisión elegida y reescribe los datos de la ruta en la forma más corta, absoluta o relativa.
Ninguno con 2 o 3 decimales; marque los íconos pequeños en 0–1
Eliminar definiciones e ID no utilizados
Elimina gradientes, rutas de clip e ID a los que nada hace referencia
Ninguno
Contraer grupos/eliminar valores predeterminados
Desenvuelve envoltorios <g> vacíos y elimina valores como fill-opacity="1"
Ninguno
Estilos → atributos, acortar colores
style="fill:#ffffff" se convierte en fill="#fff"
Ninguno (se omite automáticamente cuando existe un bloque <style>)
Responsivo (ancho/alto de caída)
Mantiene solo el viewBox para que CSS controle el tamaño
El diseño puede cambiar si confió en el tamaño fijo
Eliminar <título>/<desc>
Tiras de nombres accesibles
Ninguno visualmente, pero perjudica a los usuarios de lectores de pantalla.
Limpiar código SVG exportado desde Figma, Illustrator o Inkscape
Las herramientas de diseño incluyen exportaciones SVG con comentarios del generador, declaraciones XML, espacios de nombres del editor, ID de capas como Layer_1 y SVGID_1_, grupos vacíos, estilos de fondo habilitado y números con seis decimales. SVG Cleaner elimina ese problema pero mantiene el marcado con sangría y legible, lo cual es útil cuando editas manualmente o animas el archivo. El Optimizador va más allá para la producción y el Validador enumera exactamente lo que hay dentro (recuento de elementos, colores, fuentes, mapas de bits incrustados, secuencias de comandos y enlaces externos) para que pueda ver por qué un archivo es pesado o inseguro antes de usarlo.
SVG a PNG, componente React o URI de datos: qué formato usar
SVG es la mejor opción para íconos e ilustraciones en la web. Sin embargo, algunos lugares todavía necesitan un mapa de bits o un código. Los convertidores manejan cada caso sin realizar una carga.
Exportar
Úselo cuando
Notas
PNG / WebP
Correo electrónico, publicaciones en redes sociales, tiendas de aplicaciones, favicons y cualquier lugar donde no se acepte SVG
Cualquier tamaño hasta 8192 px, fondo transparente, ZIP por lotes y un conjunto de iconos de 16 a 512 px con un solo clic
JPEG
Lugares que necesitan una imagen pequeña y opaca
Elija el color de fondo que reemplace la transparencia
Reaccionar / Reaccionar nativo
Íconos dentro de una base de código de React, Next.js o Expo
Atributos de camelCase, objetos de estilo, {...props}, currentColor opcional y un título accesible.
URI de datos (codificada en URL)
Pequeños íconos integrados en CSS o HTML sin solicitud adicional
Generalmente alrededor de un 30% más pequeño que Base64. La salida de la máscara CSS te permite cambiar el color con el color de fondo
duende SVG
Muchos íconos reutilizados en un sitio
Un archivo de <symbol> al que se hace referencia con <use href="#id">
Los generadores producen SVG limpios y editables manualmente en lugar de exportaciones de mapas de bits. Se pueden animar ondas en capas y manchas transformadoras con SMIL, que funciona dentro de <img> y fondos CSS sin JavaScript. El generador de patrones exporta 16 motivos continuos, ya sea como un solo mosaico para repetir el fondo o como un lienzo completo. El gradiente de malla y los generadores de ruido crean el degradado suave y el aspecto de grano de película popular en las páginas de destino modernas, y el divisor de formas viene con un fragmento de HTML y CSS listo para pegar para los bordes de las secciones. Cada salida se puede copiar como SVG, React, URI de datos o CSS, o exportar a PNG.
El análisis, la optimización, la rasterización y la compresión se realizan en su navegador con API web estándar (DOMParser, Canvas y CompressionStream). Su obra de arte nunca llega a un servidor, por lo que las herramientas también funcionan para el trabajo del cliente bajo NDA. Las vistas previas se representan a través de un <img> aislado, por lo que ningún script en un SVG que pegue no se puede ejecutar, y el optimizador puede eliminar las etiquetas <script> y los controladores de eventos antes de incrustar un archivo en su sitio.
Preguntas frecuentes
¿Qué herramientas SVG están incluidas?
Veintitrés, agrupados en cuatro áreas. Optimizar: Optimizador, Minificador, Limpiador, Formateador y Simplificador de Ruta. Convertir: SVG a PNG/JPG/WebP, SVG a React, URI de datos y Visor y Validador. Editar: Editor de ruta, ViewBox y recorte, Reemplazo de color y Generador de sprites. Generar: Onda, Blob, Patrón, Degradado de malla, Ruido, Divisor de forma, Polígono, Estrella, Espiral y Garabato.
¿Cómo optimizo un archivo SVG de forma gratuita?
Abra el Optimizador, pegue su SVG o coloque uno o más archivos .svg y elija un ajuste preestablecido (solo Equilibrado, Máximo o Limpio) o alterne cualquiera de las 21 optimizaciones. La herramienta muestra los tamaños originales, optimizados y comprimidos, además de una verificación visual en paralelo. Luego copie el resultado, descárguelo o descargue cada archivo como ZIP.
¿Cómo hago una onda o una mancha SVG?
Utilice el generador Wave o Blob, ajuste los controles deslizantes (capas, amplitud, complejidad, aleatoriedad) y los colores, y el vector se actualizará en vivo. Presione Aleatorio para explorar variaciones, active la animación para obtener un efecto de transformación y luego copie el SVG o expórtelo.
¿Puedo obtener el SVG como fondo CSS o URI de datos?
Sí. Cada resultado tiene pestañas de exportación para SVG sin formato, React, un URI de datos compacto codificado en URL, Base64 y una regla CSS lista para pegar, además de descargas .svg y PNG/JPG/WebP. La herramienta URI de datos también produce un fragmento de máscara CSS y puede decodificar un URI de datos nuevamente en SVG.
¿Qué elimina el limpiador SVG?
Declaraciones XML, DOCTYPE, comentarios, <metadatos> y espacios de nombres y atributos del editor de Inkscape, Sodipodi, Illustrator, Sketch, Serif y Figma. Mantiene el marcado con sangría y legible, por lo que es la opción correcta cuando aún desea editar el archivo manualmente.
¿Mi SVG está subido a un servidor?
No. Todo, incluida la optimización, la representación de PNG y la creación de ZIP, se ejecuta localmente en su navegador. Tus archivos nunca salen de tu dispositivo, por lo que son privados e instantáneos.
¿Cómo minimizo u optimizo un archivo SVG?
Pegue o cargue su SVG y el optimizador elimina metadatos del editor, comentarios, definiciones no utilizadas y código redundante, redondea números y comprime datos de ruta (como SVGO). Esto a menudo reduce un archivo entre un 30% y un 70% sin cambiar su apariencia y todo se ejecuta en su navegador.
¿Cómo limpio el código SVG desordenado de Figma o Illustrator?
Las herramientas de diseño agregan información adicional, como comentarios del generador, ID de capas, grupos vacíos y números de seis decimales. Pegue la exportación en el Limpiador (la mantiene legible) o en el Optimizador (la salida más pequeña) para obtener un marcado liviano y listo para la web.
¿Puedo convertir un SVG en un URI de datos?
Sí. Utilice la herramienta URI de datos o la pestaña URI de datos en cualquier resultado. Utiliza codificación de URL, que suele ser aproximadamente un 30 % más pequeña que Base64, y también proporciona Base64, una regla de fondo CSS y una etiqueta <img>.
¿Cómo convierto SVG a PNG con un fondo transparente?
Abra SVG a PNG/JPG, agregue su(s) archivo(s), elija PNG y una escala (por ejemplo, 4×) o un ancho o alto exacto, y mantenga activado el fondo transparente. Puede convertir por lotes muchos SVG a un ZIP, elegir JPG o WebP en su lugar, o elegir Conjunto de iconos para exportar PNG de 16 a 512 px para favicons e íconos de aplicaciones.
¿Cómo convierto un SVG en un componente de React?
Pegue el SVG en SVG para reaccionar (JSX), nombre el componente y elija TypeScript o JavaScript, React o React Native. Los atributos se convierten a camelCase, los estilos en línea se convierten en objetos y {...props} se distribuye en la raíz. También puede cambiar los colores a currentColor y agregar un título accesible.
¿La optimización cambiará el aspecto de mi SVG?
No con el ajuste preestablecido Equilibrado predeterminado. Cada optimización que contiene solo elimina datos invisibles o reescribe valores de manera equivalente. Una precisión muy baja (0–1 decimales) puede mover ligeramente los puntos en íconos pequeños, razón por la cual el optimizador muestra el original y el resultado uno al lado del otro antes de descargar.
¿Cómo elimino el espacio vacío alrededor de un SVG?
Abra ViewBox & Crop, pegue el SVG y haga clic en Recortar al contenido. La herramienta mide los límites reales del dibujo, establece un viewBox ajustado con el relleno que elija y puede actualizar o eliminar los atributos de ancho y alto.
¿Cómo puedo cambiar los colores de un SVG?
El Reemplazo de color detecta cada color de relleno, trazo y degradado (hexadecimal, rgb(), hsl() y colores con nombre) y enumera la frecuencia con la que aparece cada uno. Puede reasignarlos uno por uno, cambiar el tono, la saturación y la luminosidad de todo el archivo, convertirlos a escala de grises o invertirlos, o reemplazar todo con currentColor para que el ícono siga el color de su texto CSS.
¿Qué es un objeto SVG y cómo lo uso?
Un sprite es un archivo SVG que contiene muchos iconos como elementos <symbol>. Agrega tus íconos al Generador de Sprites, luego haz referencia a cada uno con <svg><use href="#icon-id"/></svg>. La herramienta puede anteponer ID internos para evitar conflictos de degradado y convertir colores a color actual, y genera el código de uso por usted.
¿Es seguro pegar un SVG de una fuente desconocida?
Sí. Las vistas previas se representan dentro de un <img> aislado, donde los scripts no se pueden ejecutar. El Validador marca etiquetas <script>, controladores de eventos y enlaces externos, y el optimizador elimina scripts y controladores de forma predeterminada antes de incrustar el archivo en un sitio.
¿Puedo animar las ondas y manchas generadas?
Sí. Los generadores Wave y Blob tienen una opción de Animar que agrega una transformación SMIL autónoma. Se reproduce en navegadores dentro de <img>, fondos CSS y SVG en línea, sin necesidad de JavaScript ni CSS.
