SVG Inliner
Cómo funciona
Pega el código de un SVG que da estilo a sus formas con clases CSS o con un bloque <style> y la herramienta reescribe cada una de esas reglas como un atributo de estilo inline directamente en los elementos a los que afecta. Importa porque, cuando metes varios SVG en la misma página HTML, sus bloques <style> comparten un único ámbito global: una clase como .cls-1 de un icono cambia sin avisar el estilo de .cls-1 en otro, y los colores y los trazos se contagian entre gráficos. Al pasar los estilos a inline, cada SVG queda autónomo y se ve igual sea cual sea el resto de la página, y además sobrevive a los sanitizadores y a los clientes de correo que eliminan los bloques <style>. Pega tu SVG, copia el resultado y úsalo donde quieras. La conversión se hace entera en tu navegador, así que tu ilustración nunca se sube.
Preguntas frecuentes
¿Para qué sirve pasar los estilos de un SVG a inline?
- Para que dos SVG de la misma página no se peleen por los mismos nombres de clase. Cuando incrustas varios SVG en un documento, sus clases CSS pueden chocar y pisarse, algo frecuente cuando los iconos vienen de distintas fuentes de diseño o generadores. Al pasar los estilos a atributos de presentación, cada SVG queda aislado de la hoja de estilos de la página.
¿Gestiona todas las propiedades CSS?
- Gestiona las habituales de SVG: fill, stroke, stroke-width, stroke-linecap, opacity y transform, que pasan de selectores de clase y bloques <style> a atributos inline. Las propiedades que no son atributos de presentación de SVG (variables CSS, animaciones) se dejan tal cual, porque pasarlas a inline cambiaría el resultado.
¿Se podrá seguir editando el SVG convertido en Illustrator o Figma?
- Sí. Los atributos de presentación son la forma nativa de dar estilo en SVG y todos los editores vectoriales los leen. Un SVG con estilos inline es incluso más portable que uno con un bloque <style>, porque no necesita ningún contexto CSS para renderizarse bien.