SVG URL kódoló
Alakítsd az SVG jelölést CSS-hez kész data URI-vá, és dekódold a data URI-t vissza SVG-vé.
Kapcsolódó eszközök
SVG URL kódoló
Illessz be egy SVG-t, és olyan data URI-t kapsz, amelyet közvetlenül a CSS-be tehetsz, készen a background-image vagy egy maszk számára. A base64 helyett a kódoló a tömör URL-kódolásos megközelítést használja: a kettős idézőjeleket egyszeresre cseréli, összevonja a szóközöket, és csak azokat a karaktereket kódolja százalékosan, amelyeknek tényleg szükséges. Így az eredmény rövid és olvasható marad, a stíluslapod könnyebb, mint egy base64 blokk, és az URI-ban lévő alakzatokat is felismered.
Három kimeneti formátum fedi le a gyakori eseteket. A CSS szabály a data URI-t a background-image: url("…"); köré csomagolja, így egy teljes deklarációt illeszthetsz be. A puszta data URI csak az értéket adja egy egyéni tulajdonsághoz, egy <img> src attribútumhoz vagy egy SVG maszkhoz. A base64 forma UTF-8-biztos data:image/svg+xml;base64 URI-t készít azoknak az eszközöknek vagy build lépéseknek, amelyek ezt a kódolást várják, beleértve az emojival vagy ékezetes szövegcsomópontokkal rendelkező SVG-ket.
Állítsd az irányt dekódolásra, és az eszköz a három forma bármelyikét visszaalakítja nyers SVG jelöléssé. Illessz be egy CSS szabályt, egy puszta data URI-t vagy egy base64-eset, és kinyeri az SVG-t, így szerkeszthetsz egy csak a stíluslapon belül létező ikont. A számláló mutatja a bemenet méretét, a kimenet méretét és a százalékos változást, így egy pillantással látod, hogy a kódolás kisebbé vagy nagyobbá tette az ikont.
Minden a böngésződben fut. Az SVG jelölésed soha nem töltődik fel, így privát ikonokat, logókat és belső elemeket is kódolhatsz anélkül, hogy elhagynák az eszközödet.