Convertir SVG a imágenes en C# – JPG, PNG, WebP, BMP, TIFF y GIF

Para convertir SVG a PNG, JPG, WebP, BMP, TIFF o GIF en C#, cargue el SVG con SVGDocument, configure ImageSaveOptions, defina el Format de salida cuando sea necesario y llame a Converter.ConvertSVG(). Use RenderTo() con ImageDevice cuando necesite control explícito del renderizado.

En este artículo encontrará información sobre cómo convertir SVG a formatos de imagen como JPG, PNG, WebP, BMP, TIFF y GIF. La conversión a archivos de imagen se usa en desarrollo web, diseño gráfico, fotografía y otros escenarios. La elección del formato depende de si la imagen se imprimirá, se enviará por correo electrónico o se publicará en una página web.

El artículo ofrece una descripción general de las funciones de conversión de Aspose.SVG for .NET y describe escenarios admitidos de conversión de SVG a imagen con las clases Converter y SVGDocument. Para ver el mapa completo de conversiones, consulte Convertir archivos SVG en C# y Formatos de archivo admitidos.

Métodos de conversión de SVG a imagen

Aspose.SVG for .NET admite conversión directa y flujos basados en dispositivos de renderizado. Ambos enfoques pueden producir salida raster, pero se ajustan a diseños de aplicación diferentes.

EscenarioAPI recomendadaPor qué usarla
Convertir un archivo, stream, URL o documento SVG a una imagenConverter.ConvertSVG() con ImageSaveOptionsEs la opción predeterminada para conversiones comunes de SVG a PNG, JPG, WebP, BMP, TIFF o GIF.
Renderizar un documento existente mediante un dispositivo de imagenSVGDocument.RenderTo() con ImageDevice y ImageRenderingOptionsÚtil cuando la aplicación ya controla dispositivos de renderizado o necesita configuración explícita.
Definir formato, fondo, tamaño de página, resolución, antialiasing o compresión TIFFImageSaveOptions o ImageRenderingOptionsEstas opciones controlan la salida raster sin modificar el SVG fuente.
Convertir SVG en flujos web, batch o cloudSVGDocument con entrada y salida basadas en streamAyuda a evitar archivos temporales innecesarios y facilita el manejo de errores.

¿Qué formato de imagen debe elegir?

Formato de salidaMejor paraNotas
PNGIconos, gráficos de interfaz, capturas y gráficos que necesitan transparenciaLa salida sin pérdida y los fondos transparentes son razones habituales para elegir PNG.
JPG/JPEGFotografías o SVG con imágenes fotográficas incrustadasNo conserva transparencia; defina BackgroundColor al convertir SVG transparente. Consulte Cambiar color de fondo SVG.
WebPEntrega web cuando se prefieren archivos raster más pequeñosAdecuado para salida orientada a web cuando el entorno de destino admite WebP.
BMPSalida raster simple sin compresiónSuele generar archivos grandes y rara vez es la mejor opción para web.
TIFFImpresión, escaneo, archivo y flujos de publicación con varias herramientasUse opciones de compresión cuando el tamaño del archivo importe.
GIFSalida simple con color indexado y flujos web heredadosNo sustituye al renderizado de animación SVG; úselo cuando sistemas posteriores requieran GIF.

Convertidor SVG en línea

Puede convertir SVG a imágenes y otros formatos populares tanto en línea como mediante programación. Pruebe la funcionalidad de la API Aspose.SVG y convierta SVG en tiempo real. Cargue un SVG desde el sistema de archivos local, seleccione el formato de salida y ejecute el ejemplo. En el ejemplo, las opciones de guardado se establecen de forma predeterminada. Recibirá inmediatamente el resultado como un archivo independiente.

                
            

Si desea convertir SVG a formatos de imagen mediante programación, consulte los siguientes escenarios de conversión y ejemplos de C#.

Convertir SVG a JPG

JPG es uno de los formatos de imagen más utilizados. Su particularidad es la pérdida de calidad controlada durante la compresión. Por eso se usa ampliamente para almacenar y enviar por la web contenido gráfico digital, como fotos, copias escaneadas e imágenes digitalizadas. Con Aspose.SVG, puede convertir SVG a JPG, PNG, BMP, GIF o TIFF mediante programación y con control completo sobre una amplia gama de parámetros de conversión.

Usar el método ConvertSVG()

El uso de los métodos ConvertSVG() es la forma más habitual de convertir SVG a varios formatos populares. El siguiente fragmento de código muestra cómo convertir SVG a JPG:

