Преобразование SVG в Base64

Кодируйте изображения онлайн

О схеме URI

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

Синтаксис URI данных следующий: data:[<MIME type>][;charset=<charset>][;base64],<кодированные данные>.

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

Как преобразовать SVG в Base64 на С#

Чтобы преобразовать изображение 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,qualName) класса SVGDocument для создания экземпляр изображения. namespaceURI устанавливает ссылку на спецификацию W3C SVG. qualifiedName должно содержать имя строкового тега элемента изображения.
4. Преобразуйте SVG в Base64. Вызовите метод ToBase64String(bytes) для преобразования массива 8-разрядных целых чисел в его эквивалентное строковое представление, кодированное в цифрах base64.
5. Добавьте элемент изображения в документ SVG, используя метод AppendChild(node) .
6. Используйте метод Save(path) для сохранения документа SVG.

Плюсы и минусы использования Data URI

URI данных дает нам разумный способ вставлять изображения на веб-страницу. Схемы URI можно использовать разными способами. Но в любом случае есть плюсы и минусы.

Плюсы:

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

Минусы:

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

Онлайн-кодировщики Base64

Aspose.SVG предлагает бесплатные онлайн-приложения для кодирования и декодирования двоичных данных:

• Кодировщик Base64 представляют собой набор инструментов, позволяющих кодировать двоичные данные в различных выходных форматах: Plain Base64, JSON, XML, URI или CSS.
• 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..."
  }
}

FAQ

Начало работы с Aspose.SVG for .NET API