SVG 이미지는 검색, 인덱싱, 압축 및 스크립팅이 가능한 웹 친화적인 벡터 이미지입니다. 반면 그림자는 이미지를 미학적으로 매력적이고 눈에 띄게 만드는 데 사용되는 일반적인 디자인 기능입니다. 아이콘이나 텍스트 등과 같은 SVG 이미지에 그림자 효과를 추가해야 하는 경우가 있습니다. 따라서 이 문서에서는 C#에서 프로그래밍 방식으로 SVG 이미지에 그림자 효과를 만드는 방법을 설명합니다.
SVG 이미지의 그림자 효과 – C# API 무료 다운로드
Aspose.SVG for .NET는 C#에서 프로그래밍 방식으로 Scalable Vector Graphics를 편집, 업데이트 또는 변환하는 많은 기능을 제공하므로 SVG 이미지 작업을 지원합니다. New Releases 페이지에서 참조 DLL 파일에 액세스하거나 아래의 NuGet 명령을 실행하여 모든 종속성과 함께 NuGet 갤러리에서 구성합니다(있는 경우).
PM> Install-Package Aspose.SVG
C#에서 SVG 이미지에 그림자 효과를 만드는 방법
다음 단계에서는 SVG 이미지에 그림자 효과를 추가하는 전체 프로세스를 간략하게 설명합니다.
- SVGDocument 클래스의 개체를 만듭니다.
- SVG 네임스페이스 URL을 설정하고 루트 SVG 요소를 가져옵니다.
- feOffset 필터 프리미티브를 추가하기 위해 defs 요소와 filterElement를 생성합니다.
- feBlend 필터와 텍스트 요소를 만듭니다.
- Save 메서드를 호출하여 그림자 효과를 사용하여 출력 SVG 이미지를 저장합니다.
C#에서 프로그래밍 방식으로 SVG 이미지에 그림자 효과 만들기
C#에서 프로그래밍 방식으로 SVG 이미지에 그림자 효과를 만들려면 아래 단계를 따르십시오.
- SVGDocument 클래스의 개체를 만듭니다.
- SVG 네임스페이스 URL을 설정하고 루트 SVG 요소를 가져옵니다.
- feOffset 필터 프리미티브를 추가하기 위해 defs 요소와 filterElement를 생성합니다.
- feBlend 필터와 텍스트 요소를 만듭니다.
- Save 메서드를 호출하여 그림자 효과로 출력 SVG 이미지를 저장합니다.
아래 코드 조각은 C#에서 SVG 이미지에 그림자 효과를 만드는 방법을 보여줍니다.
// SVGDocument 클래스의 객체 초기화
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();
// SVG 네임스페이스 URL 설정
string SvgNamespace = "http://www.w3.org/2000/svg";
// 문서의 루트 svg 요소 가져오기
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;
// defs 요소를 만들고 svgElement에 추가
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);
// 필터 요소를 만들고 defsElement에 추가
var filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
filterElement.Id = "shadow";
filterElement.SetAttribute("x", "-20px");
filterElement.SetAttribute("y", "-20px");
filterElement.SetAttribute("height", "150px");
filterElement.SetAttribute("width", "150px");
defsElement.AppendChild(filterElement);
// feOffset 필터 프리미티브를 생성하고 filterElement에 추가
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);
//// feGaussianBlur 필터 프리미티브를 생성하고 filterElement에 추가
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "오프셋";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("결과", "흐림 효과");
//filterElement.AppendChild(feGaussianBlurElement);
// feBlend 필터 프리미티브를 생성하고 filterElement에 추가
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);
// 텍스트 요소를 만들고 svgElement에 추가
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);
// SVG 문서 저장
document.Save(Path.Combine(dataDir, "DropShadow.svg"));
위의 코드 조각에서 몇 줄의 코드가 주석 처리되어 있음을 유의하십시오. 더 부드러운 그림자로 출력을 돋보이게 하는 흐린 그림자 효과를 선호하는 경우 주석을 제거하여 그림자에 가우시안 흐림 효과를 적용할 수 있습니다.
무료 임시 라이센스 받기
API를 전체 용량으로 테스트하려면 무료 임시 라이선스를 요청할 수 있습니다.
결론
이 기사에서는 C#에서 프로그래밍 방식으로 SVG 이미지에 그림자 효과를 만드는 방법을 배웠습니다. 기존 SVG 이미지를 로드하여 처리하거나 요구 사항에 따라 처음부터 새 SVG 이미지를 생성할 수 있습니다. 또한 문서 섹션을 방문하여 API의 다른 많은 기능을 배울 수 있습니다. 질문이나 우려 사항에 대해 논의해야 하는 경우 주저하지 말고 포럼을 통해 연락해 주십시오.