SVG-vektori (.svg)
W3C StandardiScalable Vector Graphics (SVG) on XML-pohjainen vektorikuvamuoto kaksiulotteiselle grafiikalle, joka tukee interaktiivisuutta, CSS-muotoilua ja animaatioita.
Muunna tiedostot muodosta SVG muotoon PNG
Ilmainen selaimessa toimiva muunnin, jolla voit muuntaa tiedostoja muodosta SVG muotoon PNG. Muunna tiedostot hetkessä laitteellasi.
Pakkaa SVG verkossa
Yksityisesti - tiedostot eivät koskaan poistu laitteeltasi
Tarkastele tiedostoa ja sen metatietoja
Käyttöjärjestelmät ja tiedostoanalyysaattorit tunnistavat SVG-tiedostot tarkistamalla tiedoston alun binäärisarjan:
Otsaketunniste tavutasolla (tunnistetavut)
Käyttöjärjestelmät ja tiedostoanalyysaattorit tunnistavat SVG-tiedostot tarkistamalla tiedoston alun binäärisarjan:
HEKSADEKSIMAALINEN TUNNISTE (SIJAINTI 0):
3C 73 76 67ASCII-ESITYSTAPA: <svg
Standardointi: W3C Recommendation (SVG 1.1 / SVG 2)
Tekniset tiedot
| Säiliöarkkitehtuuri | XML-pohjainen tekstimerkintäasiakirja, joka määrittää kaksiulotteisen vektorigeometrian |
| Pakkaus | Gzip- / Brotli-tekstipakkaus (SVGZ käyttää gzip-pakkausta) |
| Tavujärjestys (Endianness) | Ei sovellettavissa (tekstipohjainen UTF-8- / UTF-16-merkkivirta) |
| Väriavaruudet | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Kanavat ja rakenne | Rajattoman tarkkuuden vektorimuodot, bezier-käyrät, typografia ja peittävyysmaskit |
| Suurimmat mitat | Resoluutiosta riippumaton (skaalautuu äärettömästi mille tahansa näkymäalueelle ilman pikselöintiä) |
| Läpinäkyvyys | Täysi muuttuva alpha-läpinäkyvyys ja CSS-sekoitustilat |
| Suoratoisto ja progressiivinen lataus | Selaimen XML-jäsennin tukee progressiivista tekstivirran jäsennystä |
Tekninen vertailumatriisi: SVG vs. kilpailijat
| Tekninen attribuutti | SVG (Nykyinen) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Renderöintimalli | Säilytetyn tilan vektori-DOM | Välittömän tilan bittikarttakangas | Säilytetyn tilan kiinteä sivusäiliö | Rasteripikseliruudukko |
| Muotoilu ja CSS | Täysin muotoiltavissa CSS-luokkien ja -muuttujien kautta | Vaatii JavaScript Canvas API -uudelleenpiirtoja | Ei dynaamista CSS-muotoilua | Kiinteät rasteripikselit |
| Ääretön skaalautuvuus | Kyllä (matemaattiset vektorikäyrät) | Vaatii manuaalisen resoluution skaalauksen | Kyllä (vektorielementit) | Ei (pikselöityy suurennettaessa) |
| Interaktiivisuus | Natiivit DOM-tapahtumat (osoitus, napsautus, animaatiot) | Vaatii manuaalisen osumantunnistusmatematiikan | Staattinen asiakirja | Vaatii kuvakartan tai canvas-elementin |
Yleiset vioittumistavat ja heksadesimaalinen palautusopas
Selain näyttää XML-jäsennysvirheen: sulkeutumaton tunniste tai ristiriitaiset tunnisteet.
Perussyy: Virheellinen XML-syntaksi, puuttuvat lopputunnisteet tai koodaamattomat et-merkit ('&' merkinnän '&' sijaan).
Korjaus: Validoi XML-tarkistimella (xmllint file.svg) ja korjaa virheellisesti pareitetut tunnisteet.
Tietoturva-analyysi ja tiedostojäsentimien hyökkäysvektorit
Koska SVG on suoritettavaa XML:ää, joka tukee '<script>'-tageja ja ulkoisia entiteettejä, se aiheuttaa merkittäviä XSS- ja SSRF-riskejä, jos epäluotettavia SVG-tiedostoja näytetään.
Tunnetut hyökkäysvektorit
- Tallennettu sivustojenvälinen komentosarjahyökkäys (XSS) upotettujen '<script>'-tagien tai 'onload='-tapahtumankäsittelijöiden kautta.
- XML External Entity (XXE) -hyökkäykset, jotka lukevat paikallisia palvelintiedostoja, kun niitä jäsennetään taustajärjestelmäpalvelimilla.
- Billion Laughs -XML-entiteetin laajeneminen aiheuttaa palvelunestohyökkäyksen.
Tietoturvan parhaat käytännöt: Puhdista SVG-tiedostot aina DOMPurifylla ennen upottamista. Voit myös tarjota ne Content-Security-Policy-otsakkeella, jonka sääntö on default-src 'none', tai <img>-tunnisteella, joka poistaa skriptit käytöstä automaattisesti.
Historia ja virstanpylväät
Tärkeimmät edut
- Ääretön resoluution riippumattomuus: terävät viivat ja typografia millä tahansa näyttö- tai tulostusskaalalla.
- Erittäin pieni tiedostokoko logoille, kuvakkeille ja käyttöliittymäelementeille.
- Täysin skriptattavissa ja muotoiltavissa CSS:n ja JavaScriptin avulla selaimen DOM:issa.
Tekniset rajoitukset
- Ei sovellu valokuville tai monimutkaisille jatkuvasävyisille kuville.
- Monimutkaiset vektoripolut, joissa on tuhansia solmuja, voivat aiheuttaa suorittimen renderöintiviivettä ja suurta akunkulutusta.
- XML-luonne mahdollistaa upotetut skriptit, mikä vaatii tiukkaa puhdistusta ennen epäluotettavien latausten renderöintiä.
Mielenkiintoisia teknisiä faktoja
- Gzip-pakkaus voi pienentää joidenkin SVG-tiedostojen kokoa huomattavasti. Pienennys riippuu dokumentin sisällöstä ja pakkausasetuksista.
- viewBox-attribuutti määrittää abstraktin koordinaattikankaan, joka vastaa dynaamisesti fyysisiä näytön pikseleitä.
- Varhaisilta verkkoselaimilta puuttui aluksi natiivit SVG-moottorit, minkä vuoksi Adobe jakoi Adobe SVG Viewer -selainlaajennusta ennen kuin natiivi selaintuki vakiintui vuoden 2011 tienoilla.
Usein kysytyt tekniset kysymykset
Voivatko SVG-tiedostot sisältää haitallista koodia?
Kyllä. Koska SVG on kelvollista XML:ää, se voi sisältää upotettua JavaScriptiä ('<script>'), joka suoritetaan, jos SVG ladataan suoraan selaimeen tai avataan upotetussa '<svg>'-elementissä. SVG-tiedostojen tarjoileminen '<img>'-tagin kautta neutraloi automaattisesti skriptien suorituksen.
Milloin minun tulisi käyttää SVG:tä PNG:n sijaan?
Käytä SVG:tä kuvakkeille, logoille, kaavioille, piirroksille ja typografialle, joissa vaaditaan terävää skaalautuvuutta kaikilla näyttöko’oilla ja pieniä tiedostokokoja. Käytä valokuville PNG:tä tai WebP:tä.
Miten voin optimoida suuria tai monimutkaisia SVG-tiedostoja?
Voit puhdistaa vektoripolkuja poistamalla tarpeettomat metatiedot, editorikommentit (Inkscapesta tai Illustratorista), näkymättömät ryhmät ja käyttämättömät nimiavaruusmääritykset työkaluilla, kuten SVGO, tai suorittamalla SVG-pakkauksen.
Aiheeseen liittyvät SVG-muunnosparit
SVG-vektoritiedostojen muuntaminen PNG-rasterikuviksi muuttaa skaalautuvat koodipohjaiset grafiikat kiinteiksi pikseliruudukoiksi yleisen sovellusyhteensopivuuden takaamiseksi.
Upota rasterimuotoiset PNG-kuvat SVG-XML-vektorisäiliöön responsiivista verkkoskaalausta ja vektoriyhteensopivaa asettelua varten.
Muunna vanhat 16-bittiset Windows GDI -vektoripiirrostietueet nykyaikaisiksi, skaalautuviksi SVG-poluiksi ilman resoluution menetystä.
Muunna 32-bittiset Windows Enhanced Metafile -grafiikat puhtaiksi, responsiivisiksi SVG-vektoreiksi verkko- ja suunnitteluohjelmistoja varten.
DXF-piirustuksen muuntaminen CAD SVG -vientimuotoon muuttaa monimutkaiset tekniset vektoritiedot kevyiksi XML-grafiikoiksi verkkoselaimia ja vektorigrafiikan muokkausohjelmia varten.
Skaalautuvan vektorigrafiikan muuntaminen piirustustenvaihtomuotoon kääntää verkkovalmiit visuaaliset vektorit tietokoneavusteisen suunnittelun ohjelmistojen vaatimiksi tarkoiksi matemaattisiksi koordinaateiksi.
Jaa SVG-logo tai -kuvitus yksisivuisena PDF-tiedostona. Sen skaalautuvista poluista tulee kiinteän resoluution kuva, joten lähentäminen ei tuo vektoriyksityiskohtia takaisin.