1using System.IO;
2using Aspose.Svg.Saving;
3using Aspose.Svg.Converters;
4using Aspose.Svg.Rendering.Image;
 1// Convert SVG to JPG in C# using ImageSaveOptions
 2
 3// Initialize an SVG document from a file
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl-edited.svg")))
 5{
 6    // Initialize ImageSaveOptions
 7    ImageSaveOptions saveOptions = new ImageSaveOptions(ImageFormat.Jpeg);
 8
 9    // Convert SVG to JPG
10    Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "owl-edited.jpg"));
11}

La figura muestra el archivo owl-edited.jpg.

Archivo owl-edited.svg renderizado como JPG

En el artículo Editar SVG con selectores CSS, puede ver ejemplos de C# que muestran cómo se editó el archivo original owl.svg con selectores CSS.

Usar el método RenderTo()

Veamos cómo convertir un documento de SVG a JPG con el método RenderTo():

El siguiente ejemplo muestra cómo aplicar las propiedades Format y UseAntialiasing para convertir SVG a JPG:

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Render SVG to JPEG in C# with and without antialiasing
 2
 3// Initialize an SVG document from a file
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl.svg")))
 5{
 6    // Set Format and UseAntialiasing for jpgOptions1
 7    ImageRenderingOptions jpegOptions1 = new ImageRenderingOptions(ImageFormat.Jpeg);
 8    jpegOptions1.UseAntialiasing = true;
 9
10    // Set Format and UseAntialiasing for jpgOptions2
11    ImageRenderingOptions jpegOptions2 = new ImageRenderingOptions(ImageFormat.Jpeg);
12    jpegOptions2.UseAntialiasing = false;
13
14    // Initialize an instance of the ImageDevice class
15    using (IDevice device = new ImageDevice(jpegOptions1, Path.Combine(OutputDir, "owl_out1.jpg")))
16    {
17        // Render SVG to JPG
18        document.RenderTo(device);
19    }
20    using (IDevice device = new ImageDevice(jpegOptions2, Path.Combine(OutputDir, "owl_out2.jpg")))
21    {
22        document.RenderTo(device);
23    }
24}

El constructor ImageRenderingOptions() inicializa una instancia de la clase ImageRenderingOptions que se pasa al constructor ImageDevice(). El constructor ImageDevice(options, file) toma options y file y crea una instancia de la clase ImageDevice. El método RenderTo(device) toma la instancia de ImageDevice y renderiza SVG a JPG.

La clase ImageRenderingOptions proporciona numerosas propiedades que ofrecen control completo sobre una amplia gama de parámetros y mejoran el proceso de conversión de SVG a JPG. La propiedad Format define el formato de imagen. De forma predeterminada, esta propiedad es Png. Para convertir SVG a JPG, debe usar ImageFormat.Jpeg.

Fragmentos de imágenes resultantes

En el ejemplo anterior, convertimos el archivo SVG owl.svg a JPG con diferentes valores de UseAntialiasing. La figura muestra fragmentos ampliados al 250 % de las imágenes JPG: a) el valor de UseAntialiasing es true; b) el valor de UseAntialiasing es false.

Use UseAntialiasing = true cuando quiera mejorar la calidad visual de formas, texto e imágenes renderizadas en su aplicación, especialmente cuando la claridad y los bordes suaves sean importantes. Activar antialiasing suaviza los bordes dentados mezclando los colores de los píxeles alrededor de los bordes, lo que produce una apariencia más suave y refinada.

Aunque UseAntialiasing = true proporciona mejor calidad visual, también puede aumentar el tiempo de procesamiento. En aplicaciones donde la velocidad de renderizado es prioritaria, puede ser óptimo establecer UseAntialiasing = false.

Clase ImageSaveOptions

Aspose.SVG permite convertir SVG a formatos de imagen usando opciones de guardado predeterminadas o personalizadas. El uso de ImageSaveOptions permite personalizar el proceso de renderizado. Por ejemplo, puede especificar formato de imagen, tamaño de página, márgenes, color de fondo, etc.

PropiedadDescripción
CompressionDefine la compresión TIFF. De forma predeterminada, esta propiedad es LZW.
CSSObtiene un objeto CssOptions usado para configurar el procesamiento de propiedades CSS.
FormatDefine ImageFormat, como JPG, PNG, WebP, BMP, TIFF o GIF. De forma predeterminada, esta propiedad es PNG.
BackgroundColorDefine el color que rellenará el fondo. De forma predeterminada, esta propiedad es Transparent.
PageSetupObtiene un objeto de configuración de página y lo usa para configurar el conjunto de páginas de salida.
HorizontalResolutionDefine la resolución horizontal de las imágenes de salida en píxeles por pulgada. El valor predeterminado es 300 dpi.
VerticalResolutionDefine la resolución vertical de las imágenes de salida en píxeles por pulgada. El valor predeterminado es 300 dpi.
UseAntialiasingEspecifica si se usa antialiasing. De forma predeterminada, está activado.
TextObtiene un objeto TextOptions usado para configurar el renderizado de texto.

