C#에서 텍스트를 SVG로 변환

SVG Text 요소는 SVG에서 텍스트를 정의하는 데 사용됩니다. SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 형식입니다. 웹 페이지에 시각적 정보를 표시하는 데 사용됩니다. SVG Text 요소를 사용하여 SVG의 모든 텍스트를 쉽게 작성할 수 있습니다. 이 기사에서는 C#에서 텍스트를 SVG로 변환하는 방법을 배웁니다.

이 기사에서는 다음 주제를 다룹니다.

텍스트를 SVG로 변환하는 C# API
SVG 텍스트란?
텍스트를 SVG로 변환
TSpan을 사용하여 텍스트를 SVG로 변환
TextPath가 있는 SVG 텍스트
SVG 텍스트 스타일 적용

텍스트를 SVG로 변환하는 C# API

텍스트를 SVG로 변환하기 위해 Aspose.SVG for .NET API를 사용할 것입니다. 소프트웨어 종속성 없이 SVG 파일을 로드, 구문 분석, 렌더링, 생성 및 인기 형식으로 변환할 수 있습니다.

API의 SVGDocument 클래스는 SVG 계층 구조의 루트를 나타내며 전체 콘텐츠를 보유합니다. 이 클래스에는 SVG를 지정된 파일 경로에 저장할 수 있는 Save() 메서드가 있습니다. SVGTextElement 클래스는 ‘텍스트’ 요소를 나타냅니다. SVGTSpanElement 인터페이스는 ’tspan’ 요소에 해당합니다. API는 ’textPath’ 요소를 나타내는 SVGTextPathElement 클래스와 ‘path’ 요소에 대해 SVGPathElement를 제공합니다. SetAttribute(string, string) 메서드를 사용하여 SVG 요소에 대한 다양한 속성/속성을 설정할 수 있습니다. API의 AppendChild(Node) 메서드는 이 node의 자식 목록 끝에 노드의 새 자식을 추가합니다.

API의 DLL 다운로드 또는 NuGet을 사용하여 설치하십시오.

PM> Install-Package Aspose.SVG

SVG 텍스트란 무엇입니까?

SVG에서 텍스트는 요소를 사용하여 렌더링됩니다. 기본적으로 텍스트는 윤곽선 없이 검은색 채우기로 렌더링됩니다. 다음 속성을 정의할 수 있습니다.

x: 점의 위치를 수평으로 설정합니다.
y: 수직으로 점의 위치를 설정합니다.
채우기: 렌더링된 텍스트 색상을 정의합니다.
변형: 회전, 번역, 기울이기 및 크기 조정.

C#을 사용하여 텍스트를 SVG로 변환

아래 단계에 따라 SVG에 텍스트를 추가할 수 있습니다.

먼저 SVGDocument 클래스의 인스턴스를 만듭니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 SVGTextElement 클래스 개체를 만듭니다.
그런 다음 SetAttribute() 메서드를 사용하여 다양한 속성을 설정합니다.
그런 다음 AppendChild() 메서드를 호출하여 루트 요소에 추가합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 텍스트를 SVG로 변환하는 방법을 보여줍니다.

// 이 코드 예제는 SVG에 텍스트를 추가하는 방법을 보여줍니다.
var document = new SVGDocument();

// 문서의 루트 svg 요소 가져오기
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG 텍스트 요소 정의
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// 표시할 텍스트 정의
text.TextContent = "The is a simple SVG text!";

// 다양한 속성 설정
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// 루트에 텍스트 추가
svgElement.AppendChild(text);

// SVG로 저장
document.Save(@"C:\Files\simple-text.svg");

CSharp를 사용하여 텍스트를 SVG로 변환 — C#을 사용하여 텍스트를 SVG로 변환합니다.

simple-text.svg 이미지의 내용은 아래를 참조하십시오.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

TSpan이 있는 텍스트를 C#에서 SVG로 변환

