Mengedit SVG dengan C#

Mengedit SVG dalam C #

Perpustakaan Aspose.SVG for .NET menyediakan sekumpulan kelas dan metode untuk membuat, mengedit, mengonversi, dan manipulasi lainnya dengan file 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. Pada artikel ini, kita akan membahas dua contoh C# yang mendemonstrasikan pendekatan yang berbeda untuk membuat dan mengedit SVG: satu menggunakan Aspose.SVG Builder API dan yang lainnya menggunakan manipulasi DOM secara manual dengan pengaturan elemen dan atribut secara langsung.

Pertama, pastikan Anda telah menginstal Aspose.SVG for .NET API dalam proyek Anda. Proses instalasi cukup sederhana. Anda dapat menginstalnya melalui Konsol Manajer Paket NuGet dengan perintah berikut:

Install-Package Aspose.SVG

Menambahkan elemen ke file SVG dengan Element Builders

Element Builders adalah kelas khusus dari Aspose.SVG Builder API yang memfasilitasi pembuatan dan modifikasi elemen SVG dalam kode. Mereka sering menggunakan pola seperti Pola Pembangun Fasih untuk menyediakan sintaks yang bersih dan mudah dibaca untuk mengatur atribut dan menyusun konten SVG secara terprogram. Kode berikut ini menunjukkan pendekatan yang ringkas dan elegan untuk membuat SVG dari awal menggunakan C#. Contoh ini menggunakan pola Fluent Builder dalam SVGSVGElementBuilder untuk membuat dan menambahkan elemen baru ke SVG: lingkaran yang dihias dan teks.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Menambahkan elemen ke file SVG

API Document Object Model (DOM) menyediakan kontrol penuh atas node SVG dan atributnya dan sepenuhnya sesuai dengan spesifikasi resmi SVG. Anda dapat memodifikasi dokumen dengan menambahkan node baru, menghapus node yang ada, atau mengedit kontennya. Sebagai contoh, Anda dapat menambahkan lingkaran yang dihias dan teks ke 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"));
    }

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 sama untuk kedua contoh kode (svg-from-scratch.svg) dan terlihat seperti ini:

Sumber daya yang berguna

• Artikel dokumentasi Edit file SVG – contoh C# memberi Anda informasi dasar tentang cara membaca atau mengedit Model Objek Dokumen dengan Aspose.SVG untuk API .NET. Anda akan belajar cara membuat elemen SVG dan cara bekerja dengannya – memodifikasi dokumen dengan menyisipkan node baru, menghapus atau mengedit konten node yang ada.
• Dalam bab Pembangun SVG – Pembuatan dan modifikasi SVG tingkat lanjut , Anda akan menemukan panduan untuk mengedit SVG yang efektif dengan API Aspose.SVG Builder, yang mencakup aspek-aspek mulai dari pembuatan elemen dasar hingga teknik tingkat lanjut seperti mixin dan gula sintaksis.
• Artikel Element Builders membahas tentang pembuat elemen yang digunakan dalam Aspose.SVG Builder API. Anda akan belajar tentang kelas SVGElementBuilder, pembangun khusus dan bagaimana mereka menyederhanakan pemrograman SVG.

Fungsi lain yang didukung

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