SVG URL-encoder

Wat is SVG?

SVG staat voor Scalable Vector Graphics. SVG wordt gebruikt om vectorgebaseerde afbeeldingen voor het Web te definiëren in XML-formaat. Elk element en attribuut in SVG-bestanden kan worden geanimeerd.

• Wikipedia - SVG

Hoe gebruik je SVG in CSS?

Om SVG-code direct in CSS te gebruiken, moet u de SVG-code eerst coderen. Gebruik hiervoor de SVG URL Encoder-tool of de JavaScript-functie encodeURIComponent(). Een gecodeerde SVG-data-URI kan via de url()-functie worden gebruikt met de CSS-eigenschappen background-image, border-image en mask. Voorbeeld: 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");

Hoe verander je de kleur van SVG in CSS?

Om de kleur van een SVG te wijzigen, kunt u de CSS-eigenschappen mask en background-color combineren. Het onderstaande voorbeeld verandert de kleur van een SVG naar blauw. Voorbeeld: 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;

Wat is een URL?

Een URL (Uniform Resource Locator) is het adres van een unieke bron op internet. Het is een van de belangrijkste mechanismen die browsers gebruiken om bronnen op te halen, zoals HTML-pagina's, CSS-documenten, afbeeldingen, enzovoort.

• MDN - What is a URL?

Hoe codeer je een URL?

Om een URL te coderen, kunt u de functie encodeURIComponent() gebruiken, die een URI codeert door elk voorkomen van bepaalde tekens te vervangen door één, twee, drie of vier escape-sequenties die de UTF-8-codering van het teken vertegenwoordigen. Vergeleken met encodeURI() codeert deze functie meer tekens, inclusief tekens die deel uitmaken van de URI-syntaxis.

• MDN - encodeURIComponent()

Hoe decodeer je een URL?

Om een URL te decoderen, kunt u de functie decodeURIComponent() gebruiken, die de URI decodeert door elke escape-sequentie in de vorm %XX als één UTF-8-code-eenheid (één byte) te behandelen. In UTF-8 geeft het aantal voorloopbits van 1 in de eerste byte, dat 0 (voor 1-byte ASCII-tekens), 2, 3 of 4 kan zijn, het aantal bytes in het teken aan.

• MDN - decodeURIComponent()