สร้าง SVG ใน C#

วิธีสร้าง SVG ใน C#

กราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นภาษา XML สำหรับการสร้างกราฟิกเวกเตอร์สองมิติ และเอกสาร SVG คือไฟล์ข้อความที่อธิบายรูปภาพในลักษณะพื้นฐานทางเรขาคณิต เช่น เส้น เส้นโค้ง รูปร่าง ข้อความ ฯลฯ หากคุณพัฒนาเว็บไซต์ ให้สร้างข้อมูล การสร้างภาพข้อมูลหรือการทำงานกับสื่อสิ่งพิมพ์ SVG มอบโซลูชันที่หลากหลายและมีประสิทธิภาพสำหรับการสร้างกราฟิก ไลบรารี Aspose.SVG สำหรับ .NET มีชุดคลาสและวิธีการสำหรับการสร้าง แก้ไข การแปลง และการปรับแต่งอื่นๆ ด้วยไฟล์ SVG เรามาสร้างเอกสาร SVG ใหม่กันดีกว่า!

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Aspose.SVG สำหรับ .NET API ในโปรเจ็กต์ของคุณ กระบวนการติดตั้งค่อนข้างง่าย คุณสามารถติดตั้งผ่านคอนโซล NuGet Package Manager โดยใช้คำสั่งต่อไปนี้:

Install-Package Aspose.SVG

สร้างเอกสาร SVG เปล่า

Aspose.SVG สำหรับ .NET API มีคลาส SVGDocument ที่สามารถใช้ในการสร้างเอกสาร SVG ได้ SVGDocument เป็นรากของลำดับชั้น SVG และเก็บเนื้อหาทั้งหมด ข้อมูลโค้ด C# ต่อไปนี้แสดงการใช้ตัวสร้าง SVGDocument() เริ่มต้นเพื่อสร้างเอกสารเปล่า:

1. สร้างเอกสาร SVG ตั้งแต่เริ่มต้นโดยใช้ตัวสร้าง SVGDocument()
2. บันทึกไฟล์ SVG โดยใช้วิธีใดวิธีหนึ่ง Save()

using System.IO;
using Aspose.Svg;
...

    // Initialize an empty SVG document
    using (var document = new SVGDocument())
    {
        // Work with the SVG document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "empty.svg"));
    }

สร้าง SVG จากสตริงหน่วยความจำ

การสร้าง SVG จากสตริงหน่วยความจำอาจมีประโยชน์หากคุณต้องการสร้าง SVG ได้ทันที การสร้าง SVG จากสตริงทำให้คุณสามารถอัปเดตและแสดงชุดข้อมูลที่เปลี่ยนแปลงในการแสดงภาพของคุณได้อย่างง่ายดาย คุณสามารถสร้าง SVG จากเนื้อหาสตริงได้โดยใช้ SVGDocument(string, string) Constructor:

using System.IO;
using Aspose.Svg;
...

    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"70\" cy=\"70\" r=\"60\" fill=\"#ff0000\" /> <polygon points=\"160,10 350,140 210,350 50,199\" style=\"fill: orange\" /></svg>";

    using (var document = new SVGDocument(documentContent, "."))
    {
        // Work with the document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "from-string.svg"));
    }

วิธีเพิ่มองค์ประกอบลงในไฟล์ SVG

Aspose.SVG สำหรับ .NET ช่วยให้คุณสามารถแก้ไขไฟล์ SVG และเปลี่ยนแปลงเนื้อหาได้ Document Object Model (DOM) ของ API ให้การควบคุมโหนด SVG และคุณลักษณะของโหนดได้อย่างสมบูรณ์ และเป็นไปตามข้อกำหนด SVG อย่างเป็นทางการโดยสมบูรณ์

เมื่อสร้างออบเจ็กต์เอกสารแล้ว ก็สามารถเติมองค์ประกอบ SVG ได้ คุณสามารถปรับแต่งเอกสารได้โดยการเพิ่มองค์ประกอบอื่นๆ เช่น รูปร่าง SVG ข้อความ ตัวกรอง ฯลฯ โดยใช้คลาสที่เหมาะสมที่เนมสเปซ Aspose.Svg มอบให้ ตัวอย่างเช่น ต่อไปนี้เป็นวิธีเพิ่มวงกลมและข้อความที่ตกแต่งแล้ว:

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 <circle> และ <text> จะถูกเพิ่มลงในเอกสาร SVG ที่สร้างขึ้น:

1. หากต้องการสร้างเอกสาร SVG โดยทางโปรแกรมตั้งแต่เริ่มต้น ให้ใช้ตัวสร้าง SVGDocument() โดยไม่มีพารามิเตอร์
2. คุณสมบัติ RootElement ของคลาส SVGDocument ชี้ไปที่องค์ประกอบรูท <svg> ของเอกสาร
3. สร้างองค์ประกอบ <text> และ <circle> พร้อมแอตทริบิวต์ และเพิ่มลงในองค์ประกอบ <svg>:
   • คุณสามารถใช้เมธอด CreateElementNS() เพื่อสร้างอินสแตนซ์ของคลาส SVGTextElement และ SVGCircleElement
   • เรียกใช้เมธอด SetAttribute() เพื่อตั้งค่าแอตทริบิวต์ที่ระบุตำแหน่ง ขนาด การเติม ฯลฯ
   • ใช้เมธอด AppendChild() เพื่อเพิ่มองค์ประกอบลงใน <svg>
4. บันทึกไฟล์ SVG ที่แก้ไขแล้วโดยใช้วิธี Save()

ไฟล์ผลลัพธ์ที่เราสร้างไว้ด้านบน (svg-from-scratch.svg) มีลักษณะดังนี้:

แหล่งข้อมูลที่เป็นประโยชน์

• หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Aspose.SVG สำหรับ .NET API โปรดไปที่ เอกสารประกอบ ของเรา
• จากบทความ Create SVG, Load and Read SVG in C# คุณจะพบวิธีสร้าง SVG จากไฟล์ สตรีม หรือสตริงหน่วยความจำ วิธีโหลด SVG จากเว็บ และอ่าน SVG ด้วย Resources Async
• บทความเอกสารประกอบ Edit SVG File - C# Examples ให้ข้อมูลพื้นฐานเกี่ยวกับวิธีอ่านหรือแก้ไข Document Object Model โดยใช้ Aspose.SVG สำหรับ .NET API คุณจะได้สำรวจวิธีสร้างองค์ประกอบ SVG และวิธีการทำงานกับองค์ประกอบเหล่านั้น - แก้ไขเอกสารโดยการแทรกโหนดใหม่ การลบ หรือแก้ไขเนื้อหาของโหนดที่มีอยู่ ในบทความมีการพิจารณาตัวอย่างโดยละเอียดของการเพิ่มและแก้ไของค์ประกอบใหม่ใน SVG และการใช้ตัวกรอง SVG กับบิตแมป
• เราขอแนะนำให้คุณไปที่คำแนะนำของเรา SVG Drawing – Basics Tutorial หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับกฎและไวยากรณ์ของ SVG ที่นี่ เราจะอธิบายกฎทั่วไปและขั้นตอนมาตรฐานสำหรับการสร้าง SVG ตั้งแต่เริ่มต้นพร้อมตัวอย่างง่ายๆ

Aspose.SVG ที่รองรับอื่นๆ สำหรับฟีเจอร์ .NET API

ใช้ไลบรารี Aspose.SVG C# เพื่อแปลง ผสาน แก้ไขเอกสาร SVG แปลงรหัสสี ทำภาพเวกเตอร์ และอื่นๆ อีกมากมาย!