1. IronPDF
  2. Guías
  3. Gráficos SVG
Cómo convertir SVGs en PDF usando C#

Convertir SVG a PDF en C#

Curtis Chau
Curtis Chau
Actualizado:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF convierte gráficos SVG en documentos PDF utilizando el método HTML a PDF: incruste su SVG en una etiqueta img con estilos explícitos de anchura/altura para garantizar una representación adecuada.

IronPDF permite convertir gráficos SVG en documentos PDF mediante el método HTML a PDF. Los archivos SVG (gráficos vectoriales escalables) se utilizan mucho para logotipos, iconos, ilustraciones y gráficos, ya que se pueden escalar y reproducir con nitidez en cualquier tamaño. La conversión de SVG a PDF es esencial para crear documentos listos para imprimir, archivar y garantizar una visualización coherente en distintas plataformas.

Nota: Establezca el atributo de estilo width y/o height del elemento img al incrustar un SVG; de lo contrario, podría reducirse a tamaño cero y no aparecer en el PDF renderizado.

como encabezado:2(Inicio rápido: Conversión de SVG a PDF sin esfuerzo)

Convertir archivos SVG a PDF con IronPDF en C#. Este fragmento demuestra cómo incrustar un SVG a través de una etiqueta img en HTML con dimensiones especificadas, un paso crucial para un renderizado exitoso. Siga esta guía para una implementación rápida que garantice que sus SVG se renderizan y guardan como PDF con precisión.

Nuget IconEmpieza a crear PDF con NuGet ahora:

  1. Instalar IronPDF con el gestor de paquetes NuGet

    PM > Install-Package IronPdf

  2. Copie y ejecute este fragmento de código.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { WaitFor = IronPdf.Rendering.WaitFor.RenderDelay(1000) } }
    .RenderHtmlAsPdf("<img src='https://example.com/logo.svg' style='width:100px;height:100px;'>")
    .SaveAs("svgToPdf.pdf");

  3. Despliegue para probar en su entorno real

    Empieza a utilizar IronPDF en tu proyecto hoy mismo con una prueba gratuita
    arrow pointer

Flujo de trabajo mínimo (5 pasos)

  1. Instalar la biblioteca IronPDF para la conversión de SVG a PDF
  2. Utilizar la etiqueta img en HTML para importar una imagen SVG
  3. Utiliza diferentes métodos de renderizado en IronPDF para generar PDF
  4. Guarde el archivo PDF que contiene la imagen SVG con el método SaveAs
  5. Verifica el PDF en la ubicación especificada

¿Cómo convertir SVG a PDF con el tamaño adecuado?

Muchos navegadores toleran SVG sin especificaciones de tamaño; sin embargo, nuestro motor de renderizado las requiere. El motor de renderizado de Chrome utilizado por IronPDF requiere dimensiones explícitas para renderizar correctamente los elementos SVG. Si no se especifican las dimensiones, es posible que el SVG no aparezca en el PDF final o que se muestre con un tamaño inesperado.

Al trabajar con SVG en IronPDF, tiene varias opciones para garantizar una representación adecuada:

  1. SVG en línea con atributos de estilo: Añade anchura y altura directamente en el atributo de estilo
  2. Archivos SVG externos: Referencia a archivos SVG mediante URL o ruta de archivo local
  3. SVG codificados en Base64: incruste SVG directamente en el HTML como cadenas Base64

Para conocer opciones más avanzadas de renderizado HTML, consulte nuestra guía completa sobre opciones de renderizado.

:path=/static-assets/pdf/content-code-examples/how-to/SVGs-render.cs
using IronPdf;

string html = "<img src='https://ironsoftware.com/img/svgs/new-banner-svg.svg' style='width:100px'>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.RenderDelay(1000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("svgToPdf.pdf");
$vbLabelText   $csharpLabel

¿Qué aspecto tiene el PDF generado?

Adicionalmente, o alternativamente, un nodo SVG puede tener un atributo de ancho y alto asignado explícitamente. Véase también ejemplos de estilo SVG en CodePen.

Ejemplo de conversión de SVG a PDF

Trabajar con archivos SVG locales

Al convertir archivos SVG locales a PDF, utilice el método de ruta de archivo. Este método funciona bien con activos SVG almacenados en el proyecto:

using IronPdf;
using System.IO;

// Load SVG file content
string svgPath = @"C:\assets\company-logo.svg";
string svgContent = File.ReadAllText(svgPath);

