Näin avataan SVG-tiedosto: tietokone, puhelin ja selain

1. Neljä tapaa avata SVG tietokoneella

• Selain (helpoin): vedä SVG-tiedosto Chromen, Edgen, Firefoxin tai Safarin ikkunaan, jolloin se näytetään; voit myös napsauttaa tiedostoa hiiren oikealla, valita ”Avaa sovelluksella” ja valita selaimen;
• Aseta oletusohjelma: jos käsittelet SVG:tä usein, liitä .svg-tiedostot selaimeen tai suunnitteluohjelmaan, jolloin kaksoisnapsautus avaa ne suoraan;
• Suunnitteluohjelma: Illustrator, Figma ja ilmainen Inkscape avaavat ja muokkaavat SVG:tä, mikä sopii perusteellisempaan työhön;
• Koodieditori: SVG on käytännössä XML-tekstiä, joten VS Codessa näet ja muokkaat lähdekoodia, mikä helpottaa ongelmien ratkaisua huomattavasti.

Oletusohjelman asetus käytännössä: Windowsissa napsauta SVG-tiedostoa hiiren oikealla, valitse ”Avaa sovelluksella → Valitse toinen sovellus” ja rastita ”Käytä tätä sovellusta aina”; macOS:ssa napsauta hiiren oikealla, valitse ”Tiedot”, valitse kohdassa ”Avaa sovelluksella” haluamasi selain ja napsauta ”Muuta kaikki”, minkä jälkeen kaksoisnapsautus esikatselee tiedoston suoraan.

2. Näin avataan SVG puhelimella

Android: osa tiedostonhallintaohjelmista ei esikatsele SVG:tä suoraan – paina tiedostoa pitkään, valitse ”Avaa sovelluksella” ja valitse selain. iPhone: tallenna SVG Tiedostot-sovellukseen, jossa uudemmat järjestelmät esikatselevat sen suoraan; jos kuvaa ei näy, jaa se ja avaa Safari:ssa. WeChatin tai QQ:n kautta saadut SVG:t ovat tavallisia tiedostoja, ja valitsemalla ”Avaa sovelluksella” selaimen ne näkyvät oikein.

Kaiken kaikkiaan mobiiliselain on luotettavin SVG-katseluohjelma, eikä mitään lisäsovellusta tarvita. Tabletit toimivat samalla tavalla: avaa tiedosto laitteen omalla selaimella, erillistä katseluohjelmaa ei tarvita.

3. Mitä tehdä, kun kaksoisnapsautus näyttää koodia tai tyhjän ruudun

Näkyy koko koodi: tiedosto on liitetty Muistiinpanot-sovellukseen tai muuhun tekstieditoriin. SVG on tekstiä, joten tämä on normaalia – avaa se selaimessa, niin graafikko näkyy. Tyhjä ruutu: tarkista ensin, onko tiedosto ehjä – avaa se koodieditorissa, kelvollinen SVG alkaa <svg>-tagilla tai <?xml-määrityksellä; jos näet <html>-koodia, tallennat todennäköisesti virhesivun .svg-muodossa latauksen yhteydessä ja tiedosto pitää ladata uudelleen. Jos tiedosto viittaa ulkoisiin kuviin tai fontteihin, puuttuvat resurssit jättävät sisällön vajaaksi.

Yksi lisähuomio: SVG on tekstimuoto, joka voi sisältää skriptejä, joten tuntemattomista lähteistä peräisin olevia tiedostoja ei pidä avata suoraan selaimessa. Tarkista ne ensin koodieditorissa, varmista, että tiedosto alkaa svg-tägillä eikä sisällä epäilyttävää skriptiä, ja esikatsele vasta sitten.

4. Haluatko muokata avattua tiedostoa? Käytä verkkopohjaista editoria

Jos haluat vain vaihtaa väriä, poistaa taustan tai poistaa muutaman elementin, ei tarvita raskasta ohjelmaa. Avaa PolySVG:n verkkopohjainen SVG-editori (suora linkki: /editor), lataa tiedosto, ja voit napsauttaa polkuja poistaaksesi ne, poistaa taustan yhdellä napsautuksella, vaihtaa värejä, maalata, pyyhkiä, kumota ja tehdä uudelleen milloin tahansa ja lopuksi viedä SVG:n tai PNG:n. Ilmainen, ei asennusta eikä rekisteröitymistä.

5. Haluatko vain katsota? Muuntaminen PNG:ksi on helpointa

Jos vastaanottajan laite ei avaa SVG:tä, yksinkertaisin ratkaisu on muuntaa se PNG:ksi: vie PNG editorista tai tee kuvakaappaus selaimessa. Jos haluat ymmärtää itse SVG-muotoa, lue Mikä on SVG; jos sinulla on rasteri, jonka haluat muuttaa SVG:ksi, Kuva → SVG -työkalu tekee sen muutamalla askeleella.

Jos olet kehittäjä, voit upottaa SVG:n suoraan HTML:ään tai viitata siihen img-tunnisteella, jolloin selain piirtää sen välittömästi – näin SVG:tä katsotaan verkossa yleensä.