Scalable Vector Graphics (SVG) เป็นรูปแบบภาพที่มีประสิทธิภาพซึ่งใช้เพื่อสร้างภาพคุณภาพสูงและปรับขนาดได้สำหรับเว็บ รูปภาพ SVG สร้างขึ้นโดยใช้โค้ด XML ซึ่งทำให้สร้างและแก้ไขได้ง่าย ในบางกรณี เราอาจต้องฝังทรัพยากร เช่น ภาพ PNG หรือ JPG ไว้ภายใน SVG ในบล็อกโพสต์นี้ เราจะแสดงวิธีสร้าง SVG โดยมีรูปภาพอยู่ข้างในโดยใช้ C#
บทความนี้ครอบคลุมหัวข้อต่อไปนี้:
C# API เพื่อสร้าง SVG พร้อมรูปภาพภายใน
เราจะใช้ Aspose.SVG for .NET เพื่อสร้าง SVG โดยมีรูปภาพอยู่ข้างใน ช่วยให้นักพัฒนาสามารถทำงานกับไฟล์ SVG ในแอปพลิเคชัน .NET API ช่วยให้โหลด แยกวิเคราะห์ เรนเดอร์ สร้าง และแปลงไฟล์ SVG เป็น รูปแบบยอดนิยม โดยไม่ต้องพึ่งพาซอฟต์แวร์
โปรด ดาวน์โหลด DLL ของ API หรือติดตั้งโดยใช้ NuGet
PM> Install-Package Aspose.SVG
ฝัง PNG ใน SVG โดยใช้ C#
เราสามารถฝังภาพบิตแมปภายในวัตถุ SVG ได้อย่างง่ายดายโดยใช้ SVG <image> องค์ประกอบ SVG <image> องค์ประกอบสามารถแสดงภาพในรูปแบบต่างๆ เช่น JPEG, PNG และแม้แต่กราฟิก SVG คุณสมบัติของ <image> องค์ประกอบกำหนดวิธีการแสดงบิตแมป คุณสมบัติหลัก ได้แก่ :
- x และ y: สิ่งเหล่านี้แสดงถึงพิกัดของมุมซ้ายบนของรูปภาพ
- ความกว้างและความสูง: กำหนดความกว้างและความสูงของ “หน้าต่าง” ที่จะแสดงรูปภาพ คุณลักษณะทั้งสองนี้เป็นข้อบังคับ
- href และ xlink:href: คุณลักษณะเหล่านี้ชี้ไปที่ URL ของไฟล์รูปภาพ
- รักษา AspectRatio: คุณลักษณะนี้ควบคุมวิธีการปรับขนาดภาพตามสัดส่วน
เราสามารถสร้าง SVG ที่มี PNG อยู่ข้างในได้อย่างง่ายดายโดยทำตามขั้นตอนด้านล่าง:
- ระบุเนื้อหา SVG เป็นสตริง
- หลังจากนั้น ให้สร้างอินสแตนซ์ของคลาส SVGDocument จากเนื้อหาสตริง
- สุดท้าย ให้บันทึกภาพโดยใช้เมธอด Save()
ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการฝังรูปภาพ PNG ภายใน SVG โดยใช้ C#
// ระบุเนื้อหา SVG ด้วยรูปภาพ PNG ที่ฝังไว้
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>";
// เริ่มต้นเอกสาร SVG โดยใช้ SVGDocument
SVGDocument document = new SVGDocument(content, ".");
// บันทึกเอกสารลงในไฟล์ด้วยการแจงนับ SVGSaveFormat
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
ฝัง PNG ใน SVG โดยใช้ C#
ฝัง SVG ภายใน SVG โดยใช้ C#
ในทำนองเดียวกัน เราสามารถสร้าง SVG โดยมีรูปภาพ SVG อยู่ข้างในได้โดยทำตามขั้นตอนที่กล่าวไว้ข้างต้น
ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการฝังรูปภาพ SVG ภายใน SVG โดยใช้ C#
// ระบุเนื้อหา SVG ด้วยรูปภาพ 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>";
// เริ่มต้นเอกสาร SVG โดยใช้ SVGDocument
SVGDocument document = new SVGDocument(documentContent, ".");
// บันทึกเอกสารลงในไฟล์ด้วยการแจงนับ SVGSaveFormat
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
ฝัง SVG ไว้ใน SVG โดยใช้ C#
รับใบอนุญาตฟรี
คุณสามารถ [รับใบอนุญาตชั่วคราวฟรี] เพื่อทดลองใช้ Aspose.SVG for .NET โดยไม่มีข้อจำกัดในการประเมิน
SVG พร้อมรูปภาพภายใน – แหล่งข้อมูลฟรี
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติต่างๆ ของห้องสมุดได้โดยใช้แหล่งข้อมูลด้านล่าง:
บทสรุป
โดยสรุป การสร้างภาพ SVG ด้วยภาพที่ฝังไว้โดยใช้ C# นั้นเป็นกระบวนการที่ค่อนข้างง่าย ด้วยการทำตามขั้นตอนในบทช่วยสอนนี้ คุณสามารถสร้างรูปภาพ SVG แบบกำหนดเองของคุณเองซึ่งสามารถใช้บนเว็บไซต์หรือในแอปพลิเคชันของคุณได้ ด้วยการใช้ประโยชน์จาก Aspose.SVG for .NET ซึ่งเป็นไลบรารี SVG ที่ทรงพลังและอเนกประสงค์ คุณสามารถสร้างรูปภาพ SVG พร้อมรูปภาพแบบฝังที่สามารถใช้กับอุปกรณ์ใดก็ได้ ในกรณีที่มีความคลุมเครือ โปรดติดต่อเราที่ ฟอรัมการสนับสนุนฟรี