Lataat sivustollesi SVG-kuvakkeen, ja WordPress kieltäytyy hiljaisesti hyväksymästä sitä. Kuulostaako tutulta? Oletuksena moottori estää .svg-tiedostot tietoturvasyistä, ja yritys ladata logo mediakirjastoon tuottaa virheen "Tätä tiedostotyyppiä ei sallita."

Ongelma ei ole viallinen asennus tai tiedosto-oikeudet. WordPress sulkee SVGn tarkoituksella sallittujen listalta, koska tiedoston XML-rakenne voi sisältää haitallista koodia. Vektorigrafiikasta ei kuitenkaan tarvitse luopua: alla on kolme turvallista tapaa ladata SVG vaarantamatta sivustoasi.

💡 Nopea yleiskatsaus:

• Opi, mikä SVG on ja miksi WordPress estää sen
• Valitse yksi kolmesta turvallisesta lisäosasta lataamista varten
• Määritä lisäosa tarpeisiisi muutamassa minuutissa
• Vertaile ominaisuuksia ja saat lopullisen suosituksen

Mikä SVG on ja miten se eroaa JPEG:stä ja PNG:stä

SVG (Scalable Vector Graphics) on XML-pohjainen vektorimuoto. Toisin kuin pikseleistä koostuvat rasterimuodot JPEG ja PNG, SVG kuvaa kuvia matemaattisesti viivojen, käyrien ja muotojen avulla. Tuloksena on kuva, joka pysyy terävänä 4K-näytöllä tai seinän kokoisessa mainosbannerissa.

Sivuston omistajalle tämä tarkoittaa kolmea asiaa. Ensinnäkin logosi ja kuvakkeesi näyttävät yhtä teräviltä millä tahansa laitteella puhelimesta pöytäkoneen näyttöön. Toiseksi .svg-tiedosto painaa moninkertaisesti vähemmän kuin vastaava PNG: tyypillinen kuvake vie 1-3 kt 15-30 kt:n sijaan. Kolmanneksi SVG:tä voi animoida CSS:n ja JavaScriptin avulla ilman kolmannen osapuolen kirjastoja.

Mutta on olemassa haittapuoli. Selain lukee XML-rakenteen koodina, ja hyökkääjä voi upottaa tiedostoon skriptin. Juuri tästä syystä WordPress ei sisällytä SVG:tä sallittujen formaattien listalle vakiona. Kun yrität ladata sellaisen, näet saman virheen kuin yllä olevassa kuvakaappauksessa.

SVG-tietoturva: mitä sinun tulee tietää ennen lataamista

.svg-tiedosto on tekstitiedosto, joka sisältää tageja kuten <svg>, <path> ja <circle>. Selain jäsentää sen lähes kuin HTML:n. Jos tiedoston sisään on piilotettu <script>-tagi tai onload-käsittelijä, selain suorittaa tuon koodin. Tätä kutsutaan tallennetuksi XSS:ksi: haitallinen skripti tallennetaan palvelimelle ja se laukeaa aina, kun kävijä avaa sivun.

Käytännössä massahyökkäyksiä SVG:n kautta WordPressiin ei ole kirjattu; haavoittuvuus tunnetaan, ja kehittäjät oppivat jo kauan sitten sulkemaan sen. Nykyaikaiset SVG-lisäosat ajavat ladatun tiedoston sanitointikirjaston läpi: tämä kirjasto poistaa kaikki vaaralliset tagit ja attribuutit jättäen jäljelle vain "puhdasta" grafiikkaa.

Sääntö on yksinkertainen: älä koskaan lataa SVG:tä epäluotettavista lähteistä. Jos tiedosto on suunnittelijasi tekemä tai ladattu viralliselta kuvakesivustolta, riskit ovat minimaaliset. Jos tiedosto tuli tuntemattomalta asiakkaalta sähköpostitse, avaa se ensin tekstieditorissa ja varmista, ettei sisällä ole <script>-tageja tai on*-attribuutteja.

