Le codage Base64 utilise 64 caractères pour coder et représenter des données binaires. Ce format est utilisé dans les
courriers électroniques prévus au départ pour ne transporter que des messages au format texte. Il permet ainsi de transmettre n'importe
quel document binaire (application, fichier image, audio, vidéo…) en pièce jointe d'un email en le codant à l'aide de caractères.
Chaque caractère du codage Base64 représente une donnée de 6 bits (26 = 64). Les 64 symboles sont les lettres de l'alphabet (minuscules et majuscules),
les dix chiffres (de 0 à 9) et les signes + et /. Les données binaires sont représentées par des groupes de 24 bits formés par 4 caractères (4 × 6 = 24).
L'encodage Base64 est donc prévu pour des données formant un multiple de 24 bits. Si le volume des données à représenter n'est pas un multiple de 24, le codage est complété
par le signe = de 0 à 3 fois à la fin des donnée: ceci afin d'obtenir un nombre de caractères multiple de 4. Le signe = est le 65ème caractère du codage Base64.
Ce format permet de représenter des images png, en préfixant le codage de la chaine Base64 par: data:image/png;base64,. Ainsi, il est possible de ne pas
faire référence au fichier image pour pouvoir l'utiliser. Il va de soi que l'utilisation dans un code de programmation doit se restreindre à des fichiers peu volumineux, afin de ne pas trop surcharger
l'écriture de celui-ci.
Encoder/décoder une chaine base64
Encoder un fichier image en base64:
Contenu de src= ou url() en CSS
Décoder une chaîne base64 en fichier image
Encodage SVG en CSS url
L'objet de ce générateur est d'obtenir à partir d'un tag svg une url CSS que l'on peut utiliser dans un background-image: url(...) ou un content d'un pseudo element ::before ou ::after.
L'élément svg est un conteneur qui définit un nouveau système de coordonnées et un nouveau viewport. Il est utilisé comme élément le plus extérieur des documents SVG, et peut être utilisé pour incorporer une image vectorielle dans un document HTML dans la balise img. Il peut aussi être utilisé avec une certaine syntaxe pour indiquer une url dans les directives background-image et l'attribut content d'un pseudo-element dans les feuilles de styles CSS.
L'attribut xmlns pour XML NameSpace est obligatoire pour le XHTMLeXtensible HyperText Markup Language (conçu pour le transport et le stockage des données) et optionnel en HTML5 car par défaut le namespace est xmlns="http://www.w3.org/2000/xhtml" et est ajouté à la balise <html> si celui est manquant. Il est donc nécessaire pour les url dans les fichiers CSS. Les attributs fill pour la couleur et version pour la version du namespace XML sont optionnels
Le générateur fonctionne avec un d path unique, similaire aux polices d'icones, conforme à l'exemple présenté. Sur d'autres SVG, le remplacement des attributs ne se fait que sur la première occurence trouvée. Le code CSS obtenu est toutefois fonctionnel si la chaîne de départ est bien formée.
SVG Preview
CSS Preview
SVG d path transform
L'attribut viewBox de la balise HTML<svg> spécifie l'emplacement des éléments graphiques. La valeur de viewBox est une suite de quatre nombres min-x, min-y, width et height. Ces nombres définissent un rectangle qui correspond à la vue renvoyée par l'élément SVG. Les valeurs négatives de width et height ne sont pas acceptées, et une valeur nulle désactive le rendu de l'élément. min-x et min-y peuvent prendre des valeurs négatives, elles correspondent à l'origine supérieure gauche du rectangle, sachant que l'axe [Ox) est orienté vers la droite et l'axe [Oy) est orienté vers le bas.
