SVG URL-kodare

Vad är SVG?

SVG står för Scalable Vector Graphics. SVG används för att definiera vektorbaserade grafik för webben i XML-format. Varje element och attribut i SVG-filer kan animeras.

• Wikipedia - SVG

Hur använder man SVG i CSS?

För att använda SVG-kod direkt i CSS behöver du koda SVG-koden först. Du kan använda det här SVG URL Encoder-verktyget eller JavaScript-funktionen encodeURIComponent(). En kodad SVG-data-URI kan användas med CSS-egenskaperna background-image, border-image och mask via url()-funktionen. Exempel: 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");

Hur ändrar man färgen på SVG i CSS?

För att ändra färgen på ett SVG kan du kombinera CSS-egenskaperna mask och background-color. Exemplet nedan ändrar färgen på ett SVG till blått. Exempel: 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;

Vad är en URL?

En URL (Uniform Resource Locator) är adressen till en unik resurs på internet. Det är en av de viktigaste mekanismerna som webbläsare använder för att hämta resurser som HTML-sidor, CSS-dokument, bilder och så vidare.

• MDN - What is a URL?

Hur kodar man en URL?

För att koda en URL kan du använda funktionen encodeURIComponent() som kodar en URI genom att ersätta varje förekomst av vissa tecken med en, två, tre eller fyra escape-sekvenser som representerar tecknets UTF-8-kodning. Jämfört med encodeURI() kodar denna funktion fler tecken, inklusive de som är en del av URI-syntaxen.

• MDN - encodeURIComponent()

Hur avkodar man en URL?

För att avkoda en URL kan du använda funktionen decodeURIComponent(), som avkodar URI:n genom att behandla varje escape-sekvens i formen %XX som en UTF-8-kodenhet (en byte). I UTF-8 anger antalet ledande 1-bitar i den första byten, vilket kan vara 0 (för 1-byte ASCII-tecken), 2, 3 eller 4, antalet bytes i tecknet.

• MDN - decodeURIComponent()