Buat SVG di C#

Cara Membuat SVG di C#

Scalable Vector Graphics (SVG) adalah bahasa XML untuk membuat grafik vektor dua dimensi, dan dokumen SVG adalah file teks yang mendeskripsikan gambar sebagai primitif geometris: garis, kurva, bentuk, teks, dll. Jika Anda mengembangkan situs web, buatlah data visualisasi, atau mengerjakan materi cetak, SVG memberikan solusi serbaguna dan efisien untuk pembuatan grafis. Pustaka Aspose.SVG for .NET menyediakan sekumpulan kelas dan metode untuk membuat, mengedit, mengonversi, dan manipulasi lain dengan file SVG. Jadi, mari buat dokumen SVG baru!

Pertama, pastikan Anda telah menginstal Aspose.SVG for .NET API di proyek Anda. Proses instalasinya cukup sederhana. Anda dapat menginstalnya melalui NuGet Package Manager Console menggunakan perintah berikut:

Install-Package Aspose.SVG

Buat Dokumen SVG Kosong

Aspose.SVG untuk .NET API menyediakan kelas SVGDocument yang dapat digunakan untuk membuat dokumen SVG. SVGDocument adalah akar hierarki SVG dan menampung seluruh konten. Cuplikan kode C# berikut menunjukkan penggunaan konstruktor SVGDocument() default untuk membuat dokumen kosong:

1. Buat dokumen SVG dari awal menggunakan konstruktor SVGDocument() .
2. Simpan file SVG menggunakan salah satu metode 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"));
    }

Buat SVG dari String Memori

Menghasilkan SVG dari string memori dapat berguna jika Anda ingin membuat SVG dengan cepat. Membuat SVG dari string memungkinkan Anda memperbarui dan merepresentasikan perubahan kumpulan data dalam visualisasi Anda dengan mudah. Anda dapat membuat SVG dari konten string menggunakan konstruktor SVGDocument(string, string) :

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"));
    }

Cara Menambahkan Elemen ke File SVG

Aspose.SVG untuk .NET memungkinkan Anda mengedit file SVG dan mengubah kontennya. Model Objek Dokumen (DOM) API memberikan kontrol penuh atas node SVG dan atributnya dan sepenuhnya sesuai dengan spesifikasi resmi SVG.

Setelah objek dokumen dibuat, objek tersebut dapat diisi dengan elemen SVG. Anda dapat menyesuaikan dokumen dengan menambahkan lebih banyak elemen seperti bentuk SVG, teks, filter, dll., menggunakan kelas yang sesuai yang disediakan oleh namespace Aspose.Svg . Misalnya, berikut cara menambahkan lingkaran dan teks yang dihias:

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"));
    }

Mari kita lihat langkah-langkah sederhana untuk mengedit dokumen SVG yang menggambarkan kode # di atas. Elemen <circle> dan <text> SVG ditambahkan ke dokumen SVG yang dibuat:

1. Untuk membuat dokumen SVG secara terprogram dari awal, gunakan konstruktor SVGDocument() tanpa parameter.
2. Properti RootElement kelas SVGDocument menunjuk ke elemen <svg> root dokumen.
3. Buat elemen <text> dan <circle> dengan atribut dan tambahkan ke elemen <svg>:
   • Anda dapat menggunakan metode CreateElementNS() untuk membuat instance kelas SVGTextElement dan SVGCircleElement.
   • Panggil metode SetAttribute() untuk mengatur atribut yang menentukan posisi, ukuran, isi, dll.
   • Gunakan metode AppendChild() untuk menambahkan elemen ke <svg>.
4. Simpan file SVG yang telah diedit menggunakan metode Save() .

Hasil file yang kita buat di atas (svg-from-scratch.svg), terlihat seperti ini:

Sumber Daya Berguna

• Untuk mempelajari lebih lanjut tentang Aspose.SVG untuk .NET API, silakan kunjungi dokumentasi kami.
• Dari artikel Create SVG, Load and Read SVG in C# , Anda mengetahui cara membuat SVG dari file, aliran, atau string memori; cara memuat SVG dari Web, dan membaca SVG dengan Resources Async.
• Artikel dokumentasi Edit SVG File - C# Examples memberi Anda informasi dasar tentang cara membaca atau mengedit Model Objek Dokumen menggunakan Aspose.SVG untuk .NET API. Anda akan mempelajari cara membuat elemen SVG dan cara menggunakannya - memodifikasi dokumen dengan menyisipkan node baru, menghapus, atau mengedit konten node yang ada. Artikel ini membahas contoh rinci penambahan dan pengeditan elemen baru di SVG dan penerapan filter SVG ke bitmap.
• Kami menyarankan Anda mengunjungi panduan kami SVG Drawing – Basics Tutorial jika Anda ingin mempelajari lebih lanjut tentang aturan dan sintaksis SVG. Di sini, kami menjelaskan aturan umum dan langkah standar untuk membuat SVG dari awal dengan contoh sederhana.

Aspose.SVG Lainnya yang Didukung untuk Fitur .NET API

Gunakan pustaka Aspose.SVG C# untuk mengonversi, menggabungkan, mengedit dokumen SVG, mengonversi kode warna, membuat vektor gambar, dan banyak lagi!