Vectorización de imágenes usando C# – Convertir imagen rasterizada a gráfico vectorial

Aspose.SVG ofrece un Vectorizador de imágenes gratuito en línea que funciona en el navegador y en cualquier plataforma. Con esta aplicación, puede aplicar un conjunto de opciones para obtener el resultado perfecto. ¡Ahorre tiempo y pruebe este Vectorizador de imágenes gratuito para disfrutar de todos los beneficios de los gráficos vectoriales!

Convertir imágenes rasterizadas a SVG en C#

La vectorización de imágenes es el proceso de convertir imágenes rasterizadas como PNG, JPG, BMP, GIF o TIFF en gráficos vectoriales SVG escalables. A diferencia de las imágenes de mapa de bits, los archivos SVG conservan la calidad en cualquier resolución y son más fáciles de editar, optimizar y escalar para flujos de trabajo de diseño web, impresión, CAD y diseño gráfico.

With Aspose.SVG for .NET, puede vectorizar imágenes rasterizadas mediante programación en C# sin necesidad de software de gráficos externo o herramientas basadas en navegador. La API proporciona configuraciones de vectorización flexibles que le permiten controlar el suavizado de rutas, la simplificación de curvas, la reducción de color y la complejidad de la salida SVG.

Este artículo demuestra cómo:

Convertir imágenes rasterizadas a SVG en C#.
Personalizar la configuración de vectorización.
Suavizar y simplificar rutas SVG.
Reducir el tamaño del archivo SVG.
Mejorar la calidad de vectorización para logotipos, iconos e ilustraciones.

Nota: El espacio de nombres Aspose.Svg.ImageVectorization funciona con formatos de mapa de bits comunes (JPG, PNG, BMP, TIFF, GIF) y siempre produce un archivo SVG.

Convertir PNG a SVG con TraceSimplifier

La API de vectorización de imágenes de Aspose.SVG proporciona clases y métodos que le permiten trabajar con varias opciones de preprocesamiento de imágenes antes de guardarlas en formato vectorial. El procesamiento asume el control de las siguientes opciones de vectorización: TraceSimplifier, TraceSmoother, ColorsLimit y LineWidth.

Veamos cómo la propiedad TraceSimplifier afecta la vectorización de imágenes. Primero que nada, debe saber que:

El constructor ImageTraceSimplifier(tolerance) toma como parámetro la tolerance (tolerancia) e inicializa una instancia de la clase.
El valor de tolerance determina la tolerancia máxima de error permitida para que un punto sea eliminado de la traza. Debe estar en el rango de 0 a 4. El valor predeterminado es 0.3.
La clase ImageTraceSimplifier es responsable de reducir el número de puntos en una curva.

El siguiente fragmento de código demuestra el uso de diferentes valores de la propiedad tolerance (TraceSimplifier):

1using System.IO;
2using Aspose.Svg.ImageVectorization;
3using Aspose.Svg.Saving;

 1// Compare different SplinePathBuilder configurations for image vectorization with varying simplification levels
 2
 3// Initialize an instance of the ImageVectorizer class and specify configuration properties
 4ImageVectorizer vectorizer1 = new ImageVectorizer
 5{
 6    Configuration =
 7    {
 8        PathBuilder = new SplinePathBuilder
 9        {
10            TraceSimplifier = new ImageTraceSimplifier(0.1f),
11            TraceSmoother =   new ImageTraceSmoother(2),
12        },
13        ColorsLimit = 2
14    }
15};
16
17ImageVectorizer vectorizer2 = new ImageVectorizer
18{
19    Configuration =
20    {
21        PathBuilder = new SplinePathBuilder
22        {
23            TraceSimplifier = new ImageTraceSimplifier(1),
24            TraceSmoother =   new ImageTraceSmoother(2),
25        },
26        ColorsLimit = 2
27    }
28};
29
30ImageVectorizer vectorizer3 = new ImageVectorizer
31{
32    Configuration =
33    {
34        PathBuilder = new SplinePathBuilder
35        {
36            TraceSimplifier = new ImageTraceSimplifier(2),
37            TraceSmoother =   new ImageTraceSmoother(2),
38        },
39        ColorsLimit = 2
40    }
41};
42
43// Prepare a path for a source image file
44string sourcePath = Path.Combine(DataDir, "formats.png");
45
46// Vectorize raster image from the specified file
47using SVGDocument document1 = vectorizer1.Vectorize(sourcePath);
48using SVGDocument document2 = vectorizer2.Vectorize(sourcePath);
49using SVGDocument document3 = vectorizer3.Vectorize(sourcePath);
50
51// Save the vectorized image as an SVG file
52document1.Save(Path.Combine(OutputDir, "formats1.svg"));
53document2.Save(Path.Combine(OutputDir, "formats2.svg"));
54document3.Save(Path.Combine(OutputDir, "formats3.svg"));

