SVG a Webflow — Copia y pega iconos como elementos

¿Por qué pegar iconos SVG como embeds en Webflow?

Subir un icono como recurso de imagen funciona, pero los colores del SVG quedan bloqueados: no puedes cambiarlos al pasar el cursor, en modo oscuro o por componente. Colocar el código SVG dentro de un Code Embed lo convierte en parte de la página, de modo que hereda el CSS. Con fill="currentColor", el icono toma simplemente el color de fuente del elemento, y las interacciones o estados hover de Webflow pueden cambiarle el color.

Qué hace el limpiador

• Elimina la declaración XML, los comentarios, los <metadata> y los atributos del editor de Figma, Illustrator, Inkscape y Sketch.
• Reemplaza los colores fill/stroke fijos por currentColor (mantiene none y las referencias a degradados).
• Añade un viewBox si falta y define width/height al 100% para que el div contenedor controle el tamaño.
• Marca los iconos decorativos con aria-hidden="true" o añade role="img" y una etiqueta a los que tienen significado.
• Por seguridad, elimina scripts y manejadores de eventos en línea, y minimiza el resultado.

Custom Elements frente a Code Embed

El Custom Element de Webflow te permite crear cualquier etiqueta HTML, incluidas svg, path, g, circle y linearGradient, y asignarles atributos. Así construido, el icono está formado por elementos reales del Designer: puedes ver cada path en el Navigator, añadir clases a partes individuales, animarlas con Interactions, vincular atributos a campos del CMS y editar valores sin abrir código. Un Code Embed es un único bloque de HTML: más sencillo, pero una caja negra en el Designer.

Cómo funciona «Copy to Webflow»

Cuando copias elementos dentro del Designer de Webflow, este guarda en el portapapeles una descripción JSON de ellos. Esta herramienta genera el mismo tipo de datos a partir de tu SVG: un Custom Element por etiqueta, con todos los atributos, y con el tamaño que elegiste aplicado al svg raíz (o a una clase opcional). Así, al pegar se crean elementos nativos. Webflow no documenta oficialmente este formato del portapapeles, por lo que, si una futura actualización de Webflow lo cambia, la herramienta incluye un método de calibración: copia cualquier Custom Element desde tu Designer de Webflow, pégalo en el cuadro de calibración, y la herramienta aprende el formato actual y lo usa a partir de ese momento (se guarda solo en tu navegador).

Consejos para iconos en Webflow

• No se añade ninguna clase por defecto. Si quieres un tamaño compartido, escribe un nombre de clase y reutilízalo; usa unidades fluidas si los iconos deben escalar con el texto.
• Los SVG muy grandes o complejos (ilustraciones, mapas) funcionan mejor como recursos de imagen, ya que los Embeds tienen un límite de caracteres (actualmente 50 000).
• Para fondos o máscaras SVG, usa la herramienta SVG a CSS; para proyectos React, usa SVG a JSX.

También se busca como: webflow svg, svg embed webflow, figma a webflow, icono svg, currentcolor, portapapeles webflow, pegar svg en webflow.

Herramientas que combinan con: SVG a Webflow

• Figma CSS a Webflow — Convierte la salida de “Copy as CSS” de Figma en valores ordenados que puedes escribir directamente en el panel Style de Webflow.
• Markdown a Webflow Rich Text — Pega Markdown, revisa la vista previa y cópialo como texto con formato: títulos, listas, enlaces y negritas se pasan correctamente al elemento Rich Text de Webflow.
• Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
• Redirecciones de WordPress a Webflow — Migrar un sitio de WordPress a Webflow cambia casi todas las URLs: rutas de blog con fecha, archivos /category/, barras finales y slugs de páginas.