Konversikan SVG ke Base64 online atau dalam C#

Enkode Gambar online

Tentang Skema URI

Data URI adalah metode menyematkan gambar dan file lain di halaman web sebagai string teks berdasarkan pengkodean Base64. Skema Data URI memungkinkan Anda menyertakan data biner apa pun dalam dokumen HTML, CSS, JSON, atau SVG. Misalnya, Anda dapat menyematkan gambar di halaman web seolah-olah diambil dari sumber daya eksternal, tetapi alih-alih menentukan URL file, Anda memasukkan konten gambar yang disandikan Base64. Keuntungan utama penggunaan URI data adalah mempercepat pemuatan halaman karena browser tidak perlu membuat permintaan web tambahan untuk mengambil file karena gambar sudah tertanam dalam dokumen HTML.

Sintaks URI data adalah sebagai berikut: data:[<mime type>][;charset=<charset>][;base64],<data terenkode>.

File SVG mungkin berisi karakter “tidak aman”. Gambar vektor dapat memiliki raster sebagai konten atau atribut yang disematkan yang nilainya dilampirkan dalam tanda kutip tunggal atau ganda. Oleh karena itu, diperlukan pemrosesan awal (normalisasi) format ini. Anda dapat menggunakan SVG dalam HTML atau CSS melalui URI data. Jika SVG dikodekan menggunakan data URI, itu akan berfungsi di browser apa pun.

Cara mengonversi SVG ke Base64 di C#

Untuk mengonversi gambar SVG ke string Base64, kami menggunakan API Aspose.SVG for .NET, yang kaya fitur, andal, dan mudah digunakan -gunakan API manipulasi dokumen untuk platform C#. Kami mempertimbangkan contoh gambar SVG ke penyandian Base64 dan menyematkan string Base64 sebagai URI data ke dalam dokumen SVG. Operasi ini dapat dilakukan dengan beberapa baris kode:

    // Open an SVG image
    var bytes = File.ReadAllBytes(@"flower.svg");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert SVG image to Base64
    img.Href.BaseVal = "data:image/svg+xml;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");

Langkah-langkah untuk Mengonversi SVG ke Base64 di C#

1. Buka gambar SVG untuk dikonversi. Gunakan metode ReadAllBytes(path) untuk membuka gambar SVG dan membaca konten file ke dalam array byte.
2. Inisialisasi instance baru dari kelas SVGDocument.
3. Gunakan metode CreateElementNS(namespaceURI, QualifiedName) dari kelas SVGDocument untuk membuat contoh gambar. namespaceURI menyetel referensi ke spesifikasi W3C SVG. QualifiedName harus berisi nama tag string dari elemen gambar.
4. Konversikan SVG ke Base64. Panggil metode ToBase64String(bytes) untuk mengonversi larik bilangan bulat 8-bit menjadi representasi string setara yang disandikan dalam digit base64.
5. Tambahkan elemen gambar ke dalam dokumen SVG menggunakan metode AppendChild(node).
6. Gunakan metode Save(path) untuk menyimpan dokumen SVG.

Pro dan Kontra Data URI

Data URI memberi kita cara bijak untuk menyematkan gambar di halaman web. Skema URI dapat digunakan dengan berbagai cara. Tapi bagaimanapun, ada pro dan kontra.

Kelebihan:

• Mempercepat pemuatan halaman. Browser tidak perlu membuat permintaan web tambahan untuk mengambil file karena gambar sudah disematkan di dokumen HTML.
• Peningkatan performa. Browser membutuhkan lebih sedikit waktu CPU.
• Halaman web menjadi independen dari file eksternal, membuatnya mudah untuk dibagikan bahkan saat offline.

Kontra:

• Ukuran data yang disandikan Base64 1/3 lebih besar dari citra biner.
• Gambar yang disandikan tidak di-cache oleh browser dan akan diunduh setiap kali halaman tersebut dikunjungi.
• Gambar yang dikodekan sulit untuk diedit karena string Base64 perlu didekodekan terlebih dahulu.
• Gambar Base64 tidak akan pernah diindeks oleh Google karena tidak muncul di hasil pencarian gambar.
  
  

Encoder Base64 Online

Aspose.SVG menawarkan aplikasi online gratis untuk encodind dan decoding data biner:

• Encoder Base64 adalah seperangkat alat yang memungkinkan Anda mengenkode data biner dalam berbagai format keluaran: Base64 Biasa, JSON, XML, URI, atau CSS.
• Gambar Base64 Decoder mengonversi URI data yang berisi string Base64 ke gambar dengan menempelkan string URI di kontrol masukan.

Aplikasi berbasis browser kami berfungsi dari semua platform, termasuk Windows, Linux, Mac OS, Android, dan iOS. Tidak diperlukan pendaftaran, plugin, atau instalasi perangkat lunak untuk Anda. Mulailah menggunakan alat encoding/decoding Base64 online kami dengan aman, aman, dan mudah!

Contoh Penggunaan Enkode Base64

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..." alt="Blue flower"/>
</svg>

<body>
    <div>
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..." alt="Blue flower">
    </div>
</body>

.class {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna...');
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/svg+xml">PHN2ZyB3aWR0aD0iNDUwIiBoZWlna...</image>
</root>

{
  "image": {
    "mime": "image/svg+xml",
    "data": "PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..."
  }
}

FAQ

Memulai dengan Aspose.SVG for .NET API