Example-ConvertPngToSvgWithDifferentSplinePathBuilderConfigurations.cs hosted with ❤ by GitHub

Imágenes vectorizadas con differentes valores de la propiedad TraceSimplifier

Suavizar rutas vectoriales con TraceSmoother

A veces, los fragmentos de contornos parecen ondas en dientes de sierra o se ven dentados. Veamos cómo la propiedad TraceSmoother afecta el suavizado:

La clase ImageTraceSmoother es responsable de suavizar el número de puntos en una curva. Esta clase implementa el enfoque del vecino más cercano (Nearest Neighbor).
El constructor ImageTraceSmoother(severity) toma como parámetro la severity (intensidad).
El valor de severity determina la extensión de la región considerada por el punto de consulta. Debe estar en el rango de 0 a 20.

Veamos cómo la propiedad TraceSmoother afecta la vectorización:

1using System.IO;
2using Aspose.Svg.ImageVectorization;
3using Aspose.Svg.Saving;

 1// Vectorize PNG to SVG using ImageVectorizer and custom parameters
 2
 3// Initialize an instance of the ImageVectorizer class
 4ImageVectorizer vectorizer = new ImageVectorizer
 5{
 6    // Optionally set a configuration
 7    Configuration =
 8    {
 9        // Optionally create an instance of the PathBuilder class
10        PathBuilder = new BezierPathBuilder {
11        // Optionally set trace smoother
12        TraceSmoother = new ImageTraceSmoother(0),
13            ErrorThreshold =  30,
14            MaxIterations = 30
15        },
16        ColorsLimit = 10,
17        LineWidth = 1
18    }
19};
20// Vectorize image from the specified file
21using SVGDocument document = vectorizer.Vectorize(Path.Combine(DataDir, "flower.png"));
22
23// Save vectorized Image as an SVG file 
24document.Save(Path.Combine(OutputDir, "flower.svg"));

Example-ConvertPngToSvgUsingTraceSmootherProperty.cs hosted with ❤ by GitHub

Imágenes vectorizadas con differentes valores de la propiedad TraceSmoother

Convertir fotos a SVG en C#

¿Es posible convertir una foto a formato vectorial para que parezca idéntica a la original?

SVG no es muy adecuado para imágenes fotorrealistas, ya que todavía no permite transiciones de color naturales. Los gráficos vectoriales son mejores para logotipos, ilustraciones y dibujos técnicos. Sin embargo, vectorizar fotos puede dar como resultado efectos artísticos impresionantes.

En esta sección, intentamos elegir opciones de vectorización para que el resultado se parezca lo más posible a la foto:

1using System.IO;
2using Aspose.Svg.ImageVectorization;
3using Aspose.Svg.Saving;

 1// Convert JPG to SVG in C#
 2
 3// Initialize an instance of the ImageVectorizer class
 4ImageVectorizer vectorizer = new ImageVectorizer
 5{
 6    // Optionally set a configuration
 7    Configuration =
 8    {
 9        // Optionally create an instance of the PathBuilder class
10        PathBuilder = new SplinePathBuilder
11        {
12            TraceSmoother = new ImageTraceSmoother(1),
13            TraceSimplifier = new ImageTraceSimplifier(0.3f)
14        },
15        ColorsLimit = 25,
16        LineWidth = 1
17    }
18};
19
20// Vectorize image from a specified file
21using (SVGDocument document = vectorizer.Vectorize(Path.Combine(DataDir, "horses.jpg")))
22{
23    // Save the vectorized image as SVG
24    document.Save(Path.Combine(OutputDir, "horses-new.svg"));
25}

Example-ConvertPhotoToVectorImage.cs hosted with ❤ by GitHub

La figura muestra la foto original (a), la imagen vectorizada usando el código (b) y la imagen vectorizada mejorada manualmente (c).

Foto original y foto vectorizada

El proceso de vectorización utiliza la cuantificación de colores. Las áreas pequeñas se reemplazan por formas geométricas, lo que puede dejar pequeños espacios entre ellas. Esta es la razón de los puntos blancos en la imagen.

Consejo: Para solucionar este problema, puede editar manualmente el archivo SVG resultante. Sugerimos cambiar el valor de stroke-width="100" a "150" u otro valor adecuado.

Fragmento del archivo SVG

La foto original (a) y el archivo SVG resultante (c) se pueden ver en detalle en: horses.jpg, horses.svg.

Opciones de configuración de vectorización de imágenes

