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 enfoque de HTML a PDF: incrusta tu SVG en una etiqueta img con estilos explícitos height para asegurar una renderizació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.

En el entorno empresarial español, los archivos SVG tienen una presencia habitual en la generación de documentos de facturación electrónica: los logotipos corporativos y los elementos gráficos de plantillas Facturae se incrustan como gráficos vectoriales en las plantillas HTML antes de su conversión a PDF. Los códigos QR de verificación AEAT, exigidos en toda factura española, se generan frecuentemente a partir de datos vectoriales y se combinan con otros elementos SVG en la maquetación final del documento antes de llamar a RenderHtmlAsPdf.

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

Inicio rápido: Conversión de SVG a PDF sin esfuerzo

Convertir archivos SVG a PDF con IronPDF en C#. Este fragmento demuestra la incrustación de un SVG a través de una etiqueta HTML img con dimensiones especificadas, un paso crucial para una renderización exitosa. Sigue esta guía para una implementación rápida que garantice que tus SVG se renderizan y guardan como PDF con precisión.

  1. Instala IronPDF con el Administrador 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

    Comienza a usar IronPDF en tu proyecto hoy mismo con una prueba gratuita

    arrow pointer

Flujo de trabajo mínimo (5 pasos)

  1. Instalar Biblioteca IronPdf para Conversión de SVG a PDF
  2. Utilizar la etiqueta img en HTML para importar una imagen SVG
  3. Utiliza diferentes métodos de renderización en IronPdf para generar PDF
  4. Guarda 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, tienes varias opciones para garantizar una representación adecuada:

  1. SVG en línea con atributos de estilo: Añade width y height directamente en el atributo de estilo
  2. Archivos SVG Externos: Referencia archivos SVG a través de URL o ruta de archivo local
  3. SVG Codificados en Base64: Incrusta SVG directamente en el HTML como cadenas Base64

Para conocer opciones más avanzadas de renderizado HTML, consulta 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");
Imports IronPdf

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

Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.RenderDelay(1000)

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

¿Qué aspecto tiene el PDF generado?

Además, o alternativamente, un nodo SVG puede tener asignado un atributo explícito width y height. 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, utiliza el método de ruta de archivo. Este método funciona bien con activos SVG almacenados en el proyecto, como logotipos de empresa o iconos de marca para informes corporativos:

:path=/static-assets/pdf/content-code-examples/how-to/SVGs-3.cs
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");

Imports IronPdf
Imports System.IO

' Load SVG file content
Dim svgPath As String = "C:\assets\company-logo.svg"
Dim svgContent As String = File.ReadAllText(svgPath)

' Create HTML with embedded SVG
Dim html As String = $"
<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
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.MarginTop = 10
renderer.RenderingOptions.MarginBottom = 10
renderer.RenderingOptions.PrintHtmlBackgrounds = True

' Generate PDF
Dim pdf As PdfDocument = 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:

:path=/static-assets/pdf/content-code-examples/how-to/SVGs-4.cs
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");

Imports IronPdf
Imports System
Imports System.Text

' SVG content as string
Dim svgContent As String = "<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
Dim svgBytes As Byte() = Encoding.UTF8.GetBytes(svgContent)
Dim base64Svg As String = Convert.ToBase64String(svgBytes)

' Create HTML with Base64 embedded SVG
Dim html As String = $"
<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
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("embedded-svg.pdf")
$vbLabelText   $csharpLabel

SVG en Documentos de Facturación Electrónica Española

En España, la generación de facturas electrónicas en formato PDF implica habitualmente el uso de elementos SVG en las plantillas HTML. Los logotipos corporativos en formato vectorial garantizan nitidez a cualquier escala; los elementos decorativos y separadores de sección se definen frecuentemente como SVG inline para evitar dependencias externas. Los flujos de trabajo que cumplen los requisitos de Facturae para envíos B2G a plataformas como FACe, o que integran la lógica de generación de documentos de facturación bajo VeriFactu, emplean el mismo patrón de incrustación SVG que se describe en este artículo.

