SVG a HTML

Convierte SVG a HTML online

Importa un archivo SVG o pega su código para obtener SVG inline listo para una página HTML. Consulta la vista previa del resultado, ajusta las opciones de optimización y copia el código. El análisis, la optimización y la conversión se hacen localmente en tu navegador, sin enviar tu SVG a ningún servidor.

Prepara un SVG inline adaptable

Conserva el viewBox para mantener el sistema de coordenadas del SVG. Elimina el ancho y el alto fijos cuando el SVG tenga un viewBox utilizable y define su tamaño en tu propio CSS.

Entiende el tamaño del SVG y el ahorro

«Tamaño original» es el tamaño del SVG que añades. «Tamaño del SVG optimizado» es su tamaño tras procesarlo con las opciones elegidas, como eliminar comentarios, redondear coordenadas y minificar el código. Los tamaños se muestran en kB, donde 1 kB equivale a 1000 bytes. «Ahorro» es el porcentaje de reducción: pasar de 10 kB a 7 kB ahorra un 30 %. Si el resultado es más grande, por ejemplo por un formato legible, se muestra «Aumento de tamaño» en su lugar. Estas cifras comparan el código SVG, no el tamaño de las exportaciones JSX, React, Data URI CSS o Base64.

Precisión decimal y sangría

La precisión decimal indica cuántos decimales se conservan en las coordenadas y los atributos numéricos. Con una precisión de 2, 12,34567 pasa a ser 12,35. Menos decimales pueden reducir el tamaño del archivo, pero también alterar los detalles finos; el valor predeterminado de 3 es un punto de partida, así que revisa la vista previa. La sangría usa 2 espacios, 4 espacios o tabulaciones para que el código HTML y JSX sea más fácil de leer, sin cambiar la imagen. «Minificar SVG» elimina los espacios de formato innecesarios para compactar el resultado, por lo que la sangría se desactiva mientras la minificación está activada.

HTML, JSX, React y Data URI SVG

El resultado HTML es código SVG inline y se descarga como archivo SVG. JSX adapta los nombres de los atributos y los estilos inline para React. «Componente React» lo envuelve en una función TypeScript que acepta las props SVG estándar. «Data URI CSS» genera una declaración background-image; Base64 genera una URI de imagen SVG codificada. Las estadísticas de tamaño describen el SVG optimizado, no los formatos codificados, que pesan más. Revisa los ID antes de usar varias copias inline en una misma página.

Un flujo de trabajo SVG estático y local

La vista previa es una imagen aislada, no código ejecutable de la página. Se eliminan los scripts, el HTML incrustado, las animaciones, las imágenes externas y las hojas de estilo. Se conservan los estilos de presentación inline compatibles y las referencias a fragmentos locales. Esta herramienta está pensada para ilustraciones estáticas; las funciones no compatibles pueden alterar su aspecto. currentColor cambia los rellenos y trazos sólidos y hereda su color cuando se usa inline; una vista previa en imagen usa su propio contexto de color.