// Create HTML with embedded SVG
string html = $@"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Company Report</h1>
    <img src='file:///{svgPath}' class='logo' />
    <p>Annual financial summary with vector graphics.</p>
</body>
</html>";

// Configure renderer with custom settings
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 10;
renderer.RenderingOptions.MarginBottom = 10;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Generate PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("report-with-svg.pdf");
using IronPdf;
using System.IO;

// Load SVG file content
string svgPath = @"C:\assets\company-logo.svg";
string svgContent = File.ReadAllText(svgPath);

// Create HTML with embedded SVG
string html = $@"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Company Report</h1>
    <img src='file:///{svgPath}' class='logo' />
    <p>Annual financial summary with vector graphics.</p>
</body>
</html>";

// Configure renderer with custom settings
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 10;
renderer.RenderingOptions.MarginBottom = 10;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Generate PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("report-with-svg.pdf");
$vbLabelText   $csharpLabel

Codificación Base64 para SVG incrustados

La codificación Base64 ofrece una solución fiable para los casos en los que se requieran datos SVG incrustados directamente en HTML sin referencias a archivos externos. Este enfoque se explica en detalle en nuestra guía de incorporación de imágenes:

using IronPdf;
using System;

// SVG content as string
string svgContent = @"<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
    <circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' />
</svg>";

// Convert to Base64
byte[] svgBytes = System.Text.Encoding.UTF8.GetBytes(svgContent);
string base64Svg = Convert.ToBase64String(svgBytes);

// Create HTML with Base64 embedded SVG
string html = $@"
<html>
<body>
    <h2>Embedded SVG Example</h2>
    <img src='data:image/svg+xml;base64,{base64Svg}' style='width:150px;height:150px;' />
</body>
</html>";

// Render to PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("embedded-svg.pdf");
using IronPdf;
using System;

// SVG content as string
string svgContent = @"<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
    <circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' />
</svg>";

// Convert to Base64
byte[] svgBytes = System.Text.Encoding.UTF8.GetBytes(svgContent);
string base64Svg = Convert.ToBase64String(svgBytes);

// Create HTML with Base64 embedded SVG
string html = $@"
<html>
<body>
    <h2>Embedded SVG Example</h2>
    <img src='data:image/svg+xml;base64,{base64Svg}' style='width:150px;height:150px;' />
</body>
</html>";

// Render to PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("embedded-svg.pdf");
$vbLabelText   $csharpLabel

Prácticas recomendadas para la conversión de SVG a PDF

1. Especifique siempre las dimensiones

El problema más común al convertir SVG a PDF es la falta de dimensiones o las dimensiones cero. Asegúrese siempre de que sus elementos SVG tienen valores explícitos de anchura y altura. Para diseños adaptables, considere el uso de viewport settings para controlar el diseño del PDF.

2. Manejar SVG complejos con retrasos de renderización

Los archivos SVG complejos con animaciones o JavaScript pueden requerir tiempo de renderización adicional. Utilice la opción RenderDelay para garantizar una renderización completa:

renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 seconds
renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 seconds
$vbLabelText   $csharpLabel

Para un manejo avanzado de JavaScript, explore nuestra Guía de renderización de JavaScript.

3. Optimizar archivos SVG

Antes de la conversión, optimice sus archivos SVG:

  • Eliminación de metadatos innecesarios
  • Simplificación de rutas
  • Conversión de texto en trazados para una representación coherente
  • Utilizar la compresión adecuada

4. Comprobar la compatibilidad entre plataformas

La representación de SVG puede variar según el sistema operativo. Pruebe sus conversiones en:

Solución de problemas comunes con SVG

SVG no aparece en PDF

Si su SVG no aparece en el PDF generado:

  1. Comprobar que las dimensiones son correctas
  2. Compruebe que las rutas de los archivos o las URL sean accesibles
  3. Garantizar el tipo MIME adecuado para los archivos SVG
  4. Consulte nuestra guía de renderización perfecta

Problemas de escalado y resolución

Para renderizado SVG de alta calidad a diferentes escalas:

// Set custom DPI for better quality
renderer.RenderingOptions.DPI = 300;

// Use CSS transforms for scaling
string html = @"
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />";
// Set custom DPI for better quality
renderer.RenderingOptions.DPI = 300;

// Use CSS transforms for scaling
string html = @"
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />";
$vbLabelText   $csharpLabel

Renderizado de fuentes en SVG

Cuando los SVG contengan elementos de texto, asegúrese de que las fuentes estén correctamente incrustadas. Más información sobre gestión de fuentes y soporte de fuentes web.

