SVGcode: comprueba las formas que exportas

Para el rastreo de imágenes SVGcode, cargue su obra de arte rasterizada, elija Color SVG o Monochrome SVG, ajuste el rastreo y luego inspeccione el SVG exportado. Comprueba sus colores, huecos interiores y lona antes de aceptarlo. En nuestra prueba de colores planos, SVGcode produjo trazados reales y mantuvo la apertura del marco, pero ambas variantes exportadas cambiaron la paleta original y usaron un lienzo diferente.

Si desea otro flujo de trabajo del navegador para una imagen que ya tiene, obtenga una vista previa gratuita en PerfectVector. Debes desbloquear el resultado antes de poder editarlo o exportarlo. Utilice los mismos controles de forma y color a continuación; Este tutorial no compara la calidad de salida de las dos herramientas.

Pruébalo con tu propia imagen

Abrir la herramienta completa

PNGJPGWEBPPNGSVGSube tu imagen aquío haz clic · pega ⌘VSeleccionar imagenSuelta para revisar la imagen

Puedes probarlo gratis. Suelta una imagen y mira la vista previa de tu vector, sin registrarte.

Qué rastrea SVGcode y qué preparar

SVGcode convierte imágenes rasterizadas en gráficos vectoriales SVG. Su autor describe una implementación WebAssembly basada en Potrace que rastrea color por color; el repositorio oficial de fuentes documenta esa implementación. Eso explica el enfoque, pero el archivo exportado es la evidencia de su propia obra de arte.

Comience con una copia de un PNG u otra imagen rasterizada compatible, un navegador que pueda acceder a SVGcode y permiso para procesar la obra de arte. Para la ruta del portapapeles a continuación, su navegador debe permitir el acceso al portapapeles de imágenes. Mantenga disponible un editor de texto sin formato para guardar el marcado SVG copiado, además de un visor o editor de SVG para la verificación de finalización.

Una marca plana con regiones coloreadas distintas es una primera entrada útil. Registre los colores y aberturas que necesita conservar antes de cambiar la configuración. Para una foto o un degradado suave, decide qué detalles puedes simplificar; el rastreo no puede inferir todos los límites previstos a partir de los píxeles. La guía de vectorización de imágenes explica la decisión de ráster a ruta con más detalle.

1. Cargue la imagen y elija un modo de rastreo.

Abra SVGcode y cargue su imagen. Para la ruta que probamos, coloque la imagen real en el portapapeles y elija Pegar imagen. Confirme que la vista previa muestre la imagen deseada, incluidas áreas transparentes y pequeños detalles interiores, antes de ajustar cualquier cosa.

Elija Color SVG cuando las regiones coloreadas separadas sean importantes. Utilice Monochrome SVG cuando el resultado deseado sea una silueta de un solo color. Este tutorial utilizó Color SVG en todas partes; no informa una prueba monocromática separada.

Mantenga abierto el ráster original junto a la vista previa. No juzgues el trazo sólo por si sus bordes se ven suaves cuando se amplían. Un centro vacío, un pequeño espacio o un color deliberadamente separado pueden importar más que un borde exterior liso.

2. Cambie la configuración teniendo en cuenta un detalle visible

Comience con un defecto que pueda señalar, como puntos no deseados fuera de la obra de arte o una pequeña abertura que desaparece. Cambie un control, espere a que se actualice la vista previa y luego compare ese detalle nuevamente.

Suprimir motas elimina regiones pequeñas. Levantarlo puede ayudar con los puntos perdidos, pero revisa los pequeños detalles que querías conservar. Posterizar imagen de entrada reduce la variación de color antes del calco; La posterización agrupa los colores en menos niveles. El tutorial de SVGcode del autor explica tanto los controles como la posterización por canal.

La aplicación actual también expone el ancho del trazo y la configuración experta. Deje los controles que no necesita en paz hasta que tenga una exportación de referencia. Un gran conjunto de cambios simultáneos hace que sea difícil saber cuál alteró el resultado.

Ilustración

Lo que mostró nuestra prueba original de colores planos

Hicimos un PNG 512 × 512 con un fondo transparente, un marco rectangular azul marino con una abertura, un rectángulo dorado y un rectángulo verde azulado superpuesto. Pegamos esa imagen original en la aplicación pública SVGcode, usamos Color SVG, Suprimir motas 2 y Ancho de trazo 0, luego copiamos dos salidas SVG reales.

La primera utilizó Posterizar imagen de entrada con rojo, verde y azul en 7 pasos cada uno y alfa en 1 paso. El segundo usó la misma imagen con Posterizar imagen de entrada sin marcar. Los controles RGB y alfa quedaron desactivados en ese segundo estado.

Desactivar la posterización no restauró los colores originales exactos de esta imagen. Ambos SVG también colocaron la obra de arte dentro de un lienzo diferente. Estas son observaciones de una imagen controlada, no un punto de referencia o una predicción para cada archivo. Son buenas razones para comprobar la exportación real antes de utilizarla como patrón de color o diseño.

