C#을 사용하여 SVG를 PDF로 변환하는 방법

C#에서 SVG를 PDF로 변환

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

IronPDF는 HTML을 PDF로 변환하는 방식을 사용하여 SVG 그래픽을 PDF 문서로 변환합니다. 올바른 렌더링을 위해 SVG를 img 태그에 넣고 너비/높이 스타일을 명시적으로 지정해야 합니다.

IronPDF는 HTML to PDF 방식을 통해 SVG 그래픽을 PDF 문서에 렌더링하는 것을 지원합니다. SVG(확장 가능 벡터 그래픽) 파일은 확장성과 어떤 크기에서도 선명한 렌더링 덕분에 로고, 아이콘, 일러스트레이션 및 차트에 널리 사용됩니다. SVG 파일을 PDF로 변환하는 것은 인쇄용 문서 제작, 보관 및 다양한 플랫폼에서 일관된 표시를 보장하는 데 필수적입니다.

참고: SVG를 삽입할 때는 img 요소의 width 및/또는 height 스타일 속성을 설정해야 합니다. 그렇지 않으면 크기가 0으로 줄어들어 렌더링된 PDF에 나타나지 않을 수 있습니다.

빠른 시작: 간편한 SVG를 PDF로 변환

C# 언어에서 IronPDF를 사용하여 SVG 파일을 PDF로 변환합니다. 이 코드 조각은 지정된 크기로 HTML img 태그를 통해 SVG를 삽입하는 방법을 보여줍니다. 이는 성공적인 렌더링을 위한 중요한 단계입니다. 이 가이드를 따르면 SVG가 정확하게 렌더링되고 PDF로 저장되는 빠른 구현 방법을 확인할 수 있습니다.

Nuget Icon지금 바로 NuGet을 사용하여 PDF 만들기를 시작하세요.

  1. NuGet 패키지 관리자를 사용하여 IronPDF를 설치하세요.

    PM > Install-Package IronPdf

  2. 다음 코드 조각을 복사하여 실행하세요.

    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. 실제 운영 환경에서 테스트할 수 있도록 배포하세요.

    지금 바로 무료 체험판을 통해 프로젝트에서 IronPDF를 사용해 보세요.
    arrow pointer

SVG 파일을 적절한 크기로 PDF로 변환하려면 어떻게 해야 하나요?

많은 브라우저는 크기 지정 없이도 SVG를 허용합니다. 하지만 저희 렌더링 엔진에는 해당 파일들이 필요합니다. IronPDF에서 사용하는 Chrome 렌더링 엔진은 SVG 요소를 제대로 렌더링하기 위해 명확한 크기 정보를 필요로 합니다. 치수를 지정하지 않으면 SVG 파일이 최종 PDF에 나타나지 않거나 예상치 못한 크기로 표시될 수 있습니다.

IronPDF에서 SVG를 사용할 때 올바른 렌더링을 보장하기 위한 몇 가지 옵션이 있습니다.

  1. 스타일 속성을 사용한 인라인 SVG : 스타일 속성에 너비와 높이를 직접 추가합니다.
  2. 외부 SVG 파일 : URL 또는 로컬 파일 경로를 통해 SVG 파일을 참조할 수 있습니다.
  3. Base64로 인코딩된 SVG : SVG를 Base64 문자열로 HTML에 직접 삽입합니다.

더욱 고급스러운 HTML 렌더링 옵션에 대해서는 렌더링 옵션 에 대한 종합 가이드를 참조하세요.

: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

생성된 PDF 파일은 어떤 모습인가요?

또한, 또는 대안적으로, SVG 노드에는 명시적인 너비 및 높이 속성이 할당될 수 있습니다. CodePen에서 SVG 스타일링 예시 도 확인해 보세요.

SVG를 PDF로 렌더링하는 예시

로컬 SVG 파일 작업하기

로컬 SVG 파일을 PDF로 변환할 때는 파일 경로 방식을 사용하십시오. 이 방법은 프로젝트에 저장된 SVG 에셋과 함께 사용하면 효과적입니다.

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

내장 SVG용 Base64 인코딩

외부 파일 참조 없이 SVG 데이터를 HTML에 직접 삽입해야 하는 시나리오의 경우 Base64 인코딩이 안정적인 솔루션을 제공합니다. 이 접근 방식은 이미지 삽입 가이드 에 자세히 설명되어 있습니다.

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

SVG를 PDF로 변환하기 위한 모범 사례

1. 항상 치수를 명시하십시오.

SVG 파일을 PDF로 변환할 때 가장 흔한 문제는 크기 정보가 누락되거나 0인 경우입니다. SVG 요소에는 항상 명확한 너비와 높이 값이 지정되어 있어야 합니다. 반응형 디자인을 위해서는 뷰포트 설정을 사용하여 PDF 레이아웃을 제어하는 것을 고려해 보세요.

2. 렌더링 지연을 사용하여 복잡한 SVG를 처리합니다.

애니메이션이나 JavaScript가 포함된 복잡한 SVG 파일은 렌더링 시간이 더 오래 걸릴 수 있습니다. 완전한 렌더링을 보장하려면 RenderDelay 옵션을 사용하십시오.

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

고급 JavaScript 처리에 대해서는 JavaScript 렌더링 가이드를 참조하세요.

