Cómo convertir SVGs en PDF usando C#

Convertir SVG a PDF en C

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

¿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:

using IronPdf;
using System.IO;

// Cargar el archivo SVG desde la ruta local
string rutaSvg = @"C:\activos\logo-empresa.svg";
string contenidoSvg = File.ReadAllText(rutaSvg);

// Construir el HTML con el SVG incrustado
string html = $@"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Informe Anual</h1>
    <img src='file:///{rutaSvg}' class='logo' />
    <p>Resumen financiero anual con gráficos vectoriales.</p>
</body>
</html>";

// Configurar el renderizador con opciones personalizadas
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 10;
renderer.RenderingOptions.MarginBottom = 10;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Generar el PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("informe-con-svg.pdf");
using IronPdf;
using System.IO;

// Cargar el archivo SVG desde la ruta local
string rutaSvg = @"C:\activos\logo-empresa.svg";
string contenidoSvg = File.ReadAllText(rutaSvg);

// Construir el HTML con el SVG incrustado
string html = $@"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Informe Anual</h1>
    <img src='file:///{rutaSvg}' class='logo' />
    <p>Resumen financiero anual con gráficos vectoriales.</p>
</body>
</html>";

// Configurar el renderizador con opciones personalizadas
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 10;
renderer.RenderingOptions.MarginBottom = 10;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Generar el PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("informe-con-svg.pdf");
Imports IronPdf
Imports System.IO

' Cargar el archivo SVG desde la ruta local
Dim rutaSvg As String = "C:\activos\logo-empresa.svg"
Dim contenidoSvg As String = File.ReadAllText(rutaSvg)

' Construir el HTML con el SVG incrustado
Dim html As String = $"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Informe Anual</h1>
    <img src='file:///{rutaSvg}' class='logo' />
    <p>Resumen financiero anual con gráficos vectoriales.</p>
</body>
</html>"

' Configurar el renderizador con opciones personalizadas
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.MarginTop = 10
renderer.RenderingOptions.MarginBottom = 10
renderer.RenderingOptions.PrintHtmlBackgrounds = True

' Generar el PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("informe-con-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;

// Contenido SVG como cadena de texto
string contenidoSvg = @"<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>";

// Convertir a Base64
byte[] bytesSvg = System.Text.Encoding.UTF8.GetBytes(contenidoSvg);
string base64Svg = Convert.ToBase64String(bytesSvg);

// Crear HTML con el SVG Base64 incrustado
string html = $@"
<html>
<body>
    <h2>Ejemplo de SVG Incrustado</h2>
    <img src='data:image/svg+xml;base64,{base64Svg}' style='width:150px;height:150px;' />
</body>
</html>";

// Renderizar a PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("svg-incrustado.pdf");
using IronPdf;
using System;

// Contenido SVG como cadena de texto
string contenidoSvg = @"<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>";

// Convertir a Base64
byte[] bytesSvg = System.Text.Encoding.UTF8.GetBytes(contenidoSvg);
string base64Svg = Convert.ToBase64String(bytesSvg);

// Crear HTML con el SVG Base64 incrustado
string html = $@"
<html>
<body>
    <h2>Ejemplo de SVG Incrustado</h2>
    <img src='data:image/svg+xml;base64,{base64Svg}' style='width:150px;height:150px;' />
</body>
</html>";

// Renderizar a PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("svg-incrustado.pdf");
Imports IronPdf
Imports System
Imports System.Text

' Contenido SVG como cadena de texto
Dim contenidoSvg 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>"

' Convertir a Base64
Dim bytesSvg As Byte() = Encoding.UTF8.GetBytes(contenidoSvg)
Dim base64Svg As String = Convert.ToBase64String(bytesSvg)

' Crear HTML con el SVG Base64 incrustado
Dim html As String = "<html>" &
    "<body>" &
    "<h2>Ejemplo de SVG Incrustado</h2>" &
    "<img src='data:image/svg+xml;base64," & base64Svg & "' style='width:150px;height:150px;' />" &
    "</body>" &
    "</html>"

' Renderizar a PDF
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("svg-incrustado.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.

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:

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

List<string> archivosSvg = new List<string> 
{
    "grafico1.svg",
    "grafico2.svg",
    "diagrama.svg"
};

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

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

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

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

List<string> archivosSvg = new List<string> 
{
    "grafico1.svg",
    "grafico2.svg",
    "diagrama.svg"
};

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

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

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

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(constructorHtml.ToString());
pdf.SaveAs("multiples-svgs.pdf");
Imports IronPdf
Imports System.Collections.Generic
Imports System.Text

Dim archivosSvg As New List(Of String) From {
    "grafico1.svg",
    "grafico2.svg",
    "diagrama.svg"
}

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

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

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

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(constructorHtml.ToString())
pdf.SaveAs("multiples-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.

¿Puedo usar SVG en plantillas de factura electrónica española con IronPDF?

Sí. En flujos de trabajo de facturación electrónica española —tanto para facturas Facturae enviadas a FACe como para documentos que integran la lógica de facturación bajo VeriFactu— es habitual incrustar logotipos corporativos en SVG y elementos gráficos en plantillas HTML antes de convertirlas a PDF con IronPDF. El patrón de incrustación es el mismo: usa una etiqueta img con la ruta local al archivo SVG y especifica siempre los atributos width y height.

Curtis Chau
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 19,014,616 | Versión: 2026.5 just released
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.