SVG vektorska grafika (.svg)
Preporuka StandardSkalabilna vektorska grafika (SVG) je vektorski format slike zasnovan na XML-u za dvodimenzionalnu grafiku sa podrškom za interaktivnost, CSS stilizovanje i animaciju.
Konvertujte SVG u PNG
Besplatan konvertor SVG u PNG u pregledaču. Konvertujte datoteke odmah na svom uređaju.
Kompresujte SVG na mreži
Privatno - datoteke nikada ne napuštaju vaš uređaj
Pregled i metapodaci
Operativni sistemi i analizatori datoteka identifikuju SVG datoteke proverom početnog binarnog niza bajtova:
Potpis zaglavlja na nivou bajtova (magični bajtovi)
Operativni sistemi i analizatori datoteka identifikuju SVG datoteke proverom početnog binarnog niza bajtova:
HEKSADECIMALNI POTPIS (OFFSET 0):
3C 73 76 67ASCII REPREZENTACIJA: <svg
Standardizacija: Preporuka W3C (SVG 1.1 / SVG 2)
Tehničke specifikacije
| Arhitektura kontejnera | XML tekstualni dokument sa tekstualnim oznakama koji definiše 2D vektorsku geometriju |
| Kompresija | Gzip / Brotli tekstualna kompresija (SVGZ koristi gzip kompresiju) |
| Bajtni redosled (Endianness) | Nije primenjivo (tekstualni UTF-8 / UTF-16 tok karaktera) |
| Prostori boja | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Kanali i struktura | Neograničena rezolucija vektorskih oblika, Bezijeove krive, tipografija i maske providnosti |
| Maksimalne dimenzije | Nezavisno od rezolucije (skalira se beskonačno na bilo koji prikazni okvir bez pikselizacije) |
| Transparentnost | Potpuna promenljiva alfa providnost i CSS režimi mešanja |
| Strimovanje i progresivno učitavanje | Progresivno parsiranje tekstualnog toka koje podržava XML parser u pretraživaču |
Tehnička matrica poređenja: SVG u odnosu na konkurente
| Tehnički atribut | SVG (Trenutno) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Model renderovanja | Vektorski DOM u režimu zadržavanja | Rastersko platno u neposrednom režimu | Kontejner fiksne stranice u režimu zadržavanja | Rasterska mreža piksela |
| Stilizovanje i CSS | U potpunosti se može stilizovati preko CSS klasa i promenljivih | Zahteva iscrtavanje putem JavaScript canvas API-ja | Nema dinamičkog CSS stilizovanja | Fiksni rasterski pikseli |
| Beskonačna skalabilnost | Da (matematičke vektorske krive) | Zahteva ručno skaliranje rezolucije | Da (vektorski elementi) | Ne (pikselizuje se pri uvećanju) |
| Interaktivnost | Izvorni DOM događaji (prelazak pokazivačem miša, klik, animacije) | Zahteva ručno matematičko određivanje pogodaka | Statički dokument | Zahteva mapu slike ili platno |
Uobičajeni režimi oštećenja i vodič za heksadecimalni oporavak
Pretraživač prikazuje grešku pri parsiranju XML-a: nezatvoreni token ili nepodudarna oznaka.
Osnovni uzrok: Neispravna XML sintaksa, nedostajuće zatvorene oznake ili neescapovani ampersandi ('&' umesto '&').
Oporavak: Proverite ispravnost pomoću XML lint alata (xmllint file.svg) i ispravite neuravnotežene oznake.
Bezbednosna analiza i vektori napada parsera
Pošto je SVG izvršni XML koji podržava '<script>' oznake i spoljne entitete, on predstavlja značajan rizik od XSS-a i SSRF-a ako se prikazuju nepouzdani SVG-ovi.
Poznati vektori napada
- Uskladišteni Cross-Site Scripting (XSS) preko ugrađenih '<script>' oznaka ili 'onload=' rukovaoca događajima.
- XML External Entity (XXE) napadi koji čitaju lokalne serverske datoteke kada se parsiraju na pozadinskim serverima.
- Ekspanzija XML entiteta Billion Laughs koja uzrokuje uskraćivanje usluge (DoS).
Najbolje prakse za zaštitu: Uvek sanitizujte SVG-ove koristeći DOMPurify pre ugrađivanja, ili servirajte SVG-ove sa 'Content-Security-Policy: default-src 'none'' ili kao '<img>' oznake koje automatski onemogućavaju skripte.
Istorijat i prekretnice
Ključne prednosti
- Beskonačna nezavisnost od rezolucije: oštre linije i tipografija na bilo kom ekranu ili skali štampanja.
- Izuzetno mala veličina datoteke za logotipe, ikone i elemente korisničkog interfejsa.
- U potpunosti podložno skriptovanju i stilizovanju putem CSS-a i JavaScript-a unutar DOM-a pretraživača.
Tehnička ograničenja i nedostaci
- Neprikladno za fotografije ili složene slike sa kontinuiranim tonovima.
- Složene vektorske putanje sa hiljadama čvorova mogu izazvati usporeno iscrtavanje na procesoru i veliko trošenje baterije.
- Priroda XML-a omogućava ugrađeno skriptovanje, što zahteva strogu sanitizaciju pre renderovanja nepouzdanih otpremljenih datoteka.
Zanimljivosti
- Pošto je SVG običan XML tekst, kompresija pomoću Gzip-a (čime se dobija .svgz datoteka) često smanjuje veličinu za 70% - 80%.
- Atribut viewBox definiše apstraktno platno koordinata koje se dinamički preslikava na fizičke piksele ekrana.
- Rani veb pretraživači u početku nisu imali ugrađenu podršku za SVG, što je navelo Adobe da distribuira dodatak za pretraživač Adobe SVG Viewer pre nego što se izvorna podrška pretraživača učvrstila oko 2011. godine.
Često postavljana tehnička pitanja
Mogu li SVG datoteke sadržati zlonamerni kod?
Da. Pošto je SVG važeći XML, može sadržati ugrađeni JavaScript ('<script>') koji se izvršava ako se SVG učita direktno u pretraživaču ili otvori u ugrađenom '<svg>' elementu. Serviranje SVG-ova preko '<img>' oznake automatski neutrališe izvršavanje skripti.
Kada treba da koristim SVG umesto PNG-a?
Koristite SVG za ikone, logotipe, grafikone, ilustracije i tipografiju kada su potrebni oštri prikazi pri skaliranju na svim veličinama ekrana i male datoteke. Koristite PNG ili WebP za fotografije.
Kako mogu da optimizujem velike ili složene SVG datoteke?
Možete očistiti vektorske putanje uklanjanjem suvišnih metapodataka, komentara uređivača (iz Inkscape-a ili Illustrator-a), nevidljivih grupa i neiskorišćenih deklaracija imenskog prostora pomoću alata kao što je SVGO ili pokretanjem SVG kompresije.
Povezani parovi konverzije za SVG
Konvertovanjem SVG vektorskih datoteka u PNG rasterske slike skalabilna grafika zasnovana na kodu pretvara se u mrežu fiksnih piksela radi univerzalne kompatibilnosti sa aplikacijama.
Ugradite rasterske PNG slike unutar SVG XML vektorskog kontejnera radi prilagodljivog skaliranja na vebu i integracije u rasporede kompatibilne sa vektorima.
Kompilirajte stare 16-bitne Windows GDI zapise vektorskog crtanja u moderne, skalabilne SVG putanje bez gubitka rezolucije.
Konvertujte 32-bitnu grafiku Windows Enhanced Metafile formata u čiste, prilagodljive SVG vektore za veb i softver za dizajn.
Konverzija DXF crteža u CAD SVG izvoz pretvara složene inženjerske vektorske podatke u lagane XML grafike za veb-pregledače i vektorske uređivače.
Konverzija skalabilne vektorske grafike u format za razmenu crteža prevodi vizuelne vektore spremne za veb u precizne matematičke koordinate koje zahteva softver za računarski podržano projektovanje.
Podelite SVG logotip ili ilustraciju kao jednostranični PDF. Njegove skalabilne putanje pretvaraju se u sliku fiksne rezolucije, pa uvećanjem nije moguće povratiti vektorske detalje.