3. Copie el SVG y conserve el marcado real.

Cuando la vista previa esté lista, elija Copiar SVG. Espere a que finalice la Optimización de SVG antes de leer o pegar el portapapeles. En nuestra ejecución, una lectura inmediata del portapapeles estaba vacía; leerlo después de la optimización devolvió el marcado SVG.

Pegue el marcado en un editor de texto sin formato y guárdelo con una extensión .svg, como artwork-trace.svg. Confirme que contiene un elemento <svg> y un </svg> de cierre en lugar de una captura de pantalla o un documento de texto enriquecido. Mantenga un nombre de archivo separado para cada variante de configuración para que la exportación posterior no reemplace su referencia.

Esta es la ruta de marcado copiado que completamos. SVGcode también muestra Guardar SVG, pero este tutorial no prueba el comportamiento del cuadro de diálogo para guardar archivos nativos ni la importación exitosa a otra aplicación.

4. Inspeccione los colores, las aberturas y el lienzo en el archivo guardado.

Abra el SVG guardado en un visor o editor, junto a la fuente intacta. Compruébelos por separado:

1. Paleta: compara rellenos importantes con los valores de color deseados. Un rastro puede conservar tres regiones mientras cambia los tres colores. Si se requieren colores exactos, restaure y verifique los rellenos deseados en su editor.
2. Aberturas: coloque un fondo contrastante detrás de la obra de arte. El nuevo fondo debería verse a través de los agujeros previstos y el espacio exterior. Una forma pintada de blanco puede parecer una abertura en blanco. La guía de fondo SVG transparente muestra cómo distinguir los dos.
3. Lienzo: inspecciona los límites del documento así como los límites de la obra de arte. El viewBox define el rectángulo de coordenadas interno del SVG; no es una promesa de dimensiones físicas. Verifica los márgenes y el tamaño en la aplicación donde usarás el archivo.
4. Geometría: seleccione regiones importantes individualmente e intente cambiar el color o moverlas ligeramente y luego deshacerlas. Un archivo que contiene rutas aún necesita una verificación de editabilidad para el trabajo previsto.

SVG puede representar una abertura con varios contornos dentro de un camino compuesto; el estándar de ruta SVG describe subrutas y agujeros. No necesita un elemento de ruta separado para cada límite visible. Por el contrario, un recuento bajo de rutas por sí solo no prueba que todos los detalles previstos hayan sobrevivido.

Nuestra verificación de finalización fue digital: inspeccionar el marcado copiado y renderizar los SVG reales. En ambas variantes, la apertura y el espacio exterior eran transparentes. No se probó ningún resultado de importación, impresión o corte del editor de destino. Para una revisión más amplia de la transferencia, utilice el cuadro de puntuación de calidad de seguimiento de vectores.

Recuperarse del primer cheque fallido

Si un agujero sigue siendo incorrecto, la guía de solución de problemas de agujeros SVG separa la geometría de trazado faltante de la interpretación de las reglas de relleno. Para obtener un flujo de trabajo de seguimiento de escritorio con herramientas de limpieza directa, consulte Inkscape Trace Bitmap.

Mantenga juntos la imagen original y el SVG aceptado. Anota cualquier corrección de paleta o ajuste de lienzo que la siguiente persona necesitará. Si desea probar su obra de arte existente en otra herramienta de navegador, comience gratis con PerfectVector y verifique la silueta y las aberturas de la vista previa.

Preguntas frecuentes

¿Puede SVGcode rastrear un PNG en rutas SVG reales?

Sí. Nuestro PNG de color plano original produjo un marcado SVG copiado que contiene tres rutas y ninguna imagen incrustada. Inspeccione su propio archivo exportado; ese resultado no garantiza la misma estructura o fidelidad para todas las imágenes.

¿Al desactivar la posterización se conservan los colores originales?

No fue así en nuestra prueba controlada. Ambas configuraciones cambiaron los valores originales de color sólido. Compare los rellenos exportados con la paleta deseada y corríjalos cuando el color exacto sea importante.

¿Por qué el lienzo SVG es diferente de mi tamaño PNG?

El SVG copiado en nuestra prueba utilizó un viewBox 1024 × 1024 de una entrada 512 × 512. Inspeccione el lienzo exportado, los límites de la obra de arte y el tamaño de visualización previsto por separado en lugar de asumir que se conservarán las dimensiones en píxeles de origen.

¿Cómo sé que una abertura es transparente?

Coloque un fondo contrastante detrás del SVG guardado. Debería verse a través de la abertura. Si no es así, inspeccione si el trazo perdió el contorno interior o creó una forma pintada allí.

Fuentes

1. aplicación SVGcode: interfaz de seguimiento de imágenes y controles actuales.
2. Tutorial del autor de SVGcode en web.dev: calco color por color, supresión de moteado y posterización.
3. Repositorio oficial de SVGcode: implementación del proyecto y documentación fuente.
4. Rutas SVG W3C: rutas compuestas, subrutas y aberturas.