Encodeur d'URL SVG

Qu'est-ce que le SVG ?

SVG signifie Scalable Vector Graphics (graphiques vectoriels évolutifs). Il est utilisé pour définir des graphiques vectoriels pour le Web au format XML. Chaque élément et attribut des fichiers SVG peut être animé.

• Wikipédia - SVG

Comment utiliser SVG en CSS ?

Pour utiliser du code SVG directement en CSS, vous devez encoder le code SVG au préalable. Vous pouvez utiliser cet outil SVG URL Encoder ou la fonction JavaScript encodeURIComponent(). Un URI de données SVG encodé peut être utilisé avec les propriétés CSS background-image, border-image et mask via la fonction url(). Exemple : background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

Comment changer la couleur d'un SVG en CSS ?

Pour changer la couleur d'un SVG, vous pouvez combiner les propriétés CSS mask et background-color. L'exemple ci-dessous changera la couleur d'un SVG en bleu. Exemple : mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

Qu'est-ce qu'une URL ?

Une URL (Uniform Resource Locator) est l'adresse d'une ressource unique sur internet. C'est l'un des mécanismes clés utilisés par les navigateurs pour récupérer des ressources telles que des pages HTML, des documents CSS, des images, etc.

• MDN - What is a URL?

Comment encoder une URL ?

Pour encoder une URL, vous pouvez utiliser la fonction encodeURIComponent(), qui encode un URI en remplaçant chaque occurrence de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant l'encodage UTF-8 du caractère. Par rapport à encodeURI(), cette fonction encode davantage de caractères, y compris ceux qui font partie de la syntaxe URI.

• MDN - encodeURIComponent()

Comment décoder une URL ?

Pour décoder une URL, vous pouvez utiliser la fonction decodeURIComponent(), qui décode l'URI en traitant chaque séquence d'échappement de la forme %XX comme une unité de code UTF-8 (un octet). En UTF-8, le nombre de bits 1 en tête dans le premier octet, qui peut être 0 (pour les caractères ASCII sur 1 octet), 2, 3 ou 4, indique le nombre d'octets dans le caractère.

• MDN - decodeURIComponent()