Kako varno uporabljati vektorske slike z WordPressom

Dodajanje grafike in ilustracij po meri oblikovanju vašega spletnega mesta Divi lahko resnično pomaga povečati vizualno privlačnost. Toda iskanje pravih slikovnih sredstev ali najem oblikovalca ni vedno izvedljivo. Na srečo Divi olajša ustvarjanje lastnih vektorskih slik in ilustracij neposredno v graditelju.

V tem priročniku bomo raziskali, kako dejansko implementirati SVG, ne da bi ogrozili vaše spletno mesto.

Tudi če nimate izkušenj z oblikovanjem, lahko naredite profesionalne, visokokakovostne vektorske slike, s katerimi boste svoje spletno mesto Divi vizualno res dvignili na naslednjo raven.

Uvod v SVG in njegove uporabe

SVG je kratica za Scalable Vector Graphics. Je široko uporabljen format vektorskih slik, ki temelji na XML in je namenjen opisu dvodimenzionalne vektorske grafike. Za razliko od rastrskih slikovnih formatov (kot sta JPEG ali PNG), ki uporabljajo slikovne pike za predstavitev slik, SVG uporablja matematične enačbe za definiranje oblik, linij in barv, zaradi česar je format neodvisen od ločljivosti in zelo razširljiv.

Tukaj je nekaj ključnih uporab SVG pri oblikovanju spletnega mesta:

1. Odzivna grafika: slike SVG so neodvisne od ločljivosti, kar pomeni, da jih je mogoče povečati ali zmanjšati brez izgube kakovosti. Zaradi tega so popolni za odzivno spletno oblikovanje, kjer se vsebina prilagaja različnim velikostim in ločljivostim zaslona.
2. Ikone in logotipi: SVG se običajno uporablja za ikone, logotipe in druge grafične elemente na spletnih mestih. Ker so datoteke SVG majhne in jih je mogoče preprosto prilagoditi in animirati s CSS in JavaScript, so priljubljena izbira za ustvarjanje interaktivnih in vizualno privlačnih uporabniških vmesnikov.
3. Retina in zasloni z visoko ločljivostjo na palec: SVG je idealen za prikaz čiste in ostre grafike na zaslonih z visoko ločljivostjo na palec (pik na palec), kot so zasloni Retina, kjer so lahko tradicionalne rastrske slike pikselizirane, če jih povečate.
4. Animacija: SVG omogoča ustvarjanje kompleksnih animacij neposredno v kodi XML z uporabo orodij, kot so animacije CSS ali knjižnice JavaScript, kot sta Snap.svg in GreenSock Animation Platform (GSAP). To omogoča dodajanje dinamičnih in interaktivnih elementov spletnemu mestu.
5. Dostopnost: slike SVG so zlahka dostopne bralnikom zaslona in podpornim tehnologijam, ker je osnovno strukturo XML mogoče označiti z opisnim besedilom, zaradi česar so spletna mesta bolj vključujoča in uporabna za ljudi s posebnimi potrebami.
6. Prednosti SEO: iskalniki lahko razčlenijo in indeksirajo vsebino v datotekah SVG, kar lahko izboljša optimizacijo iskalnikov (SEO), tako da pajkom iskalnikov zagotovi več konteksta.
7. Interaktivna vizualizacija podatkov: SVG je mogoče uporabiti za ustvarjanje interaktivnih vizualizacij podatkov, kot so grafikoni in grafi, ki lahko pomagajo pri učinkovitem posredovanju informacij na spletnem mestu.

Če povzamemo, SVG je vsestranski in zmogljiv format za ustvarjanje in prikazovanje vektorske grafike na spletnih mestih. Zaradi njegove zmožnosti brezhibnega prilagajanja velikosti, dobrega delovanja z različnimi velikostmi in ločljivostmi zaslona ter podpore za animacije in interaktivnost je dragoceno orodje pri sodobnem spletnem oblikovanju in razvoju.

Načini za varno uporabo vektorskih slik z WordPressom

V tem delu si bomo ogledali dve metodi za uporabo varnega SVG v WordPressu: ročno in prek vtičnikov. Najboljša izbira za vaše potrebe vam bo nato predstavljena v izbor. Začnimo zdaj!

Ročno dodajte podporo za SVG in očistite kodo

Z majhnim delom kode lahko podporo za SVG dodate v WordPress v nekaj minutah. To bi vas izpostavilo morebitnim varnostnim pomislekom, ki smo jih že izpostavili. Za varnejšo implementacijo SVG so potrebna naslednja dejanja:

1. Spremenite svojo datoteko functions.php, da omogočite podporo za SVG.
2. Onemogoči želenim uporabniškim vlogam nalaganje datotek svg v WordPress.
3. Preden naložite katero koli datoteko SVG, jih vse očistite.

Na splošno ni težko dokončati prvega in drugega koraka. Prvi korak je, da se povežete s svojim spletnim mestom s protokolom za prenos datotek (FTP) in poiščete korensko mapo za WordPress. Tam poiščite datoteko functions.php, jo odprite in vanjo prilepite naslednjo kodo.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

S tem lahko naložite datoteke SVG v WordPress in si jih ogledate v svoji medijski knjižnici, kar služi dvema namenoma. Ko dodate kodo, zaprite datoteko functions.php in shranite spremembe.

Zdaj, ko moramo preprečiti, da bi bili ljudje, katerih nalaganjem ne zaupamo, poškodovani, stvari postanejo nekoliko bolj zahtevne. Morda na primer zaupate svojim urednikom in avtorjem, da bodo naložili točne datoteke, ne pa tudi svojim sodelavcem. Tu lahko uporabite dva pristopa:

1. Vzpostavite edinstvene uporabniške vloge za uporabnike z omejenim ali brez dostopa do medijske knjižnice.
2. Če želite omejiti vrste datotek, ki jih lahko vsaka uporabniška vloga naloži, namestite vtičnik, kot je WP Upload Restriction .

Res je, da imata obe strategiji pomanjkljivosti, kar je eden od razlogov, zakaj je lahko ročna implementacija SVG izziv. Toda če izberete strategijo za zaustavitev zlonamernih nalaganj SVG, se morate tudi prepričati, da je ne boste pomotoma uporabili.

V idealnem primeru bi morali uporabiti orodje za razkuževanje, preden naložite kateri koli SVG na svoje spletno mesto. S tem boste prevzeli vašo datoteko, preverili, ali vsebuje kaj spornega, in jo nato izbrisali, če vsebuje. Na koncu boste imeli urejeno datoteko SVG, ki jo lahko končno pošljete v WordPress.

Uporaba varnega vtičnika SVG

Nameravali smo prikazati, kako težka je lahko varna implementacija SVG z uporabo zgoraj omenjene metode. To je potrebno, da lahko popolnoma razumete, kaj izvaja vtičnik Safe SVG .

vtičnik za varen SVG. Na kratko, vse težave, ki smo jih navedli prej, obravnava ta vtičnik, vključno z:

1. Omogoča vam nalaganje datotek SVG.
2. Preverjanje, ali so vaši SVG vidni v medijski knjižnici.
3. Čiščenje izvorne kode vsakega SVG, ki ga naložite, da se izognete varnostnim napakam. Ta vtičnik je po naravi v bistvu plug-and-play in uporablja najpreprostejšo pot za varno implementacijo SVG v WordPress. Svetujemo vam, da poskusite, če ste odločeni uporabljati SVG.

Animiranje datotek SVG z uporabo CSS in vtičnikov

Če se boste lotili integracije datotek SVG v WordPress, boste nedvomno želeli čim bolj povečati donosnost naložbe. To pomeni, da morate, kadar je to primerno, animirati svoje SVG s pomočjo CSS. Obstajata dva pristopa, o katerih smo že razpravljali:

• SVG je mogoče ročno animirati s CSS tako kot vse druge elemente.
• Za ustvarjanje in animiranje datotek SVG uporabite programe, kot je SVGator .

Če ste pripravljeni preizkusiti nekaj novih stvari, lahko dodajanje nekaj animacij tu in tam močno izboljša uporabniško izkušnjo na vašem spletnem mestu. Vendar bi bilo dodajanje videoposnetkov ali GIF-ov bistveno slabše za mobilne naprave kot uporaba SVG in CSS za doseganje tega.

Zaključek

Z zmožnostjo izdelave vektorske grafike po meri neposredno v Divi builderju imate zmogljiv način za ustvarjanje ilustracij in ikon za vaše spletno mesto, ne da bi potrebovali kakršno koli strokovno znanje o oblikovanju. Izvedba te izvirne grafike lahko vašim stranem in objavam da bolj edinstveno, prilagojeno estetiko. Presenečeni boste, kako profesionalno lahko izgleda vaša DIY vektorska grafika!