Técnicas avanzadas de conversión a SVG

Procesamiento por lotes de múltiples SVG

Para convertir varios archivos SVG en un único documento PDF:

using IronPdf;
using System.Collections.Generic;
using System.Text;

List<string> svgFiles = new List<string> 
{
    "chart1.svg",
    "chart2.svg",
    "diagram.svg"
};

StringBuilder htmlBuilder = new StringBuilder();
htmlBuilder.Append("<html><body>");

foreach(string svgFile in svgFiles)
{
    htmlBuilder.Append($@"
        <div style='page-break-after:always;'>
            <img src='{svgFile}' style='width:600px;height:400px;' />
        </div>");
}

htmlBuilder.Append("</body></html>");

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlBuilder.ToString());
pdf.SaveAs("multiple-svgs.pdf");
using IronPdf;
using System.Collections.Generic;
using System.Text;

List<string> svgFiles = new List<string> 
{
    "chart1.svg",
    "chart2.svg",
    "diagram.svg"
};

StringBuilder htmlBuilder = new StringBuilder();
htmlBuilder.Append("<html><body>");

foreach(string svgFile in svgFiles)
{
    htmlBuilder.Append($@"
        <div style='page-break-after:always;'>
            <img src='{svgFile}' style='width:600px;height:400px;' />
        </div>");
}

htmlBuilder.Append("</body></html>");

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlBuilder.ToString());
pdf.SaveAs("multiple-svgs.pdf");
$vbLabelText   $csharpLabel

Para obtener más información sobre cómo trabajar con varias páginas, consulte nuestra guía para combinar o dividir archivos PDF.

¿Listo para ver qué más puedes hacer? Consulta nuestra página de tutoriales aquí: Características adicionales. También puede explorar cómo añadir encabezados y pies de página a sus PDF que contengan SVG u obtener información sobre marcas de agua personalizadas para marcar sus documentos.

  • Utilice Anotación de texto y Añadir anotación de texto

Preguntas Frecuentes

¿Cómo convierto SVG a PDF en C#?

IronPDF convierte SVG a PDF utilizando el método HTML a PDF. Sólo tiene que incrustar su SVG en una etiqueta HTML img con estilos explícitos de anchura y altura y, a continuación, utilizar IronPDF's ChromePdfRenderer para renderizar el HTML como PDF. La clave es asegurarse de que los atributos de tamaño adecuados se establecen en el elemento img.

¿Por qué no aparece mi SVG en el PDF?

Es posible que los SVG no aparezcan en los PDF generados por IronPDF si carecen de especificaciones explícitas de anchura y altura. El motor de renderizado de Chrome utilizado por IronPDF requiere que las dimensiones se establezcan mediante atributos de estilo o atributos de anchura/altura en la etiqueta img. Sin ellos, el SVG puede reducirse a cero.

¿Cuáles son los diferentes métodos para incrustar SVG en la conversión de PDF?

IronPDF admite tres métodos principales para incrustar SVG: 1) SVG en línea con atributos de estilo para anchura y altura, 2) archivos SVG externos referenciados mediante URL o ruta de archivo local, y 3) SVG codificados en Base64 incrustados directamente en el HTML. Todos los métodos requieren especificaciones de tamaño adecuadas.

¿Puedo convertir archivos SVG locales a PDF?

Sí, IronPDF puede convertir archivos SVG locales a PDF. Utilice el método de ruta de archivo haciendo referencia a sus activos SVG almacenados en su proyecto a través del atributo src de la etiqueta img. Recuerde incluir las especificaciones de anchura y altura para una correcta renderización.

¿Qué opciones de renderizado debo utilizar para la conversión de SVG a PDF?

Al convertir SVG a PDF con IronPDF, utilice ChromePdfRenderer con las RenderingOptions adecuadas. Un enfoque común es añadir un RenderDelay utilizando WaitFor.RenderDelay(1000) para asegurar que los SVGs se cargan completamente antes de la conversión. Esto ayuda con SVGs complejos o cuando se cargan recursos externos.

¿Cómo puedo guardar el SVG convertido en un archivo PDF?

Después de renderizar el HTML que contiene SVG con ChromePdfRenderer de IronPDF, utilice el método SaveAs para guardar el archivo PDF. Simplemente llame a SaveAs("filename.pdf") en el objeto PDF renderizado para guardarlo en la ubicación especificada.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 17,012,929 | Versión: 2025.12 recién lanzado