Etusivu » Oppaat » SVG-tiedoston lisääminen WordPress-sivustolle

SVG-tiedoston lisääminen WordPress-sivustolle

Oppaat

Mikä on SVG-tiedosto?

SVG-tiedosto (Scalable Vector Graphics) on XML-pohjainen vektorigrafiikan tiedostomuoto, joka mahdollistaa graafisten elementtien kuvaamisen matemaattisina käyrinä ja muotoina. Tämä tarkoittaa sitä, että SVG-tiedosto osaa katsoa miten graafiset elementit tulee piirtää ja asettaa sijaintinsa suhteessa muihin elementteihin.

SVG-tiedostot ovat skaalautuvia, mikä tarkoittaa että ne voivat skaalautua minkä kokoisina tahansa ilman laadun heikkenemistä. Tämä on erityisen hyödyllistä verkkosivustoissa, joissa grafiikan tulee näyttää yhtä hyvältä eri laitteilla ja eri kokoisilla näytöillä. Esimerkiksi WPGuideGuy:n logossa käytetään SVG-tiedostomuotoa, jotta logo näyttää aina hyvältä riippumatta laitteesta tai selaimen ikkunan koosta. SVG-tiedostot voivat myös sisältää erilaisia animaatioita ja interaktiivisia elementtejä, kuten painikkeita ja liukusäätimiä.

SVG-tiedostojen käyttö on lisääntynyt verkkosivustojen ja sovellusten kehittämisessä, koska ne mahdollistavat visuaalisesti mielenkiintoisten ja monimutkaisten grafiikoiden luomisen ja skaalautuvuuden varmistamisen eri laitteilla.

Miksi SVG-tiedostot ovat kiellettyjä oletuksena WordPressissä?

SVG-tiedostot ovat oletuksena kiellettyjä WordPressissä turvallisuussyistä. Nimittäin SVG-tiedostojen sisälle voidaan syöttää haitallista koodia, joka voi altistaa sivuston haavoittuvuuksille tai hyökkäyksille.

Esimerkiksi SVG-tiedostoon voidaan piilottaa haitallista JavaScript-koodia, jonka hyökkääjä on piilottanut kuvan taakse. Tämä haitallinen JavaScript-koodi laukeaa aina, kun verkkosivua käyttävä käyttäjä vierailee verkkosivulla jossa haitallinen SVG-tiedosto on. Haitallinen tiedosto voi altistaa käyttäjän tietojenkalastelulle ja näin varastaa käyttäjän henkilökohtaisia tietoja tai ohjata käyttäjän toiselle haitalliselle verkkosivustolle

On tärkeää huomata, että yleisesti ottaen SVG-tiedostot eivät sisällä haitallista koodia. Kuitenkin, jos saat tai latailet SVG-tiedostoja epäluotettavista lähteistä, on mahdollista, että ne sisältävät haitallista koodia, joka voi aiheuttaa tietoturvaongelmia. Siksi on tärkeää olla varovainen SVG-tiedostojen käytössä ja varmistaa, että ne ovat turvallisia ennen niiden käyttöä WordPress-sivustollasi.

Näin sallit SVG-tiedostojen lisäämisen WordPress-sivustolle

SVG-tiedostojen lisäämisessä WordPress-sivustolle on suositeltavaa käyttää valmista lisäosaa, joka sisältää valmiiksi SVG-tiedostojen puhdistuksen ja turvallisen käyttämisen. SVG-tiedostojen puhdistuksella tarkoitetaan sitä, että niistä poistetaan kaikki mahdollinen haitallinen koodi ennen kuin ne ladataan verkkosivulle.

SVG-tiedostoja voi esimerkiksi puhdistaa tällä työkalulla ja sen jälkeen käyttää turvallisesti tiedostoja verkkosivulla, mutta tämän tyylinen puhdistaja sisältyy SVG-support lisäosassa, joka puhdistaa automaattisesti SVG-tiedostot, kun ne ladataan verkkosivulle.

SVG-tiedoston lisääminen lisäosalla

1. Lataa ”SVG Support” lisäosa
2. Ota lisäosa käyttöön
3. Nauti laadukkaista ja hyvä laatuisista kuvista sivulla 😎

SVG Support

SVG-tiedoston lisääminen koodilla

Huomioithan, että alapuolella oleva koodi ei tee SVG-tiedostoille ”puhdistusta”. Joten käytä alla olevaa koodia harkiten tai käytä ulkopuolista palvelua SVG-tiedostojen puhdistukseen ennen kuin lataat ne WordPress-sivustollesi.

Voit lisätä koodin teemasi functions.php tiedostoon.

/**
 * Lisää SVG-tiedostot sallittujen tiedostotyyppien joukkoon WordPressin mediatiedostojen lataamista varten
 * Author: WPGuideGuy
 * Author URI: https://wpguideguy.fi/
 * @param array $file_types Tiedostotyypit, jotka on sallittu ladata
 * @return array Laajennettu tiedostotyyppien joukko, johon on lisätty SVG-tiedostotyyppi
 */
function add_svg_file_types_to_uploads($file_types){
  $new_filetypes = array();
  $new_filetypes['svg'] = 'image/svg+xml'; // Lisätään SVG-tiedostotyyppi sallittujen tiedostotyyppien joukkoon
  $file_types = array_merge($file_types, $new_filetypes ); // Yhdistetään alkuperäiset tiedostotyypit uuteen tiedostotyyppien joukkoon, joka sisältää myös SVG-tiedostotyypin
  return $file_types; // Palautetaan uusi tiedostotyyppien joukko, johon on lisätty SVG-tiedostotyyppi
}

// Lisätään suodatin 'upload_mimes', joka kutsuu add_svg_file_types_to_uploads-funktiota
add_filter('upload_mimes', 'add_svg_file_types_to_uploads');