Перетворення SVG на Base64 онлайн або на C#

Кодування зображень онлайн

Про схему URI

URI даних – це метод вбудовування зображень та інших файлів у веб-сторінки у вигляді рядка тексту на основі кодування Base64. Схема URI даних дозволяє включати будь-які двійкові дані в документи HTML, CSS, JSON або SVG. Наприклад, ви можете вставляти зображення на веб-сторінку так, ніби їх було завантажено із зовнішнього ресурсу, але замість вказівки URL-адреси файлу ви вставляєте вміст зображення, закодований у форматі Base64. Основною перевагою використання URI даних є прискорення завантаження сторінки, оскільки браузеру не потрібно робити додатковий веб-запит для отримання файлу, оскільки зображення вже вбудовано в документ HTML.

Синтаксис URI даних такий: data:[<mime type>][;charset=<charset>][;base64],<encoded data>.

Файли SVG можуть містити «небезпечні» символи. Векторні зображення можуть мати растр як вбудований вміст або атрибути, значення яких узяті в одинарні або подвійні лапки. Тому необхідна попередня обробка (нормалізація) цього формату. Ви можете використовувати SVG у HTML або CSS через дані URI. Якщо SVG закодовано за допомогою даних URI, він працюватиме в будь-якому браузері.

Як конвертувати SVG у Base64 на C#

Щоб перетворити зображення SVG на рядок Base64, ми використовуємо API Aspose.SVG for .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, щоб створити екземпляр зображення. Простір імен URI namespaceURI встановлює посилання на специфікацію W3C SVG. qualifiedName має містити назву тегa елемента image.
4. Перетворіть SVG на Base64. Викликайте метод ToBase64String(bytes), щоб перетворити масив 8-розрядних цілих чисел на його еквівалентне рядкове представлення, кодоване цифрами з основою 64.
5. Додайте елемент зображення в документ SVG за допомогою методу AppendChild(node).
6. Скористайтеся методом Save(path), щоб зберегти документ SVG.

Плюси та мінуси URI даних

URI даних дає нам розумний спосіб вставляти зображення на веб-сторінку. Схеми URI можна використовувати різними способами. Але в будь-якому випадку є свої плюси і мінуси.

Переваги:

• Прискорення завантаження сторінки. Браузеру не потрібно робити додатковий веб-запит, щоб отримати файл, оскільки зображення вже вбудовано в документ HTML.
• Поліпшення продуктивності. Браузер потребує менше процесорного часу.
• Веб-сторінки стають незалежними від зовнішніх файлів, завдяки чому ними легко ділитися навіть у режимі офлайн.

Недоліки:

• Розмір кодованих даних Base64 на 1/3 більший за двійкове зображення.
• Кодовані зображення не кешуються браузером і завантажуватимуться кожного разу, коли відвідується така сторінка.
• Кодовані зображення важко редагувати, оскільки спочатку потрібно декодувати рядок Base64.
• Зображення Base64 ніколи не буде проіндексовано Google, оскільки воно не відображається в результатах пошуку зображень.
  
  

Онлайн Кодери Base64

Aspose.SVG пропонує безкоштовні онлайн-застосунки для кодування та декодування двійкових даних:

• Base64 Encoders – це набір інструментів, які дозволяють кодувати двійкові дані в різних вихідних форматах: Plain Base64, JSON, XML, URI або CSS.
• Image Base64 Decoder перетворює 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..."
  }
}

FAQ

Початок роботи з Aspose.SVG for .NET API