Alla on kolme lisäosaa, jotka ratkaisevat SVG-latausongelman eri tasoisilla hallinta- ja asetusmahdollisuuksilla.

Tapa 1: SVG Support, maksimaaliset ominaisuudet

SVG Support on suosituin lisäosa vektorigrafiikan lataamiseen WordPressiin. Yli miljoona aktiivista asennusta, 4,5 arvosana WordPress.orgissa ja johdonmukaiset päivitykset (viimeisin toukokuussa 2026) puhuvat puolestaan.

Asennus on vakio: Lisäosat → Lisää uusi, kirjoita hakupalkkiin "SVG Support", napsauta Asenna nyt ja sitten Ota käyttöön. Aktivoinnin jälkeen siirry kohtaan Asetukset → SVG Support.

Pääasetus, joka sinun tulisi ottaa käyttöön heti, on Rajoita ylläpitäjiin. Se estää kaikkia muita paitsi ylläpitäjiä lataamasta SVG:tä. Jos olet ainoa sivustoa hallinnoiva henkilö, tämä valintaruutu suojaa vaarallisen tiedoston vahingossa tapahtuvalta lataukselta, jonka voisi tehdä toimittaja tai SEO-asiantuntija.

Edistynyt tila mahdollistaa CSS-animaation ja SVG:n inline-renderöinnin. Tarvitset tätä, jos aiot animoida kuvakkeita tai muuttaa niiden väriä teematyylien kautta. Ilman tätä valintaruutua lisäosa poistaa automaattisesti mahdollisesti vaaralliset attribuutit, ja animaatio saattaa hajota.

SVG Support osaa myös kääriä ladatut tiedostot <img>-tagiin oikeilla mitoilla; tällä on merkitystä Core Web Vitals -mittareille, koska selain varaa kuvalle tilan ennen sen latautumista eikä sivu "hypi".

• Hyvät puolet: hienojakoinen käyttöoikeuksien hallinta, edistynyt tila animaatioille, automaattinen kuvan mitoitus, säännölliset päivitykset
• Huonot puolet: asetukset saatavilla vain erillisellä välilehdellä (ei integraatiota mediakirjastoon)
• Hinta: ilmainen
• Lataa: 🔗 SVG Support WordPress.orgissa

Tapa 2: Safe SVG, minimalismia 10up-tiimiltä

Safe SVG on toimisto 10upin kehittämä; nämä ovat tekijöitä, joihin Microsoft, Adobe ja The White House luottavat. Ja se on paras suositus, jonka tietoturvalisäosa voi saada.

Toisin kuin SVG Support, Safe SVG ei vaadi määrityksiä. Asenna, aktivoi, ja olet valmis; voit alkaa ladata SVG:tä. Lisäosa käyttää samaa sanitointikirjastoa kuin WordPress-ydin (enshrined/svg-sanitize) ja ajaa jokaisen tiedoston sen läpi lataushetkellä. Ei ylimääräisiä käyttöliittymiä, ei asetuksia; se vain toimii.

Safe SVG sallii SVG-lataukset kaikille käyttäjille, joilla on upload_files-oikeus. Jos sivustollasi on useita kirjoittajia, sinun tulisi lisäksi rajoittaa ryhmää esimerkiksi roolienhallintalisäosan kautta. Mutta yksin toimivalle ylläpitäjälle tämä on yksinkertaisin ja turvallisin polku.

Lisäosa on ollut olemassa vuosia, sillä on yli miljoona aktiivista asennusta ja 4,4 arvosana. Sitä päivitetään harvemmin kuin SVG Supportia (viimeisin huhtikuussa 2026), mutta se on itse asiassa merkki vakaudesta: ei ole mitään, mikä voisi hajota.