Nota: Las opciones implementadas con la clase ImageSaveOptions heredan de la clase ImageRenderingOptions.

Convertir SVG a PNG

El formato PNG usa un algoritmo de compresión sin pérdida para almacenar imágenes raster. Solo admite el modelo de color RGB y no está pensado para impresión. PNG se usa ampliamente para transmitir imágenes por la red y mostrar fotos y gráficos en páginas web y repositorios en la nube.

Usar el método ConvertSVG()

El siguiente fragmento de código muestra cómo preparar un archivo SVG desde cero y convertirlo a PNG:

El siguiente ejemplo muestra cómo usar ImageSaveOptions y convertir SVG a PNG con opciones de guardado personalizadas:

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Saving;
4using Aspose.Svg.Converters;
 1// Convert SVG to PNG in C# with a custom background color
 2
 3// Prepare SVG code and save it to a file
 4string code = "<svg xmlns='http://www.w3.org/2000/svg'>" +
 5              "<circle cx='100' cy='150' r='50' stroke='#2F4F4F' stroke-width='4' fill='#FF7F50' />" +
 6              "<circle cx='180' cy='200' r='60' stroke='#2F4F4F' stroke-width='4' fill='#008B8B' />" +
 7              "</svg>";
 8File.WriteAllText("example.svg", code);
 9
10// Initialize an SVG document from the file
11using (SVGDocument document = new SVGDocument("example.svg"))
12{
13    // Initialize an instance of the ImageSaveOptions class and set the BackgroundColor property
14    ImageSaveOptions saveOptions = new ImageSaveOptions();
15    saveOptions.BackgroundColor = System.Drawing.Color.Gainsboro;
16
17    // Convert SVG to PNG
18    Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "output.png"));
19}

En el ejemplo, el constructor ImageSaveOptions() inicializa una instancia de la clase ImageSaveOptions que se pasa al método ConvertSVG(). El método ConvertSVG() toma document, saveOptions y la ruta del archivo de salida, y realiza la conversión de SVG a PNG.

Nota: No especificamos la propiedad Format para convertir a PNG. El constructor ImageSaveOptions() usa Png como formato de imagen predeterminado.

Usar el método RenderTo()

Veamos cómo convertir SVG a PNG usando el método RenderTo():

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Render SVG to PNG in C# using ImageDevice
 2
 3// Prepare a path to a source SVG file
 4string documentPath = Path.Combine(DataDir, "snowflake.svg");
 5
 6// Initialize an SVG document from the file
 7using (SVGDocument document = new SVGDocument(documentPath))
 8{
 9    // Create the ImageDevice, set image Format and specify an output file to render
10    using (IDevice device = new ImageDevice(new ImageRenderingOptions(), Path.Combine(OutputDir, "snowflake.png")))
11    {
12        // Render SVG to PNG
13        document.RenderTo(device);
14    }
15}

El constructor ImageRenderingOptions() inicializa una instancia de la clase ImageRenderingOptions que se pasa al constructor ImageDevice(). El constructor ImageDevice(options, file) toma options y file y crea una instancia de ImageDevice. El método RenderTo(device) toma la instancia de ImageDevice y renderiza SVG a PNG.

La figura muestra el archivo snowflake.png.

Archivo snowflake.svg renderizado como PNG

Convertir SVG a BMP

Los archivos de imagen BMP conservan la calidad de imagen y almacenan datos de color para cada píxel sin compresión, pero sus tamaños grandes los hacen poco adecuados para la web. Este formato tampoco es adecuado para preimpresión porque se limita a RGB.

Aspose.SVG API puede convertir un documento de SVG a BMP en varias etapas:

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Convert SVG to BMP in C# using ImageDevice
 2
 3// Open a source SVG document
 4using (SVGDocument document = new SVGDocument(documentPath))
 5{
 6    // Create ImageDevice, set image Format and specify an output file to render
 7    using (IDevice device = new ImageDevice(new ImageRenderingOptions(ImageFormat.Bmp), Path.Combine(OutputDir, "conclusion_out.bmp")))
 8    {
 9        // Render SVG to BMP
10        document.RenderTo(device);
11    }
12}

