SVG(확장 가능한 벡터 그래픽)은 웹용 확장 가능한 고품질 이미지를 만드는 데 사용할 수 있는 강력한 이미지 형식입니다. SVG 이미지는 XML 코드를 사용하여 생성되므로 쉽게 생성하고 수정할 수 있습니다. 어떤 경우에는 SVG 내에 PNG 또는 JPG 이미지와 같은 리소스를 포함해야 할 수도 있습니다. 이번 블로그 게시물에서는 C#을 사용하여 내부에 이미지가 포함된 SVG를 만드는 방법을 보여 드리겠습니다.
이 문서에서는 다음 주제를 다룹니다.
이미지가 포함된 SVG를 생성하는 C# API
Aspose.SVG for .NET을 사용하여 이미지가 포함된 SVG를 생성하겠습니다. 이를 통해 개발자는 .NET 애플리케이션에서 SVG 파일로 작업할 수 있습니다. API를 사용하면 소프트웨어 종속성 없이 SVG 파일을 로드, 구문 분석, 렌더링, 생성 및 인기 형식으로 변환할 수 있습니다.
API의 DLL을 다운로드하거나 NuGet을 사용하여 설치하세요.
PM> Install-Package Aspose.SVG
C#을 사용하여 SVG에 PNG 포함
SVG 를 사용하여 SVG 객체 내에 비트맵 이미지를 쉽게 포함할 수 있습니다.<image> 요소. SVG<image> 요소는 JPEG, PNG, 심지어 SVG 그래픽과 같은 다양한 형식의 이미지를 렌더링할 수 있습니다. 의 속성<image> 요소는 비트맵 표시 방법을 정의합니다. 기본 속성은 다음과 같습니다.
- x 및 y: 이미지의 왼쪽 상단 모서리의 좌표를 나타냅니다.
- 너비와 높이: 이미지가 표시될 “창"의 너비와 높이를 결정합니다. 이 두 속성은 모두 필수입니다.
- href 및 xlink:href: 이러한 속성은 이미지 파일의 URL을 가리킵니다.
- PreserveAspectRatio: 이 속성은 이미지 크기가 비례적으로 조정되는 방식을 제어합니다.
아래 단계에 따라 내부에 PNG가 포함된 SVG를 쉽게 만들 수 있습니다.
- SVG 콘텐츠를 문자열로 지정합니다.
- 그런 다음 문자열 콘텐츠에서 SVGDocument 클래스의 인스턴스를 만듭니다.
- 마지막으로 Save() 메서드를 사용하여 이미지를 저장합니다.
다음 코드 샘플은 C#을 사용하여 SVG 내부에 PNG 이미지를 포함하는 방법을 보여줍니다.
// 포함된 PNG 이미지로 SVG 콘텐츠를 지정합니다.
string content = "<svg height=\"500\" width=\"600\" xmlns=\"http://www.w3.org/2000/svg\">\r\n " +
"<circle cx=\"120\" cy=\"100\" r=\"90\" style=\"fill:blue; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7\" />" +
"<image href=\"https://www.aspose.cloud/templates/aspose/App_Themes/V3/images/svg/272x272/aspose_svg-for-net.png\" x=\"70\" y=\"50\" height=\"100\" width=\"100\" />\r\n \t" +
"<text x=\"40\" y=\"250\">Embedded PNG image</text>\r\n \t" +
"</svg>";
// SVGDocument를 사용하여 SVG 문서를 초기화합니다.
SVGDocument document = new SVGDocument(content, ".");
// SVGSaveFormat 열거를 사용하여 문서를 파일에 저장합니다.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
C#을 사용하여 SVG에 PNG를 포함합니다.
C#을 사용하여 SVG 내에 SVG 삽입
마찬가지로 앞서 언급한 단계에 따라 내부에 SVG 이미지가 포함된 SVG를 만들 수 있습니다.
다음 코드 샘플은 C#을 사용하여 SVG 내부에 SVG 이미지를 포함하는 방법을 보여줍니다.
// 포함된 PNG 이미지로 SVG 콘텐츠를 지정합니다.
string documentContent = "<svg height=\"500\" width=\"500\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t" +
"<image href=\"https://docs.aspose.com/svg/net/navigation-inspection/shapes.svg\" x=\"250\" y=\"10\" height=\"350\" width=\"350\" />\r\n \t" +
"<text x=\"300\" y=\"250\">Embedded SVG image</text> \r\n" +
"</svg>";
// SVGDocument를 사용하여 SVG 문서를 초기화합니다.
SVGDocument document = new SVGDocument(documentContent, ".");
// SVGSaveFormat 열거를 사용하여 문서를 파일에 저장합니다.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
C#을 사용하여 SVG 안에 SVG를 삽입합니다.
무료 라이센스 받기
무료 임시 라이선스를 받아 평가 제한 없이 .NET용 Aspose.SVG를 사용해 볼 수 있습니다.
내부에 이미지가 포함된 SVG - 무료 리소스
아래 리소스를 사용하여 라이브러리의 다양한 기능에 대해 자세히 알아볼 수 있습니다.
결론
결론적으로 C#을 사용하여 이미지가 포함된 SVG 이미지를 만드는 것은 비교적 간단한 프로세스입니다. 이 튜토리얼의 단계를 따르면 웹사이트나 애플리케이션에서 사용할 수 있는 사용자 정의 SVG 이미지를 만들 수 있습니다. 강력하고 다재다능한 SVG 라이브러리인 Aspose.SVG for .NET을 활용하면 모든 장치에서 사용할 수 있는 이미지가 포함된 SVG 이미지를 쉽게 생성할 수 있습니다. 모호한 점이 있으면 언제든지 무료 지원 포럼에 문의해 주세요.