El siguiente ejemplo ilustra una plantilla de factura típica con logotipo SVG local:

using IronPdf;

// Plantilla de factura con logotipo SVG incrustado
string plantillaFactura = @"
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .cabecera { display: flex; align-items: center; margin-bottom: 20px; }
        .logo { width: 150px; height: 60px; margin-right: 20px; }
        .datos-factura { font-size: 14px; }
    </style>
</head>
<body>
    <div class='cabecera'>
        <img src='file:///C:/facturas/logo-empresa.svg' class='logo' />
        <div class='datos-factura'>
            <h1>Factura N.º 2024-0042</h1>
            <p>Fecha: 21/05/2026 | Proveedor: Empresa Ejemplo S.L.</p>
        </div>
    </div>

</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 15;
renderer.RenderingOptions.MarginBottom = 15;
PdfDocument facturaPdf = renderer.RenderHtmlAsPdf(plantillaFactura);
facturaPdf.SaveAs("factura-2024-0042.pdf");
using IronPdf;

// Plantilla de factura con logotipo SVG incrustado
string plantillaFactura = @"
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .cabecera { display: flex; align-items: center; margin-bottom: 20px; }
        .logo { width: 150px; height: 60px; margin-right: 20px; }
        .datos-factura { font-size: 14px; }
    </style>
</head>
<body>
    <div class='cabecera'>
        <img src='file:///C:/facturas/logo-empresa.svg' class='logo' />
        <div class='datos-factura'>
            <h1>Factura N.º 2024-0042</h1>
            <p>Fecha: 21/05/2026 | Proveedor: Empresa Ejemplo S.L.</p>
        </div>
    </div>

</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 15;
renderer.RenderingOptions.MarginBottom = 15;
PdfDocument facturaPdf = renderer.RenderHtmlAsPdf(plantillaFactura);
facturaPdf.SaveAs("factura-2024-0042.pdf");
Imports IronPdf

' Plantilla de factura con logotipo SVG incrustado
Dim plantillaFactura As String = "
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .cabecera { display: flex; align-items: center; margin-bottom: 20px; }
        .logo { width: 150px; height: 60px; margin-right: 20px; }
        .datos-factura { font-size: 14px; }
    </style>
</head>
<body>
    <div class='cabecera'>
        <img src='file:///C:/facturas/logo-empresa.svg' class='logo' />
        <div class='datos-factura'>
            <h1>Factura N.º 2024-0042</h1>
            <p>Fecha: 21/05/2026 | Proveedor: Empresa Ejemplo S.L.</p>
        </div>
    </div>

</body>
</html>"

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.MarginTop = 15
renderer.RenderingOptions.MarginBottom = 15
Dim facturaPdf As PdfDocument = renderer.RenderHtmlAsPdf(plantillaFactura)
facturaPdf.SaveAs("factura-2024-0042.pdf")
$vbLabelText   $csharpLabel

Para flujos avanzados que incluyan firma electrónica o generación de XML Facturae incrustado, consulta las guías específicas de IronPDF para firma PAdES y formatos de facturación electrónica.

Icon Quote related to SVG en Documentos de Facturación Electrónica Española

Mi biblioteca favorita de este tipo es IronPDF. Permite una manipulación rápida y eficiente de archivos PDF. También tiene muchas funciones valiosas, como exportar al formato PDF/A y firmar documentos PDF digitalmente.

Milan Jovanovic related to SVG en Documentos de Facturación Electrónica Española

Milan Jovanovic

Microsoft MVP

Ver estudio de caso
Icon Quote related to SVG en Documentos de Facturación Electrónica Española

IronOCR significa que podemos ahorrar $40,000 anualmente en el procesamiento manual, mientras mejoramos la productividad y liberamos recursos para tareas de alto impacto. Lo recomendaría encarecidamente.

