<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>svg processing on Document Processing REST APIs | GroupDocs Cloud</title>
    <link>https://blog-qa.groupdocs.cloud/ko/tag/svg-processing/</link>
    <description>Recent content in svg processing on Document Processing REST APIs | GroupDocs Cloud</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>ko</language>
    <lastBuildDate>Mon, 17 Aug 2026 08:29:07 +0000</lastBuildDate><atom:link href="https://blog-qa.groupdocs.cloud/ko/tag/svg-processing/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Node.JS에서 SVG를 PNG로 변환</title>
      <link>https://blog-qa.groupdocs.cloud/ko/conversion/svg-to-png-conversion-in-nodejs/</link>
      <pubDate>Mon, 17 Aug 2026 08:29:07 +0000</pubDate>
      
      <guid>https://blog-qa.groupdocs.cloud/ko/conversion/svg-to-png-conversion-in-nodejs/</guid>
      <description>Node.JS에서 GroupDocs.Conversion Cloud SDK를 사용하여 SVG 파일을 PNG 이미지로 변환하는 방법을 배웁니다. 이 가이드에는 코드, cURL 예제 및 모범 사례가 포함되어 있습니다.</description>
      <content:encoded><![CDATA[<p>벡터 그래픽을 래스터 이미지로 변환하는 것은 서버에서 썸네일, 미리보기 또는 PDF를 생성할 때 자주 필요한 작업입니다. <a href="https://products.groupdocs.cloud/conversion/nodejs/">GroupDocs.Conversion Cloud SDK for Node.JS</a>는 클라우드에서 완전히 <a href="https://docs.fileformat.com/page-description-language/svg/">SVG</a>를 <a href="https://docs.fileformat.com/image/png/">PNG</a>로 변환하는 강력한 라이브러리를 제공합니다. 이 가이드에서는 완전한 작업 예제, 일치하는 cURL 워크플로, 구성 팁 및 모범 사례 권장 사항을 확인할 수 있습니다. 끝까지 읽으면 서버 측 SVG를 PNG로 변환하는 기능을 모든 Node.JS 애플리케이션에 통합할 수 있게 됩니다.</p>
<h2 id="nodejs에서-svg를-png로-변환하는-전체-작업-예제">Node.JS에서 SVG를 PNG로 변환하는 전체 작업 예제</h2>
<p>이 예제에서는 GroupDocs Cloud storage에 저장된 SVG 파일을 PNG 이미지로 변환하는 방법을 GroupDocs.Conversion Cloud SDK for Node.JS를 사용하여 보여줍니다.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">Configuration</span>, <span style="color:#a6e22e">ConvertApi</span>, <span style="color:#a6e22e">ConvertDocumentRequest</span>, <span style="color:#a6e22e">ConvertSettings</span>, <span style="color:#a6e22e">PngOptions</span>, <span style="color:#a6e22e">StorageApi</span>, <span style="color:#a6e22e">DownloadFileRequest</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;@groupdocs/conversion-cloud&#34;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fs</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;fs&#39;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">path</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;path&#39;</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Configuration – replace with your own credentials
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Configuration</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">clientId</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;YOUR_CLIENT_ID&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">clientSecret</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;YOUR_CLIENT_SECRET&#34;</span>
</span></span><span style="display:flex;"><span>});
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">convertApi</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">ConvertApi</span>(<span style="color:#a6e22e">config</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">storageApi</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">StorageApi</span>(<span style="color:#a6e22e">config</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Define source SVG and target PNG locations inside GroupDocs Cloud storage
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">inputSvgPath</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;input/sample.svg&#34;</span>;          <span style="color:#75715e">// SVG stored in cloud storage
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">outputPngPath</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;output/sample.png&#34;</span>;       <span style="color:#75715e">// Desired PNG location
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// PNG conversion options – set dimensions to control memory/CPU usage
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pngOptions</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PngOptions</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1024</span>,               <span style="color:#75715e">// Resize width (optional)
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">768</span>,               <span style="color:#75715e">// Resize height (optional)
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">backgroundColor</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;#FFFFFF&#34;</span> <span style="color:#75715e">// Ensure opaque background
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>});
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Build conversion settings object
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">convertSettings</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">ConvertSettings</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">filePath</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inputSvgPath</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">format</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;png&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">outputPath</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">outputPngPath</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">options</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">pngOptions</span>
</span></span><span style="display:flex;"><span>});
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">convertRequest</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">ConvertDocumentRequest</span>(<span style="color:#a6e22e">convertSettings</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Execute conversion, then download the PNG locally
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// -----------------------------------------------------------------------------
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">convertApi</span>.<span style="color:#a6e22e">convertDocument</span>(<span style="color:#a6e22e">convertRequest</span>)
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">convResult</span> =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Conversion succeeded. Cloud file:&#34;</span>, <span style="color:#a6e22e">convResult</span>.<span style="color:#a6e22e">path</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">downloadReq</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">DownloadFileRequest</span>({ <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">convResult</span>.<span style="color:#a6e22e">path</span> });
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">storageApi</span>.<span style="color:#a6e22e">downloadFile</span>(<span style="color:#a6e22e">downloadReq</span>);
</span></span><span style="display:flex;"><span>    })
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">fileBuffer</span> =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">localFile</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">__dirname</span>, <span style="color:#e6db74">&#34;sample.png&#34;</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">fs</span>.<span style="color:#a6e22e">writeFileSync</span>(<span style="color:#a6e22e">localFile</span>, <span style="color:#a6e22e">fileBuffer</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;PNG downloaded to:&#34;</span>, <span style="color:#a6e22e">localFile</span>);
</span></span><span style="display:flex;"><span>    })
</span></span><span style="display:flex;"><span>    .<span style="color:#66d9ef">catch</span>(<span style="color:#a6e22e">err</span> =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#e6db74">&#34;Error during SVG → PNG conversion:&#34;</span>, <span style="color:#a6e22e">err</span>);
</span></span><span style="display:flex;"><span>    })
</span></span><span style="display:flex;"><span>    .<span style="color:#66d9ef">finally</span>(() =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// Clean up HTTP client resources if the SDK exposes a close method
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">config</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">httpClient</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">httpClient</span>.<span style="color:#a6e22e">close</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;function&#34;</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">httpClient</span>.<span style="color:#a6e22e">close</span>();
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    });
</span></span></code></pre></div><blockquote>
<p><strong>참고:</strong> 이 코드 예제는 핵심 기능을 보여줍니다. 프로젝트에서 사용하기 전에 파일 경로(<code>input/sample.svg</code>, <code>output/sample.png</code> 등)를 실제 파일 위치에 맞게 업데이트하고, 모든 필수 종속성이 올바르게 설치되었는지 확인한 뒤 개발 환경에서 충분히 테스트하세요. 문제가 발생하면 <a href="https://docs.groupdocs.cloud/conversion/">공식 문서</a>를 참고하거나 <a href="https://forum.groupdocs.cloud/c/conversion/11">지원 팀</a>에 문의하십시오.</p>
</blockquote>
<h2 id="curl을-사용한-rest-api를-통한-svg에서-png-변환">cURL을 사용한 REST API를 통한 SVG에서 PNG 변환</h2>
<p>순수 REST 방식을 선호한다면, 동일한 변환을 cURL 명령으로 수행할 수 있습니다. 아래 단계에서는 액세스 토큰을 얻고, SVG를 업로드하고, 변환을 시작한 다음 PNG를 다운로드하는 방법을 보여줍니다.</p>
<h3 id="인증-및-액세스-토큰-가져오기">인증 및 액세스 토큰 가져오기</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>curl -X POST <span style="color:#e6db74">&#34;https://api.groupdocs.cloud/v2.0/auth/token&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -H <span style="color:#e6db74">&#34;Content-Type: application/json&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -d <span style="color:#e6db74">&#39;{
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           &#34;client_id&#34;: &#34;YOUR_CLIENT_ID&#34;,
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           &#34;client_secret&#34;: &#34;YOUR_CLIENT_SECRET&#34;
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">         }&#39;</span>
</span></span></code></pre></div><p>응답에는 이후 호출에서 사용할 <code>access_token</code>이 포함되어 있습니다.</p>
<h3 id="소스-svg-파일-업로드">소스 SVG 파일 업로드</h3>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>curl -X POST <span style="color:#e6db74">&#34;https://api.groupdocs.cloud/v2.0/storage/upload?path=input/sample.svg&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -H <span style="color:#e6db74">&#34;Authorization: Bearer YOUR_ACCESS_TOKEN&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -F <span style="color:#e6db74">&#34;file=@/path/to/local/sample.svg&#34;</span>
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
<h3 id="svg를-png로-변환-실행">SVG를 PNG로 변환 실행</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>curl -X POST <span style="color:#e6db74">&#34;https://api.groupdocs.cloud/v2.0/conversion/convert&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -H <span style="color:#e6db74">&#34;Authorization: Bearer YOUR_ACCESS_TOKEN&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -H <span style="color:#e6db74">&#34;Content-Type: application/json&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -d <span style="color:#e6db74">&#39;{
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           &#34;filePath&#34;: &#34;input/sample.svg&#34;,
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           &#34;format&#34;: &#34;png&#34;,
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           &#34;outputPath&#34;: &#34;output/sample.png&#34;,
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           &#34;options&#34;: {
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">               &#34;width&#34;: 1024,
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">               &#34;height&#34;: 768,
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">               &#34;backgroundColor&#34;: &#34;#FFFFFF&#34;
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">           }
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">         }&#39;</span>
</span></span></code></pre></div><p>API는 클라우드 스토리지에 새로 생성된 PNG 파일의 경로를 반환합니다.</p>
<h3 id="결과-png-파일-다운로드">결과 PNG 파일 다운로드</h3>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>curl -X GET <span style="color:#e6db74">&#34;https://api.groupdocs.cloud/v2.0/storage/download?path=output/sample.png&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -H <span style="color:#e6db74">&#34;Authorization: Bearer YOUR_ACCESS_TOKEN&#34;</span> <span style="color:#ae81ff">\
</span></span></span><span style="display:flex;"><span><span style="color:#ae81ff"></span>     -o sample.png
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
<p>이 cURL 명령을 사용하면 코드를 작성하지 않고도 변환 프로세스를 완전히 제어할 수 있습니다. 자세한 내용은 <a href="https://docs.groupdocs.cloud/conversion/">공식 API 문서</a>를 참조하세요.</p>
<h2 id="nodejs에서-svg를-png로-변환하는-방법">Node.JS에서 SVG를 PNG로 변환하는 방법</h2>
<ol>
<li><strong>SDK 클래스 가져오기</strong> - <code>require(&quot;@groupdocs/conversion-cloud&quot;)</code> 문은 <code>ConvertApi</code>, <code>ConvertSettings</code>, <code>PngOptions</code>와 같은 필수 클래스를 로드합니다 (<a href="https://reference.groupdocs.cloud/conversion/">API 참조</a>).</li>
</ol>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">ConvertApi</span>, <span style="color:#a6e22e">ConvertSettings</span>, <span style="color:#a6e22e">PngOptions</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;@groupdocs/conversion-cloud&#34;</span>);
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
<ol start="2">
<li>
<p><strong>인증 구성</strong> - <code>Configuration</code> 객체는 <code>clientId</code>와 <code>clientSecret</code>을 보유합니다. 이 객체는 <code>ConvertApi</code>와 <code>StorageApi</code> 모두에 전달되어 이후 모든 호출을 인증합니다.</p>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Configuration</span>({ <span style="color:#a6e22e">clientId</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;YOUR_CLIENT_ID&#34;</span>, <span style="color:#a6e22e">clientSecret</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;YOUR_CLIENT_SECRET&#34;</span> });
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
</li>
<li>
<p><strong>입력 및 출력 경로 정의</strong> - <code>inputSvgPath</code>는 클라우드 스토리지에 있는 SVG를 가리키고, <code>outputPngPath</code>는 PNG를 저장할 위치를 지정합니다.</p>
</li>
</ol>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">inputSvgPath</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;input/sample.svg&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">outputPngPath</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;output/sample.png&#34;</span>;
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
<ol start="4">
<li>
<p><strong>PNG 옵션 설정</strong> - <code>PngOptions</code>를 사용하면 크기와 배경색을 제어할 수 있으며, 이는 큰 SVG 또는 투명 SVG에 유용합니다.</p>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pngOptions</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PngOptions</span>({ <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1024</span>, <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">768</span>, <span style="color:#a6e22e">backgroundColor</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;#FFFFFF&#34;</span> });
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
</li>
<li>
<p><strong>변환 설정 생성 및 실행</strong> - <code>ConvertSettings</code>는 파일 경로, 대상 형식, 출력 위치 및 옵션을 묶습니다. <code>convertDocument</code> 메서드는 변환을 수행하며, 결과에는 PNG의 클라우드 경로가 포함됩니다.</p>
<!--[CODE_SNIPPET_START]-->
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">convertSettings</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">ConvertSettings</span>({ <span style="color:#a6e22e">filePath</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">inputSvgPath</span>, <span style="color:#a6e22e">format</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;png&#34;</span>, <span style="color:#a6e22e">outputPath</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">outputPngPath</span>, <span style="color:#a6e22e">options</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">pngOptions</span> });
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">convertRequest</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">ConvertDocumentRequest</span>(<span style="color:#a6e22e">convertSettings</span>);
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">convertApi</span>.<span style="color:#a6e22e">convertDocument</span>(<span style="color:#a6e22e">convertRequest</span>);
</span></span></code></pre></div><!--[CODE_SNIPPET_END]-->
</li>
<li>
<p><strong>PNG 다운로드</strong> - 변환 후, <code>StorageApi.downloadFile</code>은 바이너리 데이터를 가져오며, 이를 로컬 파일 시스템에 쓸 수 있습니다.</p>
</li>
</ol>
<p>각 단계를 이해하면 프로세스를 맞춤화하고, 오류를 처리하며, 변환을 더 큰 워크플로에 통합할 수 있습니다.</p>
<h2 id="설치-및-구성-groupdocsconversion-cloud-sdk-for-nodejs">설치 및 구성 GroupDocs.Conversion Cloud SDK for Node.JS</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install groupdocs-conversion-cloud
</span></span></code></pre></div><p>SDK는 Node.js 12 이상이 필요합니다. 설치 후, <strong>clientId</strong>와 <strong>clientSecret</strong>를 포함하는 구성 객체를 생성하십시오(귀하의 GroupDocs Cloud 계정에서 확인할 수 있습니다). 최신 패키지 버전은 <a href="https://releases.groupdocs.cloud/conversion/nodejs/">다운로드 페이지</a>를 참조하십시오.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">Configuration</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;@groupdocs/conversion-cloud&#34;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Configuration</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">clientId</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;YOUR_CLIENT_ID&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">clientSecret</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;YOUR_CLIENT_SECRET&#34;</span>
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></div><p>자격 증명이 스토리지 및 변환 서비스에 접근할 수 있는 권한이 있는지 확인하십시오. 구성 후에는 코드 예제와 같이 <code>ConvertApi</code> 및 <code>StorageApi</code>를 인스턴스화할 수 있습니다.</p>
<h2 id="png-변환-설정-미세-조정">PNG 변환 설정 미세 조정</h2>
<p><code>PngOptions</code> 클래스는 조정할 수 있는 여러 속성을 제공합니다:</p>
<ul>
<li><strong>width / height</strong> - 출력 해상도를 정의합니다. 값이 클수록 품질이 향상되지만 메모리 사용량이 증가합니다.
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pngOptions</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PngOptions</span>({ <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1920</span>, <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1080</span> });
</span></span></code></pre></div></li>
<li><strong>backgroundColor</strong> - 투명성을 포함하는 SVG에 대한 단색 배경을 설정합니다.
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pngOptions</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PngOptions</span>({ <span style="color:#a6e22e">backgroundColor</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;#000000&#34;</span> });
</span></span></code></pre></div></li>
<li><strong>compressionLevel</strong> - (지원되는 경우) 파일 크기를 줄이기 위해 0(압축 없음)에서 9(최대 압축) 사이의 압축 레벨을 선택합니다.
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pngOptions</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PngOptions</span>({ <span style="color:#a6e22e">compressionLevel</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">6</span> });
</span></span></code></pre></div></li>
</ul>
<p>이 옵션은 <code>ConvertSettings</code>의 <code>options</code> 속성을 통해 전달됩니다. 전체 사용 가능한 설정 목록은 <a href="https://reference.groupdocs.cloud/conversion/">API 참조</a>를 참조하세요.</p>
<h2 id="효율적인-svg를-png로-변환하기-위한-모범-사례">효율적인 SVG를 PNG로 변환하기 위한 모범 사례</h2>
<ul>
<li><strong>Validate SVG Content</strong> - 업로드하기 전에 SVG에 외부 스크립트나 악성 페이로드가 포함되어 있지 않은지 확인하십시오. GroupDocs.Conversion은 입력을 정화하지만, 사전 검증을 통해 추가 보안 계층을 제공합니다.</li>
<li><strong>Reuse the Configuration Object</strong> - 단일 <code>Configuration</code> 인스턴스를 생성하고 여러 <code>ConvertApi</code> 호출에 공유하여 오버헤드를 줄이십시오.</li>
<li><strong>Set Reasonable Dimensions</strong> - 실제로 필요한 크기로 너비와 높이를 제한하십시오. 과도하게 큰 이미지가 처리 시간과 메모리 사용량을 증가시킵니다.</li>
<li><strong>Stream Large Files</strong> - 매우 큰 SVG의 경우 전체 버퍼를 메모리에 로드하는 대신 다운로드를 스트리밍하는 방식을 고려하십시오.</li>
<li><strong>Monitor API Usage</strong> - 변환 할당량을 주시하고 속도 제한 응답을 적절히 처리하십시오.</li>
</ul>
<h2 id="결론">결론</h2>
<p><a href="https://products.groupdocs.cloud/conversion/nodejs/">GroupDocs.Conversion Cloud SDK for Node.JS</a>은 서버‑사이드 SVG를 PNG로 변환하는 작업을 간단하고, 확장 가능하며, 안전하게 만들어 줍니다. 전체 코드 예제, 동등한 cURL 워크플로우 및 위의 구성 팁을 따라 하면 백엔드 서비스에 고성능 이미지 변환을 통합할 수 있습니다. 라이선스 옵션을 검토하는 것을 기억하세요. 프로덕션 배포에는 유료 구독이 필요하며, 테스트를 위해 <a href="https://purchase.groupdocs.cloud/temporary-license/">임시 라이선스 페이지</a>에서 임시 라이선스를 얻을 수 있습니다. 오늘 바로 변환을 시작하고 사용자에게 선명한 PNG 자산을 자신 있게 제공하세요.</p>
<h2 id="faqs">FAQs</h2>
<p><strong>Node.JS에서 GroupDocs를 사용하여 SVG를 PNG로 변환하려면 어떻게 해야 하나요?</strong><br>
GroupDocs.Conversion Cloud SDK for Node.JS를 사용합니다. SVG를 클라우드 스토리지에 업로드하고, <code>PngOptions</code>를 구성한 뒤 <code>convertDocument</code>를 호출하여 PNG를 다운로드합니다. 이 문서의 전체 코드 예제는 각 단계를 보여줍니다.</p>
<p><strong>한 번에 여러 SVG 파일을 배치 변환할 수 있나요?</strong><br>
예. SVG 경로 목록을 반복하면서 각 파일에 대해 동일한 변환 요청을 호출합니다. SDK는 각 요청을 독립적으로 처리하므로 모든 PNG 결과를 단일 출력 폴더에 저장할 수 있습니다.</p>
<p><strong>변환이 오류와 함께 실패하면 어떻게 해야 하나요?</strong><br>
catch 블록에서 반환된 오류 메시지를 확인하십시오. 일반적인 문제로는 잘못된 자격 증명, 누락된 파일 경로, 지원되지 않는 SVG 기능 등이 있습니다. 자세한 오류 코드 및 문제 해결 단계는 <a href="https://docs.groupdocs.cloud/conversion/">공식 문서</a>를 참조하십시오.</p>
<p><strong>PNG 옵션에 대한 자세한 정보를 어디서 찾을 수 있나요?</strong><br>
모든 구성 가능한 속성은 <code>PngOptions</code>에 대한 API 참조에 나열되어 있습니다. 압축 수준 및 색 깊이와 같은 추가 설정을 살펴보려면 <a href="https://reference.groupdocs.cloud/conversion/">API 참조</a>를 방문하십시오.</p>
<h2 id="더-읽기">더 읽기</h2>
<ul>
<li><a href="https://blog.groupdocs.cloud/ko/conversion/step-by-step-html-to-docx-conversion-tutorial-in-nodejs/">Node.JS에서 단계별 HTML에서 DOCX 변환 튜토리얼</a></li>
<li><a href="https://blog.groupdocs.cloud/ko/conversion/step-by-step-csv-to-pdf-conversion-example-in-nodejs/">Node.JS에서 단계별 CSV에서 PDF 변환 예제</a></li>
<li><a href="https://blog.groupdocs.cloud/ko/conversion/pdf-to-docx-conversion-in-nodejs/">Node.JS에서 PDF를 DOCX로 변환</a></li>
</ul>
]]></content:encoded>
    </item>
    
  </channel>
</rss>
