CodeKitHub¿Qué es esta herramienta?
Algunas canalizaciones de renderizado —ciertos generadores de fuentes de iconos, algunos motores de videojuegos, exportadores de PDF más antiguos y herramientas que solo componen rellenos— no manejan bien los trazos SVG, o directamente no los admiten. Convertir un trazo en una forma rellena del mismo ancho evita el problema por completo: el resultado visual es idéntico, pero se expresa como una única ruta rellena en lugar de una línea con trazo.
Esta herramienta funciona muestreando muchos puntos a lo largo del contorno de cada forma (usando la propia API de longitud de ruta del navegador, el mismo mecanismo que usa la animación SVG) y construyendo dos líneas de desplazamiento paralelas a la mitad del ancho del trazo a cada lado, cerrándolas después en un único polígono relleno.
¿Por qué utilizarlo?
- Funciona con elementos path, line, polyline, polygon, rect, circle y ellipse, no solo <path>, usando un único método de muestreo unificado.
- Conserva el propio relleno de la forma (si lo tenía) como una capa separada debajo del nuevo relleno del trazo, así que las formas rellenas y con trazo a la vez se convierten correctamente.
- Vista previa antes/después lado a lado para confirmar visualmente la conversión antes de copiar el resultado.
- Se ejecuta enteramente en tu navegador: el SVG que pegas nunca se sube a ningún sitio.
- Gratis, instantáneo, sin límite de tamaño de archivo más allá de lo que tu navegador pueda renderizar.
Cómo utilizarlo
- Pega tu código SVG en el cuadro de texto (hay un ejemplo funcional precargado).
- Haz clic en "Convert strokes to fills".
- Compara la vista previa antes/después para confirmar que el resultado se ve bien.
- Haz clic en "Copy SVG" para copiar el código convertido, sin trazos.
Ejemplo
Entrada
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Resultado
Un único <path fill="#3B82F6"> cuyo contorno traza ambos lados de la curva original, separados 12 unidades, sin ningún atributo stroke.La forma de la curva se conserva porque la herramienta muestrea puntos de forma continua a lo largo de la ruta realmente renderizada, no solo de sus puntos de control.
Preguntas frecuentes
¿Por qué las esquinas afiladas salen redondeadas en lugar de en punta (mitered)?
Es una simplificación conocida y deliberada del método de muestreo: el muestreo denso de puntos a lo largo de una ruta produce de forma natural uniones y remates redondeados, sin importar el valor original de stroke-linejoin o stroke-linecap. Reconstruir uniones exactas en inglete o bisel requiere un algoritmo distinto y más complejo (intersección de segmentos de línea en cada vértice) que esta herramienta no implementa. Para la mayoría de iconos e ilustraciones la diferencia visual es mínima, pero si necesitas uniones en inglete exactas, la función "contornear trazo" de un editor vectorial dedicado será más precisa.
¿Maneja los trazos discontinuos (stroke-dasharray)?
No: la herramienta trata todos los trazos como sólidos e ignora stroke-dasharray/stroke-dashoffset. Un trazo discontinuo se convertirá como si fuera sólido, lo que cambia su apariencia. Si tu SVG usa trazos discontinuos, esta herramienta no es la adecuada para esas formas concretas.
¿Por qué no se convirtió nada?
La herramienta solo convierte elementos que tienen a la vez un color de trazo (distinto de "none") y un stroke-width positivo, ya sea como atributos o en el style propio del elemento. Si tu SVG define el trazo mediante una clase CSS externa que el navegador no puede resolver dentro de la vista previa aislada de esta herramienta, o mediante un bloque <style> que referencia clases, es posible que el estilo calculado no se resuelva correctamente; intenta poner stroke y stroke-width como atributos directos en la forma.
¿Cuándo debería convertir trazos a rellenos y cuándo mantener los trazos?
Si todavía estás diseñando, mantén los trazos: stroke-width sigue siendo un único número editable, algo que pierdes tras la conversión. Si vas a exportar a una canalización que maneja mal los trazos (generadores de fuentes de iconos, ciertos motores de videojuegos o exportadores de PDF), convierte como paso final de exportación y conserva el archivo original con trazo como tu fuente editable, ya que la conversión es de un solo sentido.
¿Convertir hace que el archivo SVG sea más grande?
Normalmente sí: una curva con trazo definida por unos pocos puntos de control se convierte en un contorno relleno formado por cientos de segmentos de línea muestreados, así que los datos de la ruta crecen bastante. Para iconos esto rara vez importa en la práctica, pero si el tamaño te preocupa, pasa la salida convertida por un optimizador de SVG para recortar la precisión de las coordenadas.
¿Se conserva stroke-opacity en el relleno convertido?
No: la ruta convertida toma el color del trazo como su relleno pero con opacidad total; un valor de stroke-opacity en la forma original se descarta. Si necesitas conservar la transparencia, añade fill-opacity con el mismo valor a la ruta convertida manualmente después de copiar el resultado.