xavier_bs@murviel-info.com  

Le codage base64:

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

Chaine
Response

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 XHTML eXtensible 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.

Changer les attributs

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.
d path original
M605 132q15 -6 25 -20.5t10 -32.5v-28q0 -28 -22 -45v-38q0 -13 -9 -22.5t-23 -9.5h-22q-13 0 -22.5 9.5t-9.5 22.5v32h-200v-32q0 -13 -9.5 -22.5t-22.5 -9.5h-22q-14 0 -23 9.5t-9 22.5v38q-22 17 -22 45v28q0 18 10 32.5t25 20.5l5 12l18 49q11 28 36.5 45.5 t56.5 17.5h114q31 0 56.5 -17.5t36.5 -45.5l18 -49zM335 164l-12 -36h218l-12 36q-11 28 -40 28h-114q-29 0 -40 -28zM300 40h5h5.5h5.5t5 0.5t4.5 1t4.5 1.5t3.5 2t2 3t0.5 4q0 7 -6 15.5t-14.5 14.5t-15.5 6q-11 0 -17.5 -6.5t-6.5 -17.5q0 -7 3 -12.5t8.5 -8.5t12.5 -3z M564 40q11 0 17.5 6.5t6.5 17.5t-6.5 17.5t-17.5 6.5t-23.5 -12.5t-12.5 -23.5q0 -3 1 -5t3.5 -3.5t5 -2t6.5 -1t6.5 -0.5h7h6.5z
Une valeur 0 pour scale retournera un d path vide
d path transformed
SVG d-path original
SVG d-path tranformed
SVG d-path transformed code