3. SVG 파일 최적화

변환하기 전에 다음과 같이 SVG 파일을 최적화하세요.

  • 불필요한 메타데이터 제거
  • 경로 단순화
  • 일관된 렌더링을 위해 텍스트를 경로로 변환
  • 적절한 압축을 사용하세요

4. 플랫폼 간 호환성 테스트

SVG 렌더링은 운영 체제에 따라 다르게 나타날 수 있습니다. 다음 플랫폼에서 전환율을 테스트하세요:

일반적인 SVG 문제 해결

PDF에 SVG가 나타나지 않음

생성된 PDF에 SVG 파일이 나타나지 않으면 다음을 참조하세요.

  1. 치수가 올바르게 설정되었는지 확인하십시오.
  2. 파일 경로 또는 URL에 접근 가능한지 확인하십시오.
  3. SVG 파일에 적합한 MIME 유형을 확인하십시오.
  4. 픽셀 단위까지 완벽한 렌더링 가이드를 검토하세요.

확장성 및 해상도 문제

다양한 크기에서 고품질 SVG 렌더링을 위해:

// 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

SVG에서의 글꼴 렌더링

SVG에 텍스트 요소가 포함된 경우 글꼴이 제대로 포함되었는지 확인하십시오. 글꼴 관리웹 글꼴 지원 에 대해 자세히 알아보세요.

고급 SVG 변환 기술

여러 SVG 파일을 일괄 처리

여러 개의 SVG 파일을 하나의 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

여러 페이지로 작업하는 방법에 대한 자세한 내용은 PDF 병합 또는 분할 가이드를 참조하세요.

당신이 할 수 있는 다른 일들을 알아볼 준비가 되셨나요? 여기 튜토리얼 페이지( 추가 기능) 를 확인해 보세요. SVG가 포함된 PDF에 머리글과 바닥글을 추가하는 방법이나 문서 브랜딩을 위한 사용자 지정 워터마크 에 대해 알아볼 수도 있습니다.

  • TextAnnotationAddTextAnnotation를 사용하세요

자주 묻는 질문

C#에서 SVG를 PDF로 변환하는 방법은 무엇인가요?

IronPDF는 HTML을 PDF로 변환하는 방식을 사용하여 SVG를 PDF로 변환합니다. SVG 파일을 너비와 높이 스타일이 명시된 HTML img 태그에 삽입한 다음, IronPDF의 ChromePdfRenderer를 사용하여 HTML을 PDF로 렌더링하면 됩니다. 핵심은 img 요소에 적절한 크기 속성이 설정되어 있는지 확인하는 것입니다.

내 SVG 파일이 PDF에 나타나지 않는 이유는 무엇인가요?

IronPDF에서 생성된 PDF에서 SVG 파일이 제대로 표시되지 않을 수 있습니다. SVG 파일에 너비와 높이가 명시적으로 지정되어 있지 않으면 문제가 발생할 수 있습니다. IronPDF에서 사용하는 Chrome 렌더링 엔진은 스타일 속성 또는 img 태그의 너비/높이 속성을 통해 크기를 설정해야 합니다. 이러한 속성이 없으면 SVG 파일의 크기가 0으로 줄어들 수 있습니다.

PDF 변환을 위해 SVG를 삽입하는 다양한 방법에는 어떤 것들이 있나요?

IronPDF는 SVG를 삽입하는 세 가지 주요 방법을 지원합니다. 1) 너비와 높이에 대한 스타일 속성을 사용하는 인라인 SVG, 2) URL 또는 로컬 파일 경로를 통해 참조되는 외부 SVG 파일, 3) HTML에 직접 삽입되는 Base64로 인코딩된 SVG입니다. 모든 방법에는 적절한 크기 지정이 필요합니다.

로컬 SVG 파일을 PDF로 변환할 수 있나요?

네, IronPDF는 로컬 SVG 파일을 PDF로 변환할 수 있습니다. 프로젝트에 저장된 SVG 파일을 `img` 태그의 `src` 속성을 통해 참조하는 파일 경로 방식을 사용하세요. 올바른 렌더링을 위해 너비와 높이를 지정하는 것을 잊지 마세요.

SVG를 PDF로 변환할 때 어떤 렌더링 옵션을 사용해야 할까요?

IronPDF를 사용하여 SVG를 PDF로 변환할 때는 적절한 RenderingOptions와 함께 ChromePdfRenderer를 사용하십시오. 일반적으로 WaitFor.RenderDelay(1000)을 사용하여 렌더링 지연 시간을 추가하면 변환 전에 SVG가 완전히 로드되도록 할 수 있습니다. 이는 복잡한 SVG를 처리하거나 외부 리소스를 로드할 때 유용합니다.

변환된 SVG 파일을 PDF 파일로 저장하려면 어떻게 해야 하나요?

IronPDF의 ChromePdfRenderer를 사용하여 SVG가 포함된 HTML을 렌더링한 후, SaveAs 메서드를 사용하여 PDF 파일을 저장하세요. 렌더링된 PDF 객체에서 SaveAs("filename.pdf")를 호출하면 지정된 위치에 저장됩니다.

커티스 차우
기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

시작할 준비 되셨나요?
Nuget 다운로드 17,527,568 | 버전: 2026.2 방금 출시되었습니다