Preskoči na sadržaj

SVG URL koder

Pretvorite SVG označavanje u podatkovni URI spreman za CSS i dekodirajte podatkovne URI-je natrag u SVG.

Unos
Rezultat

SVG URL koder

Zalijepite SVG i dobijte podatkovni URI koji možete ispustiti ravno u CSS, spreman za pozadinsku sliku ili masku. Umjesto base64, koder koristi kompaktni pristup kodiranja URL-a: dvostruke navodnike zamjenjuje jednostrukim navodnicima, sažima bjelinu i postotno kodira samo znakove koji to stvarno trebaju, tako da rezultat ostaje kratak i čovjeku čitljiv. To vašu tablicu stilova čini manjom od base64 bloba i omogućuje vam prepoznavanje oblika unutar URI-ja.

Tri izlazna formata pokrivaju uobičajene slučajeve. CSS pravilo omotava URI podataka u pozadinsku sliku: url("…"); tako da možete zalijepiti cijelu deklaraciju. URI golih podataka daje vam samo vrijednost za prilagođeno svojstvo, <img> src ili SVG masku. Obrazac base64 proizvodi data:image/svg+xml;base64 URI siguran za UTF-8 za alate ili korake izrade koji očekuju to kodiranje, uključujući SVG-ove s emojijima ili čvorovima teksta s naglaskom. Opcija MIME vrste otvara isti koder bilo kojem sadržaju: odaberite text/plain, text/html, text/css, application/json ili drugu vrstu i zalijepljeni tekst postaje data URI te vrste. Samo image/svg+xml sažima razmake i mijenja dvostruke navodnike jednostrukima, jer ta dva trika skraćuju oznake, ali kvare obični tekst i JSON. Vrste koje nisu slika izostavljaju i omotač background-image te vraćaju goli url("…").

Prebacite smjer na dekodiranje i alat će preokrenuti bilo koji od tri oblika natrag u sirovo SVG označavanje. Zalijepite CSS pravilo, goli URI podataka ili base64 i ono će izdvojiti SVG tako da možete urediti ikonu koja postoji samo unutar stilske tablice. Zbroj pokazuje ulaznu veličinu, izlaznu veličinu i postotak promjene, tako da možete na prvi pogled vidjeti je li kodiranje smanjilo ili povećalo ikonu. URI može doći i zamotan u HTML oznaku <img> ili <link>, s izričitim skupom znakova u zaglavlju.

Sve radi u vašem pregledniku. Vaše SVG oznake se nikada ne učitavaju, tako da možete kodirati privatne ikone, logotipe i interna sredstva bez da napuste vaš uređaj.

FAQ

Zašto koristiti URL kodiranje umjesto base64 za SVG?
SVG kodiran URL-om obično je manji od base64 i ostaje čitljiv, tako da je vaš CSS lakši i još uvijek možete vidjeti oznake. Base64 se također nudi za alate koji to zahtijevaju.
Koji izlazni oblici postoje?
Četiri: CSS pravilo, goli podatkovni URI, HTML oznaka <img> i HTML oznaka <link> — rel=icon za SVG, rel=stylesheet za CSS. Postotno ili Base64 kodiranje vrijedi za sva četiri, a opcija skupa znakova upisuje charset u zaglavlje.
Mogu li URI podataka vratiti u SVG?
Da. Postavite smjer za dekodiranje i lijepljenje CSS pravila, URI golih podataka ili base64; alat izvlači i vraća izvornu SVG oznaku.
Zašto moj unos mora započeti sa <svg?
Kodiranje provjerava izgleda li unos kao SVG, tako da zalutalo lijepljenje ne postane pokvareni URI podataka. Prihvaća se oznaka koja počinje s <svg ili <?xml.
Je li moj SVG igdje učitan?
Ne. Konverzija se u potpunosti izvodi u vašem pregledniku i vaša oznaka nikada ne napušta vaš uređaj.