Aspose.SVG for .NET proporciona múltiples opciones para controlar la calidad de SVG, el suavizado de rutas y la complejidad de la salida.

Opción	Descripción	Uso recomendado
`ColorsLimit`	Define el número máximo de colores. Los valores bajos simplifican la estructura, mientras que los altos conservan los detalles.	Valores bajos para logotipos; altos para ilustraciones y fotos.
`ImageSizeLimit`	Define la dimensión máxima de la imagen (ancho × alto). Las imágenes grandes pueden escalarse automáticamente.	Aumente este valor para imágenes de alta resolución.
`PathBuilder`	Especifica el algoritmo de generación de rutas. Afecta el suavizado de las curvas.	Use `SplinePathBuilder` para obtener rutas más suaves.
`TraceSimplifier`	Reduce el número de puntos de ruta y simplifica la geometría.	Ayuda a reducir el tamaño del archivo y optimizar la complejidad.
`TraceSmoother`	Suaviza contornos y reduce bordes dentados.	Recomendado para imágenes ruidosas o de baja calidad.
`LineWidth`	Define el ancho de los trazos vectoriales generados.	Aumente el valor si desaparecen los contornos finos.

Limitaciones de licencia

La versión de evaluación gratuita de Aspose.SVG proporciona casi todas las funciones, excepto las siguientes:

Solo se utilizarán 4 colores dominantes.
Solo se guardará el 50% de los nodos del documento SVG.

Para probar Aspose.SVG sin limitaciones, solicite una licencia temporal de 30 días.

Resultado de vectorización sin licencia

Archivo resultante: horses-license.svg.

Problemas comunes de vectorización de imágenes y soluciones

Problema	Causa posible	Solución recomendada
El SVG contiene muchos espacios pequeños	`ColorsLimit` es demasiado bajo.	Aumente `ColorsLimit` (por ejemplo, a 30–40) o aumente el `stroke-width`.
El archivo SVG generado es demasiado grande	La tolerancia de `TraceSimplifier` es demasiado baja.	Aumente la tolerancia (típico 0.7–1.0) para reducir los puntos de ruta.
Los bordes se ven rugosos o dentados	`TraceSmoother` está desactivado o es demasiado bajo.	Use valores de suavizado entre 5 y 10.
Faltan algunos colores en el SVG de salida	La versión de evaluación limita el número de colores dominantes procesados.	Solicite una licencia temporal o completa de Aspose.SVG para habilitar el soporte de vectorización a todo color.
El SVG contiene demasiadas rutas innecesarias	La imagen de origen contiene ruido, degradados o artefactos de compresión.	Preprocese la imagen antes de la vectorización reduciendo el ruido, aumentando el contraste o utilizando gráficos de origen más simples.
La vectorización de fotos produce resultados inexactos	El trazado de ráster a vector funciona mejor para logotipos, iconos e ilustraciones que para fotografías detalladas.	Reduzca el número de colores, aumente el suavizado o use ilustraciones simplificadas en lugar de imágenes fotorrealistas.
Desaparecen las líneas finas	Simplificación o reducción de color demasiado agresiva.	Baje la tolerancia e incremente `ColorsLimit`.

FAQ

1. ¿Cómo convertir PNG a SVG en C#?
Use la clase ImageVectorizer en Aspose.SVG for .NET. La API admite configuraciones para suavizado, simplificación y reducción de color.

2. ¿Cuál es la diferencia entre imágenes rasterizadas y vectoriales?
Las imágenes rasterizadas están compuestas por píxeles y pierden calidad al escalarlas. Los gráficos vectoriales usan rutas matemáticas, lo que permite escalarlos sin pérdida de calidad.

3. ¿Cómo puedo reducir el tamaño del archivo SVG después de la vectorización?
Aumente la tolerancia de simplificación, reduzca el número de colores y use configuraciones de suavizado de ruta.

4. ¿Qué imágenes son las más adecuadas para la vectorización?
Logotipos, iconos e ilustraciones con bordes claros y colores limitados suelen dar los mejores resultados.

5. ¿Puedo personalizar el proceso de vectorización?
Sí. Aspose.SVG permite configurar límites de color, generadores de rutas, suavizado y tamaño de imagen.

Recursos relacionados

Flujo de trabajo de vectorización de imágenes – Describe el proceso y las opciones disponibles.
Stencil de imagen – Cree plantillas a partir de imágenes.
Vectorización de texto – Convierta texto en rutas.
App en línea Image Vectorizer – Pruebe la vectorización en el navegador.
Cómo ejecutar los ejemplos – Guía paso a paso para ejecutar el código de ejemplo.

Flujo de trabajo de vectorización de imágenes Convertir PNG a SVG

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.