El constructor ImageRenderingOptions() inicializa una instancia de ImageRenderingOptions que se pasa al constructor ImageDevice(). El constructor ImageDevice(options, file) toma options y file y crea una instancia de ImageDevice. El método RenderTo(device) toma la instancia de ImageDevice y renderiza SVG a BMP.

Convertir SVG a TIFF

TIFF es un formato para almacenar imágenes raster con una amplia paleta de colores. TIFF es compatible con aplicaciones de escaneo, fax, procesamiento de texto, reconocimiento óptico de caracteres, manipulación de imágenes y maquetación. Se usa ampliamente en impresión y offset de revistas.

Aspose.SVG API puede convertir un documento de SVG a TIFF en varias etapas:

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Convert SVG to TIFF in C# with custom settings
 2
 3// Open a source SVG document
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "conclusion.svg")))
 5{
 6    // Initialize an instance of the ImageRenderingOptions class and set the Format and Compression properties
 7    ImageRenderingOptions tiffOptions = new ImageRenderingOptions(ImageFormat.Tiff);
 8    tiffOptions.Compression = Compression.None;
 9
10    // Initialize an instance of the ImageDevice class and specify an output file to render
11    using (IDevice device = new ImageDevice(tiffOptions, Path.Combine(OutputDir, "conclusion.tiff")))
12    {
13        // Render SVG to TIFF
14        document.RenderTo(device);
15    }
16}

El constructor ImageRenderingOptions() inicializa una instancia de ImageRenderingOptions que se pasa al constructor ImageDevice(). El constructor ImageDevice(options, file) toma options y file y crea una instancia de ImageDevice. El método RenderTo(device) toma la instancia de ImageDevice y renderiza SVG a TIFF.

La clase ImageRenderingOptions proporciona numerosas propiedades que ofrecen control completo sobre una amplia gama de parámetros y mejoran el proceso de conversión de SVG a TIFF. Por ejemplo, la propiedad Compression permite configurar la compresión del formato TIFF. En el ejemplo anterior usamos Compression.None.

Convertir SVG a GIF

GIF es un formato de imagen popular que admite imágenes animadas y se usa con frecuencia en publicaciones web. El siguiente fragmento de código muestra cómo convertir SVG a GIF con Aspose.SVG for .NET API:

El siguiente ejemplo muestra cómo usar ImageSaveOptions y crear la imagen de salida con características personalizadas de PageSetup:

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Drawing;
4using Aspose.Svg.Saving;
5using Aspose.Svg.Converters;
6using Aspose.Svg.Rendering.Image;
 1// Convert SVG to GIF in C# with custom settings
 2
 3// Initialize an SVG document from a file
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl.svg")))
 5{
 6    // Initialize an instance of the ImageSaveOptions class and set the PageSetup property
 7    ImageSaveOptions saveOptions = new ImageSaveOptions(ImageFormat.Gif);
 8    saveOptions.PageSetup.AnyPage = new Page(new Drawing.Size(400, 600), new Margin(20, 20, 20, 20));
 9
10    // Convert SVG to GIF
11    Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "owl.gif"));
12}

Convertir SVGZ a PNG en C#

SVGZ es un archivo SVG comprimido, no un modelo de dibujo independiente. Aspose.SVG for .NET puede cargar archivos .svgz con SVGDocument; después puede renderizar el documento a PNG con el mismo flujo de ImageSaveOptions y Converter.ConvertSVG() usado para SVG:

1using Aspose.Svg;
2using Aspose.Svg.Converters;
3using Aspose.Svg.Saving;
4
5using (var document = new SVGDocument("input.svgz"))
6{
7    var options = new ImageSaveOptions();
8    Converter.ConvertSVG(document, options, "output.png");
9}

PNG es el formato de imagen predeterminado de ImageSaveOptions, por lo que no es necesario establecer la propiedad Format para convertir SVGZ a PNG. Use este flujo cuando necesite miniaturas, vistas previas raster o imágenes web a partir de recursos SVG comprimidos. Si necesita marcado editable antes del renderizado, consulte Convertir SVGZ a SVG en C#.

Recomendaciones prácticas

Cuando convierta SVG a imágenes raster en una aplicación .NET de producción, defina explícitamente el formato de salida, dimensiones, resolución, fondo y acceso a recursos. Esto ayuda a mantener miniaturas, vistas previas, informes e imágenes web coherentes en desarrollo local, servidores y contenedores.