• Hyvät puolet: ei vaadi määrityksiä, toimii suoraan paketista, sanitointi WordPress-ydintasolla, kehittäjällä moitteeton maine
• Huonot puolet: ei käyttöoikeuksien hallinta-asetuksia, ei edistynyttä tilaa animaatioille, ei inline-renderöintiä
• Hinta: ilmainen
• Lataa: 🔗 Safe SVG WordPress.orgissa

Tapa 3: WP SVG Images, sanitointi ja roolien hallinta

WP SVG Images on ShortPixel -tiimin kehittämä, jotka tunnetaan kuvanoptimointityökaluistaan. Lisäosa asettuu SVG Supportin ja Safe SVG:n välimaastoon: rooliasetukset ovat läsnä, mutta turhia näyttöjä ei ole.

Aktivoinnin jälkeen lisäosa sallii välittömästi SVG-lataukset kaikille ylläpitäjille ja toimittajille. Kohdassa Asetukset → WP SVG Images voit hienosäätää, mitkä roolit saavat ladata, ja ottaa sanitoinnin käyttöön erikseen kullekin roolille. Esimerkiksi: ylläpitäjät lataavat ilman tarkistuksia, toimittajat lataavat pakollisella sanitoinnilla, kirjoittajat eivät voi ladata lainkaan.

Lisäetu on SVG-esikatselu suoraan mediakirjastossa. Vakio-WordPress näyttää paikkamerkkikuvakkeen vektoritiedoston sijaan. WP SVG Images renderöi pikkukuvan, joten näet tarkalleen, mitä latasit, avaamatta tiedostoa uuteen välilehteen.

Lisäosa tarjoaa myös suodattimia kehittäjille: WPSVG_setAllowedTags ja WPSVG_setAllowedAttrs antavat sinun lisätä mukautettuja tageja ja attribuutteja sanitointilaitteen sallittujen listalle.

• Hyvät puolet: SVG-esikatselu mediakirjastossa, joustavat sanitointiasetukset rooleittain, suodattimet kehittäjille, aktiivinen tuki
• Huonot puolet: ei edistynyttä animaatiotilaa, vaatii PHP 5.6.40+
• Hinta: ilmainen
• Lataa: 🔗 WP SVG Images WordPress.orgissa

Vertailutaulukko: mikä lisäosa valita

Kaikki kolme lisäosaa ovat ilmaisia ja käyttävät testattuja sanitointikirjastoja. SVG Support on valinta niille, jotka tarvitsevat animaatiota ja maksimaalista hallintaa. Safe SVG on niille, jotka arvostavat yksinkertaisuutta eivätkä halua koskea asetuksiin. WP SVG Images on kompromissi, jossa on kätevä esikatselu ja joustava käyttöoikeuksien jako.

Kuinka asentaa SVG-lisäosa ja ladata tiedosto: vaihe vaiheelta

Riippumatta siitä, minkä lisäosan valitset, asennusprosessi on sama:

Vaihe 1. Siirry WordPress-hallintapaneelissa kohtaan Lisäosat → Lisää uusi.

Vaihe 2. Kirjoita hakupalkkiin lisäosan nimi: SVG Support, Safe SVG tai WP SVG Images.

Vaihe 3. Napsauta halutun lisäosan kortissa Asenna nyt ja sitten Ota käyttöön.

Vaihe 4. Jos lisäosassa on asetuksia (SVG Support tai WP SVG Images), siirry vastaavalle välilehdelle ja ota roolirajoitukset käyttöön. Safe SVG:n kohdalla tätä vaihetta ei tarvita.

Vaihe 5. Avaa artikkeli- tai sivueditori. Kuvablokissa napsauta "Lataa"; .svg-muoto on nyt sallittujen listalla.

Ennen SVG-tiedoston lataamista varmista, että luotat sen lähteeseen. Käytä mieluiten suunnittelijasi Illustratorissa, Figmassa tai Inkscapessa luomia tiedostoja. Jos sait SVG:n kolmannen osapuolen urakoitsijalta, avaa se Muistiossa ja silmäile nopeasti: sisällä ei saisi olla <script>- tai onload=-merkintöjä.

