C#에서 SVG 편집

C#을 사용하여 프로그래밍 방식으로 SVG를 편집하는 방법을 알아보세요.

C#에서 SVG를 편집하는 방법

Aspose.SVG for .NET 라이브러리는 SVG 파일을 생성, 편집, 변환 및 기타 조작을 위한 클래스 및 메서드 집합을 제공합니다. 문서 객체가 생성되면 SVG 요소로 채울 수 있습니다. SVG 도형, 텍스트, 필터 등과 같은 요소를 추가하여 문서를 사용자 지정할 수 있습니다. 이 문서에서는 Aspose.SVG 빌더 API 를 사용하는 방법과 직접 요소 및 속성을 설정하여 수동으로 DOM을 조작하는 방법 등 SVG를 작성하고 편집하는 다양한 접근 방식을 보여주는 두 가지 C# 예시를 살펴보겠습니다.

먼저 프로젝트에 Aspose.SVG for .NET API가 설치되어 있는지 확인합니다. 설치 과정은 매우 간단합니다. 다음 명령을 사용하여 NuGet 패키지 관리자 콘솔을 통해 설치할 수 있습니다:

Aspose.SVG for .NET 설치

Install-Package Aspose.SVG

엘리먼트 빌더를 사용하여 SVG 파일에 엘리먼트 추가하기

엘리먼트 빌더는 코드에서 SVG 엘리먼트를 쉽게 생성하고 수정할 수 있도록 해주는 Aspose.SVG 빌더 API의 특수 클래스입니다. 이 클래스는 종종 유창한 빌더 패턴과 같은 패턴을 사용하여 속성을 설정하고 SVG 콘텐츠를 프로그래밍 방식으로 구조화하기 위한 깔끔하고 읽기 쉬운 구문을 제공합니다. 다음 코드는 C#을 사용하여 처음부터 간결하고 우아한 방식으로 SVG를 제작하는 방법을 보여줍니다. 이 예제에서는 SVGSVGElementBuilder 내의 유창한 빌더 패턴을 사용하여 장식된 원과 텍스트라는 새로운 요소를 SVG에 구성하고 추가합니다.

엘리먼트 빌더를 사용하여 SVG를 편집하는 C# 코드

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

SVG 파일에 요소 추가하기

DOM(문서 객체 모델) API는 SVG 노드와 그 속성에 대한 완전한 제어 기능을 제공하며 공식 SVG 사양을 완벽하게 준수합니다. 새 노드를 추가하거나 기존 노드를 제거하거나 콘텐츠를 편집하여 문서를 수정할 수 있습니다. 예를 들어, SVG에 장식된 원과 텍스트를 추가하는 방법은 다음과 같습니다:

저수준 DOM 조작을 사용하여 SVG를 편집하는 C# 코드

using System.IO;
using Aspose.Html;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a text element and set its attributes
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "2.0em";
        textElement.SetAttribute("x", "270px");
        textElement.SetAttribute("fill", "darkred");
        textElement.SetAttribute("y", "140px");
        textElement.TextContent = "I can add elements to SVG!";

        // Create a circle element and set its attributes
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 130;
        circleElement.Cy.BaseVal.Value = 130;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "salmon");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");

        // Add the text and circle elements into svgElement
        svgElement.AppendChild(textElement);
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

위의 С# 코드를 설명하는 SVG 문서를 편집하는 간단한 단계를 살펴보겠습니다. 생성된 SVG 문서에 SVG <circle> 및 <text> 요소가 추가됩니다.

처음부터 프로그래밍 방식으로 SVG 문서를 생성하려면 매개 변수 없이 SVGDocument() 생성자를 사용합니다.
SVGDocument 클래스의 RootElement 속성은 문서의 루트 <svg> 요소를 가리킵니다.
속성이 포함된 <text> 및 <circle> 요소를 생성하고 이를 <svg> 요소에 추가합니다.
- CreateElementNS() 메서드를 사용하여 SVGTextElement 및 SVGCircleElement 클래스의 인스턴스를 생성할 수 있습니다.
- SetAttribute() 메서드를 호출하여 위치, 크기, 채우기 등을 지정하는 속성을 설정합니다.
- AppendChild() 메서드를 사용하여 <svg>에 요소를 추가합니다.
Save() 메소드를 사용하여 편집된 SVG 파일을 저장합니다.

위에서 만든 결과 파일은 두 코드 예제(svg-from-scratch.svg)에서 모두 동일하며 다음과 같이 보입니다:

텍스트 “원과 텍스트가 있는 SVG 이미지”

유용한 리소스

Edit SVG File – C# Examples 문서는 Aspose.SVG for .NET API를 사용하여 문서 객체 모델(DOM)을 읽거나 편집하는 방법에 대한 기본 정보를 제공합니다. SVG 요소를 생성하는 방법과 새 노드를 삽입하거나, 제거하거나, 기존 노드의 내용을 편집하여 문서를 수정하는 방법을 살펴봅니다.
SVG Builder – Advanced SVG Creation and Modification 장에서는 Aspose.SVG Builder API를 사용하여 SVG를 효과적으로 조작하는 방법을 안내하며, 기본 요소 생성부터 믹스인 및 구문 설탕과 같은 고급 기술까지 다룹니다.
Element Builders 문서는 Aspose.SVG Builder API에서 사용되는 요소 빌더에 대해 자세히 설명합니다. SVGElementBuilder 클래스, 해당 전문 빌더, 그리고 이를 통해 SVG 프로그래밍을 간소화하는 방법에 대해 알아봅니다.

기타 지원되는 기능

Aspose.SVG C# 라이브러리를 사용하여 SVG 문서를 변환, 병합, 편집하고 색상 코드를 변환하고 이미지를 벡터화하는 등의 작업을 수행할 수 있습니다!