Tarea de producciónRecomendación
Generar miniaturas webUse PNG o WebP, defina PageSetup y elija un fondo predecible para contenido SVG transparente. Consulte Cambiar tamaño de un documento durante la conversión desde SVG.
Convertir archivos SVG subidosCargue desde un stream o almacenamiento controlado, valide el SVG y escriba la imagen de salida en almacenamiento administrado por la aplicación. Consulte Crear, cargar y leer archivos SVG en C#.
Conservar transparenciaElija PNG o WebP y mantenga BackgroundColor transparente. Evite JPG cuando deba preservarse la transparencia. Para flujos de opacidad y exportación transparente, consulte Opacidad SVG y colores transparentes en C#.
Producir salida JPG desde SVG transparenteEstablezca BackgroundColor, porque JPG no admite transparencia alfa.
Procesar muchos archivos SVGLibere instancias de SVGDocument, maneje errores por archivo y evite conservar SVG grandes o salidas raster en memoria más tiempo del necesario.
Mantener texto estableAsegúrese de que las fuentes necesarias estén disponibles o incrustadas. Las fuentes ausentes pueden cambiar métricas de texto y el diseño final de la imagen. Consulte Trabajar con fuentes y texto SVG en C#.

Errores frecuentes y soluciones

ProblemaCausa comúnSolución
La imagen de salida tiene tamaño incorrectoEl SVG no tiene width, height o viewBox claros, o falta configuración de página de salidaDefina dimensiones SVG o configure PageSetup en ImageSaveOptions o ImageRenderingOptions. Consulte SVG viewBox y Cambiar tamaño de documento.
Un SVG transparente se vuelve negro, blanco o inesperado en JPGJPG no admite transparenciaUse PNG/WebP para transparencia o establezca BackgroundColor antes de guardar como JPG. Consulte Opacidad SVG y colores transparentes en C#.
Líneas o texto se ven dentadosAntialiasing desactivado o resolución de salida demasiado bajaUse UseAntialiasing = true y configure una resolución horizontal y vertical adecuada. Consulte Calidad de renderizado SVG y consistencia de salida.
Faltan imágenes externas, fuentes o CSSLos recursos referenciados no están disponibles durante la conversiónUse rutas de recursos accesibles, incruste recursos o configure el entorno de ejecución para resolver dependencias. Consulte Corregir problemas de estilo y fuentes SVG en C#.
Los archivos TIFF son demasiado grandesSalida TIFF sin compresión o contenido raster de alta resoluciónConfigure Compression para TIFF, revise la resolución requerida y optimice el SVG fuente cuando sea posible. Consulte Optimizar archivos SVG para web y rendimiento.
La salida difiere entre la máquina de desarrollo y el servidorFuentes, rutas de archivo o acceso a recursos difieren por entornoConfigure fuentes y ubicaciones de recursos de forma coherente para Windows, Linux, Docker y cloud. Consulte Configuración del entorno.

FAQ

¿Puedo convertir un SVG creado o editado en memoria?
Sí. Cree o actualice un SVGDocument, configure ImageSaveOptions y pase la instancia del documento a Converter.ConvertSVG(). Esto resulta útil cuando edita elementos, estilos o colores SVG antes de renderizar la imagen final.

¿Puedo cambiar el contenido SVG antes de renderizarlo como imagen?
Sí. Puede actualizar primero el DOM de SVG, por ejemplo con selectores CSS, y después renderizar el documento modificado. Consulte Editar SVG con selectores CSS en C#.

¿La conversión de SVG a imagen conserva los datos vectoriales?
No. PNG, JPG, WebP, BMP, TIFF y GIF son salidas raster. El resultado son datos de imagen basados en píxeles. Si necesita conservar marcado vectorial editable, guarde el documento como SVG o use compresión SVGZ.

¿Puedo usar el mismo código en una aplicación de servidor?
Sí. Las aplicaciones de servidor suelen cargar SVG desde un archivo, stream, URL o cadena generada, y después escriben la imagen renderizada en almacenamiento administrado por la aplicación. Configure fuentes, rutas de recursos y dimensiones de salida de forma explícita para obtener resultados coherentes.

¿Por dónde empiezo si la imagen renderizada se ve diferente del SVG de origen?
Revise dimensiones, viewBox, fuentes, recursos vinculados, CSS, color de fondo y antialiasing. La tabla Errores frecuentes y soluciones anterior enlaza los artículos de solución de problemas más relevantes.

Recursos relacionados

Puede probar nuestro SVG to JPG Converter gratuito en línea, que funciona con alta calidad y rapidez. Solo suba y convierta sus archivos para obtener resultados en unos segundos.

Convertidor SVG a JPG en línea