Converter SVG para Base64 online ou em C#

Codificar imagens online

Sobre o Esquema de URI

URI de dados é um método de incorporação de imagens e outros arquivos em páginas da Web como uma string de texto com base na codificação Base64. O esquema de URI de dados permite incluir quaisquer dados binários em documentos HTML, CSS, JSON ou SVG. Por exemplo, você pode incorporar imagens em uma página da Web como se fossem carregadas de um recurso externo, mas, em vez de especificar a URL do arquivo, você insere o conteúdo codificado em Base64 da imagem. A principal vantagem do uso de URI de dados é a aceleração do carregamento da página, pois o navegador não precisa fazer uma solicitação adicional da Web para recuperar o arquivo, pois a imagem já está incorporada ao documento HTML.

A sintaxe do URI de dados é a seguinte: data:[<mime type>][;charset=<charset>][;base64],<encoded data>.

Os arquivos SVG podem conter caracteres “inseguros”. As imagens vetoriais podem ter raster como conteúdo incorporado ou atributos cujos valores são colocados entre aspas simples ou duplas. Portanto, o processamento preliminar (normalização) desse formato é necessário. Você pode usar SVG em HTML ou CSS via URI de dados. Se o SVG for codificado usando URI de dados, funcionará em qualquer navegador.

Como converter SVG para Base64 em C#

Para converter imagens SVG em string Base64, usamos a API Aspose.SVG for .NET, que é uma API rica em recursos, poderosa e fácil de -use a API de manipulação de documentos para a plataforma C#. Consideramos o exemplo de imagem SVG para codificação Base64 e incorporação de string Base64 como URI de dados em um documento SVG. Essas operações podem ser feitas com algumas linhas de código:

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

Etapas para converter SVG para Base64 em C#

1. Abra uma imagem SVG para converter. Use o método ReadAllBytes(path) para abrir a imagem SVG e ler o conteúdo do arquivo em uma matriz de bytes.
2. Inicialize uma nova instância da classe SVGDocument.
3. Use o método CreateElementNS(namespaceURI, qualificadoName) da classe SVGDocument para criar um instância de imagem. O namespaceURI define a referência para a especificação W3C SVG. O qualifiedName deve conter o nome da tag de string do elemento de imagem.
4. Converta SVG para Base64. Chame o método ToBase64String(bytes) para converter uma matriz de inteiros de 8 bits em sua representação de string equivalente codificada em dígitos base64.
5. Adicione o elemento de imagem no documento SVG usando o método AppendChild(node).
6. Use o método Save(path) para salvar o documento SVG.

Prós e contras do URI de dados

O URI de dados nos dá uma maneira inteligente de incorporar imagens em uma página da web. Os esquemas de URI podem ser usados ​​de várias maneiras. Mas em qualquer caso, há prós e contras.

Prós:

• Acelerar o carregamento da página. O navegador não precisa fazer uma solicitação da Web adicional para recuperar o arquivo porque a imagem já está incorporada no documento HTML.
• Melhoria de desempenho. O navegador requer menos tempo de CPU.
• As páginas da Web tornam-se independentes de arquivos externos, facilitando o compartilhamento mesmo offline.

Contra:

• O tamanho dos dados codificados em Base64 é 1/3 maior que a imagem binária.
• As imagens codificadas não são armazenadas em cache pelo navegador e serão baixadas sempre que tal página for visitada.
• As imagens codificadas são difíceis de editar porque a string Base64 precisa ser decodificada primeiro.
• Uma imagem Base64 nunca será indexada pelo Google porque não aparece nos resultados da pesquisa de imagens.
  
  

Codificadores Online Base64

Aspose.SVG oferece aplicativos online gratuitos para codificar e decodificar dados binários:

• Codificadores Base64 são um conjunto de ferramentas que permitem codificar dados binários em vários formatos de saída: Plain Base64, JSON, XML, URI ou CSS.
• Image Base64 Decoder converte um URI de dados contendo uma string Base64 em uma imagem colando uma string URI no controle de entrada.

Nossos aplicativos baseados em navegador funcionam em todas as plataformas, incluindo Windows, Linux, Mac OS, Android e iOS. Nenhum registro, plug-in ou instalação de software é necessário para você. Comece a usar nossas ferramentas on-line de codificação/decodificação Base64 de maneira segura, segura e fácil!

Exemplos de uso da codificação 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..."
  }
}

Perguntas frequentes

Introdução à API .NET SVG