SVG 요소는 요소 내의 하위 텍스트를 정의합니다. 아래 단계에 따라 SVG에 tspan 요소가 있는 텍스트를 추가할 수 있습니다.

먼저 SVGDocument 클래스의 인스턴스를 만듭니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 SVGTextElement 클래스 개체를 만듭니다.
선택적으로 SetAttribute() 메서드를 사용하여 다양한 속성을 설정합니다.
다음으로 SVGTSpanElement 개체를 정의합니다.
그런 다음 SetAttribute() 메서드를 사용하여 속성을 설정합니다.
이제 AppendChild() 메서드를 호출하여 SVGTextElement 요소에 추가합니다.
SVGTSpanElement 개체를 더 추가하려면 위의 단계를 반복합니다.
그런 다음 AppendChild() 메서드를 호출하여 루트 요소에 SVGTextElement를 추가합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 tspan이 있는 텍스트를 SVG로 변환하는 방법을 보여줍니다.

// 이 코드 예제는 SVG에 tspan이 있는 텍스트를 추가하는 방법을 보여줍니다.
var document = new SVGDocument();

// 문서의 루트 svg 요소 가져오기
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG 텍스트 요소
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// SVG TSpan 요소
var tspan1 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan1.TextContent = "ASPOSE";
tspan1.SetAttribute("style", "font-weight:bold; font-size:55px");
tspan1.SetAttribute("x", "20");
tspan1.SetAttribute("y", "60");

// SVG 텍스트에 추가
text.AppendChild(tspan1);

// 다른 TSpan 요소
var tspan2 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan2.TextContent = "Your File Format APIs";
tspan2.SetAttribute("style", "font-size:20px; fill:grey");
tspan2.SetAttribute("x", "37");
tspan2.SetAttribute("y", "90");

// SVG 텍스트에 추가
text.AppendChild(tspan2);

// 루트에 SVG 텍스트 추가
svgElement.AppendChild(text);

// SVG 저장
document.Save(@"C:\Files\svg-tSpan.svg");

SVG-Text-with-tspan-in-CSharp — C#에서 tspan이 있는 텍스트를 SVG로 변환합니다.

svg-tspan.svg 이미지의 내용은 아래에서 찾으십시오.

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

C#에서 TextPath가 있는 SVG 텍스트

요소의 모양을 따라 텍스트를 렌더링하고 요소에 텍스트를 묶을 수도 있습니다. href 속성을 사용하여 요소에 대한 참조를 설정할 수 있습니다. 아래 단계에 따라 텍스트 경로가 있는 텍스트를 변환할 수 있습니다.

먼저 SVGDocument 클래스의 인스턴스를 만듭니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 SVGPathElement 클래스 개체를 만들고 SetAttribute() 메서드를 사용하여 다양한 속성을 설정합니다.
그런 다음 AppendChild() 메서드를 호출하여 루트 요소에 추가합니다.
다음으로 SVGTextElement 클래스 개체를 만듭니다.
그런 다음 SVGTextPathElement 개체를 초기화하고 텍스트 내용을 설정합니다.
그런 다음 SetAttribute() 메서드를 사용하여 SVGPathElement를 href 속성에 할당합니다.
그런 다음 AppendChild() 메서드를 호출하여 SVGTextPathElement를 SVGTextElement 요소에 추가합니다.
그런 다음 AppendChild() 메서드를 사용하여 루트 요소에 SVGTextElement를 추가합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 textPath가 있는 텍스트를 SVG로 변환하는 방법을 보여줍니다.

// 이 코드 예제는 SVG에 textPath가 있는 텍스트를 추가하는 방법을 보여줍니다.
var document = new SVGDocument();

// 문서의 루트 svg 요소 가져오기
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG 경로 요소
var path1 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path1.SetAttribute("id", "path_1");
path1.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100");
path1.SetAttribute("fill", "transparent");