Käytännössä kolmen sekunnin manuaalinen tarkistus yhdistettynä lisäosan sanitointiin antaa kaksinkertaisen turvamarginaalin. Vuosien WordPress-työskentelyn aikana emme ole kohdanneet yhtäkään todellista tapausta SVG:n kautta tapahtuneesta väärinkäytöstä millään kolmesta kuvatusta lisäosasta ladattuna.

Jos pidät enemmän videomuodosta, yllä oleva pätkä näyttää koko prosessin lisäosan asennuksesta SVG:n lisäämiseen sivulle.

⁉️🤔 Usein kysytyt kysymykset

Voinko ladata SVG:n ilman lisäosaa?

Lisää koodinpätkä upload_mimes-suodattimella, joka rekisteröi MIME-tyypin image/svg+xml. Emme kuitenkaan suosittele tätä lähestymistapaa: ilman sanitointilaitetta altistat sivustosi tallennetulle XSS:lle. Lisäosa ratkaisee tietoturvaongelman automaattisesti; pari napsautusta vastaan mahdollinen aukko puolustuksessasi.

Miksi Enable SVG -lisäosa ei ole enää saatavilla?

Syy: "Tekijän pyyntö." Lisäosaa ei päivitetty 4 vuoteen, ja se on poistettu pysyvästi WordPress.orgista. Jos sinulla on se asennettuna, korvaa se jollakin yllä olevista kolmesta lisäosasta. Niitä ylläpidetään aktiivisesti ja ne ovat yhteensopivia WordPress 7.0:n kanssa.

Kuinka varmistan, että ladattu SVG on turvallinen?

Turvallinen SVG koostuu graafisista peruselementeistä, kuten svg, g ja path. Puhdas tiedosto ei sisällä script- tai foreignObject-elementtejä eikä onload- tai onclick-attribuutteja. Kaikki kolme tämän artikkelin lisäosaa poistavat automaattisesti vaaralliset elementit latauksen aikana.

Kumpi formaatti on parempi logolle, SVG vai PNG?

SVG on oikea valinta useimmille sivustoille. Vektorilogo vie vain muutaman kilotavun, ei sumene retina-näytöillä ja voi vaihtaa väriä CSS:n avulla. PNG:tä tarvitaan vain, jos logo sisältää valokuvan tai monimutkaisen liukuvärin, joka renderöityy huonosti vektorina.

WP SVG Images vai Safe SVG: kumpi on luotettavampi?

Ero on käyttömukavuudessa. Safe SVG on "asenna ja unohda" -ratkaisu huipputoimistolta. WP SVG Images tarjoaa esikatselut mediakirjastossa ja yksilölliset rooliasetukset. Tietoturvan kannalta ne ovat samanarvoisia.

Yhteenveto: mitä asentaa vuonna 2026

Kaikki kolme lisäosaa ratkaisevat turvallisen SVG-latauksen tehtävän; valinta riippuu käyttötapauksestasi.

Tarvitsetko vektorikuvakkeiden animaatiota ja inline-renderöintiä? Valitse SVG Support; se on ainoa lisäosa, jossa on edistynyt tila.

Haluatko vain ladata logon ja unohtaa ongelman? Safe SVG on vaihtoehtosi. Asenna, aktivoi, valmis.

Tarvitsetko mediakirjaston esikatseluja ja hienojakoista käyttöoikeuksien hallintaa tiimillesi? Valitse WP SVG Images; ShortPixel teki kätevän työkalun, jolla on paras arvosana SVG-lisäosien joukossa.

Lyhyesti: asenna Safe SVG minimalismiin tai SVG Support täyteen hallintaan. Molemmat vaihtoehdot ovat ilmaisia ja testattuja miljoonilla sivustoilla. Ja mikä tärkeintä, minkä tahansa kolmesta lisäosasta asentamisen jälkeen "tiedostotyyppiä ei sallita" -virhe katoaa lopullisesti.