Brent Matzelle related to SVG en Documentos de Facturación Electrónica Española

Brent Matzelle

Director de Tecnología, OPYN

Ver estudio de caso
Icon Quote related to SVG en Documentos de Facturación Electrónica Española

El Iron Suite juega un papel crucial en nuestras operaciones. Estas son herramientas que aumentan la eficiencia en toda la empresa, incluyendo la creación de planos y la mejora en la gestión de inventario.

David Jones related to SVG en Documentos de Facturación Electrónica Española

David Jones

Ingeniero de Software Principal, Agorus Build

Ver estudio de caso

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

1. Especifica siempre las dimensiones

El problema más común al convertir SVG a PDF es la falta de dimensiones o las dimensiones cero. Asegúrate siempre de que tus elementos SVG tengan valores explícitos de width y height. Para diseños adaptables, considera 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 adicional de renderización. Usa la opción RenderDelay para asegurar una renderización completa:

renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Esperar 2 segundos
renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Esperar 2 segundos
renderer.RenderingOptions.WaitFor.RenderDelay(2000) ' Esperar 2 segundos
$vbLabelText   $csharpLabel

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

3. Optimizar archivos SVG

Antes de la conversión, optimiza tus archivos SVG:

  • Eliminar metadatos innecesarios
  • Simplificar las rutas
  • Convertir texto en rutas para una renderización consistente
  • Utilizar la compresión adecuada

4. Comprobar la compatibilidad entre plataformas

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

Solución de problemas comunes con SVG

SVG no aparece en PDF

Si tu SVG no aparece en el PDF generado:

  1. Verifica que las dimensiones estén configuradas correctamente
  2. Comprueba que las rutas de los archivos o URLs sean accesibles
  3. Asegura el tipo MIME adecuado para los archivos SVG
  4. Consulta nuestra guía de renderización perfecta

Problemas de escalado y resolución

Para renderizado SVG de alta calidad a diferentes escalas:

// Establecer DPI personalizado para mejor calidad
renderer.RenderingOptions.DPI = 300;

// Usar transformaciones CSS para escalar
string html = @"
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />";
// Establecer DPI personalizado para mejor calidad
renderer.RenderingOptions.DPI = 300;

// Usar transformaciones CSS para escalar
string html = @"
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />";
' Establecer DPI personalizado para mejor calidad
renderer.RenderingOptions.DPI = 300

' Usar transformaciones CSS para escalar
Dim html As String = "
<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úrate de que las fuentes estén correctamente incrustadas. En documentos con texto en español, verifica que la fuente admita caracteres acentuados (á, é, í, ó, ú, ñ) y la puntuación invertida (¿, ¡), habituales en contenido de texto libre dentro de SVG. 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:

:path=/static-assets/pdf/content-code-examples/how-to/SVGs-7.cs
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");

Imports IronPdf
Imports System.Collections.Generic
Imports System.Text

Dim svgFiles As New List(Of String) From {
    "chart1.svg",
    "chart2.svg",
    "diagram.svg"
}

Dim htmlBuilder As New StringBuilder()
htmlBuilder.Append("<html><body>")

For Each svgFile As String In svgFiles
    htmlBuilder.Append($"
        <div style='page-break-after:always;'>
            <img src='{svgFile}' style='width:600px;height:400px;' />
        </div>")
Next

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

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = 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, consulta 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 puedes explorar cómo añadir encabezados y pies de página a tus PDF que contengan SVG u obtener información sobre marcas de agua personalizadas para marcar tus documentos.

  • Usa TextAnnotation y AddTextAnnotation

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 20,296,129 | Versión: 2026.7 recién publicada
Still Scrolling Icon

¿Aún desplazándote?

¿Quieres una prueba rápida? PM > Install-Package IronPdf
ejecutar una muestra Mira cómo tu HTML se convierte en PDF.