Κωδικοποιητής URL SVG

Τι είναι το SVG;

Το SVG σημαίνει Scalable Vector Graphics (Κλιμακώσιμα Διανυσματικά Γραφικά). Χρησιμοποιείται για τον ορισμό διανυσματικών γραφικών για τον Ιστό σε μορφή XML. Κάθε στοιχείο και χαρακτηριστικό σε αρχεία SVG μπορεί να κινηθεί.

• Wikipedia - SVG

Πώς να χρησιμοποιήσετε SVG σε CSS;

Για να χρησιμοποιήσετε κώδικα SVG απευθείας σε CSS, πρέπει πρώτα να τον κωδικοποιήσετε. Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο SVG URL Encoder ή τη συνάρτηση JavaScript encodeURIComponent(). Ένα κωδικοποιημένο URI δεδομένων SVG μπορεί να χρησιμοποιηθεί με τις ιδιότητες CSS background-image, border-image και mask μέσω της συνάρτησης url(). Παράδειγμα: 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");

Πώς να αλλάξετε το χρώμα του SVG σε CSS;

Για να αλλάξετε το χρώμα ενός SVG, μπορείτε να συνδυάσετε τις ιδιότητες CSS mask και background-color. Το παρακάτω παράδειγμα θα αλλάξει το χρώμα ενός SVG σε μπλε. Παράδειγμα: 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;

Τι είναι το URL;

Ένα URL (Uniform Resource Locator) είναι η διεύθυνση ενός μοναδικού πόρου στο διαδίκτυο. Είναι ένας από τους βασικούς μηχανισμούς που χρησιμοποιούν τα προγράμματα περιήγησης για να ανακτούν πόρους, όπως σελίδες HTML, έγγραφα CSS, εικόνες κ.λπ.

• MDN - What is a URL?

Πώς να κωδικοποιήσετε ένα URL;

Για να κωδικοποιήσετε ένα URL μπορείτε να χρησιμοποιήσετε τη συνάρτηση encodeURIComponent(), η οποία κωδικοποιεί ένα URI αντικαθιστώντας κάθε εμφάνιση ορισμένων χαρακτήρων με μία, δύο, τρεις ή τέσσερις ακολουθίες διαφυγής που αναπαριστούν την κωδικοποίηση UTF-8 του χαρακτήρα. Σε σύγκριση με την encodeURI(), αυτή η συνάρτηση κωδικοποιεί περισσότερους χαρακτήρες, συμπεριλαμβανομένων εκείνων που αποτελούν μέρος της σύνταξης URI.

• MDN - encodeURIComponent()

Πώς να αποκωδικοποιήσετε ένα URL;

Για να αποκωδικοποιήσετε ένα URL μπορείτε να χρησιμοποιήσετε τη συνάρτηση decodeURIComponent(), η οποία αποκωδικοποιεί το URI αντιμετωπίζοντας κάθε ακολουθία διαφυγής της μορφής %XX ως μία μονάδα κώδικα UTF-8 (ένα byte). Στο UTF-8, ο αριθμός των αρχικών 1 bits στο πρώτο byte, που μπορεί να είναι 0 (για χαρακτήρες ASCII 1 byte), 2, 3 ή 4, υποδεικνύει τον αριθμό των bytes στον χαρακτήρα.

• MDN - decodeURIComponent()