// 루트 요소에 SVG 경로 추가
svgElement.AppendChild(path1);

// Another SVG 경로 요소
var path2 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path2.SetAttribute("id", "path_2");
path2.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100");
path2.SetAttribute("transform", "translate(0,75)");
path2.SetAttribute("fill", "transparent");

// 루트 요소에 SVG 경로 추가
svgElement.AppendChild(path2);

// SVG 텍스트 요소
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// SVG 텍스트 경로 요소 만들기
var textPath1 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath1.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath1.SetAttribute("href", "#path_1");

// SVG 텍스트에 SVG 텍스트 경로 추가
text.AppendChild(textPath1);

// 다른 SVG 텍스트 경로 요소
var textPath2 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath2.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath2.SetAttribute("href", "#path_2");

// SVG 텍스트에 SVG 텍스트 경로 추가
text.AppendChild(textPath2);

// 루트에 SVG 텍스트 추가
svgElement.AppendChild(text);

// SVG 저장
document.Save(@"C:\Files\svg-textPath.svg");

SVG-Text-with-textPath-in-CSharp — C#에서 textPath가 있는 텍스트를 SVG로 변환합니다.

아래에서 svg-textPath.svg 이미지의 내용을 찾으십시오.

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

C#에서 SVG 텍스트 스타일 적용

아래 단계에 따라 SVG에 텍스트를 추가할 수 있습니다.

먼저 SVGDocument 클래스의 인스턴스를 만듭니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 SVGTextElement 클래스 개체를 만듭니다.
그런 다음 SetAttribute() 메서드를 사용하여 스타일 속성을 설정합니다.
그런 다음 AppendChild() 메서드를 호출하여 루트 요소에 추가합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 SVG 텍스트에 CSS 스타일을 적용하는 방법을 보여줍니다.

// 이 코드 예제는 SVG에 텍스트를 추가하고 CSS 스타일 속성을 적용하는 방법을 보여줍니다.
var document = new SVGDocument();

// 문서의 루트 svg 요소 가져오기
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG 텍스트 요소 정의
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// 표시할 텍스트 정의
text.TextContent = "The is a simple SVG text!";

// 다양한 속성 설정
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// 스타일 적용
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// 루트에 텍스트 추가
svgElement.AppendChild(text);

// SVG로 저장
document.Save(@"C:\Files\text-style.svg");

Apply-SVG-Text-Style-in-CSharp — C#에서 SVG 텍스트 스타일을 적용합니다.

text-style.svg 이미지의 내용은 아래를 참조하십시오.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</svg>

무료 임시 라이센스 받기

평가 제한 없이 Aspose.SVG for .NET을 사용해 볼 수 있는 무료 임시 라이선스 받기입니다.

결론

이 문서에서는 다음 방법을 배웠습니다.

새 SVG 이미지를 만듭니다.
SVG 텍스트 요소를 사용하십시오.
SVG 텍스트를 경로에 렌더링합니다.
SVG 텍스트의 위치 및 채우기 속성 설정;
C#에서 SVG 텍스트의 스타일 속성을 설정합니다.

C#에서 텍스트를 SVG로 변환하는 것 외에도 문서에서 Aspose.SVG for .NET에 대해 자세히 알아보고 API에서 지원하는 다양한 기능을 탐색할 수 있습니다. 모호한 점이 있는 경우 무료 지원 포럼에서 언제든지 문의해 주십시오.

또한보십시오

C#을 사용하여 SVG에서 채우기 및 획

텍스트를 SVG로 변환하는 C# API#

SVG 텍스트란 무엇입니까?#

C#을 사용하여 텍스트를 SVG로 변환#

TSpan이 있는 텍스트를 C#에서 SVG로 변환#

C#에서 TextPath가 있는 SVG 텍스트#

C#에서 SVG 텍스트 스타일 적용#

무료 임시 라이센스 받기#

결론#

또한보십시오#