Convertir SVG en Base64 en ligne ou en C#

Encoder des images en ligne

À propos du schéma d'URI

L’URI de données est une méthode d’intégration d’images et d’autres fichiers dans des pages Web sous forme de chaîne de texte basée sur l’encodage Base64. Le schéma d’URI de données vous permet d’inclure toutes les données binaires dans les documents HTML, CSS, JSON ou SVG. Par exemple, vous pouvez incorporer des images dans une page Web comme si elles avaient été chargées à partir d’une ressource externe, mais au lieu de spécifier l’URL du fichier, vous insérez le contenu encodé en Base64 de l’image. Le principal avantage de l’utilisation de l’URI de données est une accélération du chargement de la page car le navigateur n’a pas besoin de faire une requête Web supplémentaire pour récupérer le fichier puisque l’image est déjà intégrée dans le document HTML.

La syntaxe de l’URI de données est la suivante: data:[<type mime>][;charset=<charset>][;base64],<données codées>.

Les fichiers SVG peuvent contenir des caractères «dangereux». Les images vectorielles peuvent avoir un raster comme contenu intégré ou des attributs dont les valeurs sont entre guillemets simples ou doubles. Par conséquent, un traitement préliminaire (normalisation) de ce format est requis. Vous pouvez utiliser SVG en HTML ou CSS via l’URI de données. Si SVG est encodé à l’aide de l’URI de données, il fonctionnera dans n’importe quel navigateur.

Comment convertir SVG en Base64 en C#

Afin de convertir une image SVG en chaîne Base64, nous utilisons l’API Aspose.SVG pour .NET , qui est une API de manipulation de documents riche en fonctionnalités, puissante et facile à utiliser pour la plate-forme C#. Nous considérons l’exemple d’une image SVG en encodant Base64 et en incorporant une chaîne Base64 en tant qu’URI de données dans un document SVG. Ces opérations peuvent être effectuées avec quelques lignes de code:

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

Étapes pour convertir SVG en Base64 en C#

1. Ouvrez une image SVG à convertir. Utilisez la méthode ReadAllBytes(path) pour ouvrir l’image SVG et lire le contenu du fichier dans un tableau d’octets.
2. Initialisez une nouvelle instance de la classe SVGDocument .
3. Utilisez la méthode CreateElementNS(namespaceURI, qualifiedName) de la classe SVGDocument pour créer une instance d’image. Le namespaceURI définit la référence à la spécification W3C SVG. Le qualifiedName doit contenir le nom de balise de chaîne de l’élément image.
4. Convertissez SVG en Base64. Appelez la méthode ToBase64String(bytes) pour convertir un tableau d’entiers 8 bits en sa représentation sous forme de chaîne équivalente codée en chiffres base64.
5. Ajoutez l’élément image dans le document SVG à l’aide de la méthode AppendChild(node) .
6. Utilisez la méthode Save(path) pour enregistrer le document SVG.

Avantages et inconvénients de l'URI de données

L’URI de données nous donne un moyen judicieux d’intégrer des images sur une page Web. Les schémas d’URI peuvent être utilisés de plusieurs façons. Mais dans tous les cas, il y a du pour et du contre.

Avantages :

• Accélération du chargement des pages. Le navigateur n’a pas besoin de faire une requête Web supplémentaire pour récupérer le fichier car l’image est déjà intégrée dans le document HTML.
• Amélioration des performances. Le navigateur nécessite moins de temps CPU.
• Les pages Web deviennent indépendantes des fichiers externes, ce qui les rend faciles à partager même hors ligne.

Inconvénients :

• La taille des données encodées en Base64 est 1/3 plus grande que l’image binaire.
• Les images encodées ne sont pas mises en cache par le navigateur et seront téléchargées à chaque visite d’une telle page.
• Les images encodées sont difficiles à éditer car la chaîne Base64 doit d’abord être décodée.
• Une image Base64 ne sera jamais indexée par Google car elle n’apparaît pas dans les résultats de recherche d’images.
  
  

Encodeurs Base64 en ligne

Aspose.SVG propose des applications en ligne gratuites pour encoder et décoder des données binaires :

• Encodeurs Base64 sont un ensemble d’outils qui vous permettent d’encoder des données binaires dans différents formats de sortie : Plain Base64, JSON, XML, URI ou CSS.
• Décodeur Image Base64 convertit un URI de données contenant une chaîne Base64 en une image en collant une chaîne URI dans le contrôle d’entrée.

Nos applications basées sur un navigateur fonctionnent sur toutes les plateformes, y compris Windows, Linux, Mac OS, Android et iOS. Aucun enregistrement, plugin ou installation de logiciel requis pour vous. Commencez à utiliser nos outils d’encodage/décodage Base64 en ligne de manière sûre, sécurisée et simple !

Exemples d'utilisation de l'encodage 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

Premiers pas avec API Aspose.SVG for .NET