แปลง SVG เป็น Base64 ออนไลน์หรือใน C#

เข้ารหัสรูปภาพออนไลน์

เกี่ยวกับโครงการ URI

URI ข้อมูลเป็นวิธีการฝังรูปภาพและไฟล์อื่นๆ ในหน้าเว็บเป็นสตริงข้อความตามการเข้ารหัส Base64 รูปแบบ URI ข้อมูลช่วยให้คุณสามารถรวมข้อมูลไบนารีในเอกสาร HTML, CSS, JSON หรือ SVG ตัวอย่างเช่น คุณสามารถฝังรูปภาพในหน้าเว็บได้ราวกับว่าโหลดมาจากทรัพยากรภายนอก แต่แทนที่จะระบุ URL ของไฟล์ คุณจะแทรกเนื้อหาที่เข้ารหัส Base64 ของรูปภาพ ข้อได้เปรียบหลักของการใช้ URI ข้อมูลคือการโหลดหน้าเว็บเร็วขึ้น เนื่องจากเบราว์เซอร์ไม่จำเป็นต้องส่งคำขอทางเว็บเพิ่มเติมเพื่อดึงไฟล์ เนื่องจากรูปภาพถูกฝังอยู่ในเอกสาร HTML แล้ว

ไวยากรณ์ของ data URI มีดังต่อไปนี้: data:[<mime type>][;charset=<charset>][;base64],<encoded data>

ไฟล์ SVG อาจมีอักขระที่ “ไม่ปลอดภัย” ภาพเวกเตอร์สามารถมีแรสเตอร์เป็นเนื้อหาหรือแอตทริบิวต์ที่ฝังไว้ ซึ่งมีค่าอยู่ในเครื่องหมายอัญประกาศเดี่ยวหรือคู่ ดังนั้นจึงจำเป็นต้องมีการประมวลผลเบื้องต้น (การทำให้เป็นมาตรฐาน) ของรูปแบบนี้ คุณสามารถใช้ SVG ใน HTML หรือ CSS ผ่าน data URI ถ้า SVG ถูกเข้ารหัสโดยใช้ data URI มันจะทำงานในเบราว์เซอร์ใดก็ได้

วิธีแปลง SVG เป็น Base64 ใน C#

ในการแปลงภาพ SVG เป็นสตริง Base64 เราใช้ API Aspose.SVG สำหรับ .NET ซึ่งเป็น API การจัดการเอกสารที่มีฟีเจอร์หลากหลาย ทรงพลัง และใช้งานง่ายสำหรับแพลตฟอร์ม C# เราถือว่าตัวอย่างของภาพ SVG เป็นการเข้ารหัส Base64 และการฝังสตริง Base64 เป็น URI ข้อมูลในเอกสาร SVG การดำเนินการเหล่านี้สามารถทำได้โดยใช้โค้ดไม่กี่บรรทัด:

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

ขั้นตอนในการแปลง SVG เป็น Base64 ใน C#

1. เปิดภาพ SVG เพื่อแปลง ใช้เมธอด ReadAllBytes(path) เพื่อเปิดภาพ SVG และอ่านเนื้อหาของไฟล์ในอาร์เรย์ไบต์
2. เริ่มต้นอินสแตนซ์ใหม่ของคลาส SVGDocument
3. ใช้เมธอด CreateElementNS(namespaceURI, QualifiedName) ของคลาส SVGDocument เพื่อสร้างอินสแตนซ์รูปภาพ namespaceURI ตั้งค่าการอ้างอิงถึงข้อกำหนด W3C SVG qualifiedName ต้องมีชื่อแท็กสตริงขององค์ประกอบรูปภาพ
4. แปลง SVG เป็น Base64 เรียกใช้เมธอด ToBase64String(bytes) เพื่อแปลงอาร์เรย์ของจำนวนเต็ม 8 บิตเป็นการแทนค่าสตริงที่เทียบเท่าซึ่งเข้ารหัสเป็นเลขฐาน 64
5. เพิ่มองค์ประกอบรูปภาพลงในเอกสาร SVG โดยใช้วิธี AppendChild(node)
6. ใช้เมธอด Save(path) เพื่อบันทึกเอกสาร SVG

ข้อดีและข้อเสียของ Data URI

URI ข้อมูลช่วยให้เราฝังรูปภาพบนหน้าเว็บได้อย่างชาญฉลาด รูปแบบ URI สามารถใช้ได้หลายวิธี แต่ไม่ว่าในกรณีใดมีข้อดีและข้อเสีย

ข้อดี:

• เร่งความเร็วในการโหลดหน้าเว็บ เบราว์เซอร์ไม่จำเป็นต้องส่งคำขอเว็บเพิ่มเติมเพื่อดึงไฟล์ เนื่องจากรูปภาพถูกฝังอยู่ในเอกสาร HTML แล้ว
• การปรับปรุงประสิทธิภาพ. เบราว์เซอร์ต้องการเวลา CPU น้อยลง
• เว็บเพจเป็นอิสระจากไฟล์ภายนอก ทำให้ง่ายต่อการแบ่งปันแม้ออฟไลน์

ข้อเสีย:

• ขนาดของข้อมูลที่เข้ารหัส Base64 มีขนาดใหญ่กว่าภาพไบนารี 1/3
• ภาพที่เข้ารหัสจะไม่ถูกแคชโดยเบราว์เซอร์ และจะถูกดาวน์โหลดทุกครั้งที่มีการเยี่ยมชมหน้าดังกล่าว
• ภาพที่เข้ารหัสยากต่อการแก้ไขเนื่องจากต้องถอดรหัสสตริง Base64 ก่อน
• Google จะไม่จัดทำดัชนีรูปภาพ Base64 เนื่องจากไม่ปรากฏในผลการค้นหารูปภาพ
  
  

ตัวเข้ารหัส Base64 ออนไลน์

Aspose.SVG เสนอแอปพลิเคชันออนไลน์ฟรีสำหรับเข้ารหัสและถอดรหัสข้อมูลไบนารี:

• ตัวเข้ารหัส Base64 เป็นชุดเครื่องมือที่ให้คุณเข้ารหัสข้อมูลไบนารีในรูปแบบเอาต์พุตต่างๆ: Plain Base64, JSON, XML, URI หรือ CSS
• ตัวถอดรหัส Image Base64 แปลง URI ข้อมูลที่มีสตริง Base64 เป็นภาพโดยการวางสตริง URI ในตัวควบคุมอินพุต

แอปพลิเคชันบนเบราว์เซอร์ของเราทำงานได้จากทุกแพลตฟอร์ม รวมถึง Windows, Linux, Mac OS, Android และ iOS คุณไม่จำเป็นต้องลงทะเบียน ปลั๊กอิน หรือติดตั้งซอฟต์แวร์ เริ่มใช้เครื่องมือเข้ารหัส/ถอดรหัส Base64 ออนไลน์อย่างปลอดภัย มั่นคง และด้วยวิธีง่ายๆ!

ตัวอย่างการใช้งานการเข้ารหัส 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..."
  }
}

คำถามที่พบบ่อย

เริ่มต้นใช้งาน .NET SVG API