Mi az SVG-fájl (és hogyan lehet SVG-ket feltölteni a WordPress-be)?
Mi az SVG-fájl (és hogyan lehet SVG-ket feltölteni a WordPress-be)?
A fő ok, amiért az SVG-fájlok különösen népszerűek a fejlesztők és tervezők körében, az, hogy méretezhető képformátumról van szó, általában kisebb fájlmérettel (néha egészen kicsivel), és nem pixelizálódnak a retina képernyőkön. A WordPress alapértelmezés szerint azonban nem teszi lehetővé az SVG fájlformátum feltöltését, elsősorban biztonsági megfontolások miatt.
Ebben a bejegyzésben megvizsgáljuk, mik is azok az SVG-k, hogyan lehetnek előnyösek, és hogyan engedélyezheted biztonságosan a WordPress SVG támogatását. Megbeszéljük a böngészők támogatását is, valamint néhány figyelmeztetést, ha úgy döntesz, hogy vektoros képformátumra szeretnél váltani.
Mi az SVG fájl?
Az SVG (Scalable Vector Graphics) egy XML-alapú vektorkép, amelyet gyakran használnak márkák, cégek logók és ikonok megjelenítésére weboldalaikon.
Az SVG fájlokat kóddal vagy szövegszerkesztővel is kezelheted. Az SVG-ket jelenleg az összes weboldal kb. 33%-a használja, és amint alább is látható, az elfogadás aránya gyorsan növekszik. Az olyan népszerű oldalak, mint a Google, a Reddit, a Dropbox, is SVG-ket használnak.
SVG használati statisztikák 2020. április – 2021. április
SVG fájlböngésző támogatás
Az SVG fájlokat jelenleg minden nagyobb böngésző támogatja, beleértve a mobil böngészőket is. Az egyetlen probléma, amelybe ütközhetsz, az az, ha továbbra is szükséged van az IE8 támogatására. Az IE8 csak körülbelül 0,36%-os böngészőpiaci részesedéssel rendelkezik, és már nem támogatott. Ha valamilyen kétségbeesett okból továbbra is szükséged lenne az IE8 támogatására, definiálhatsz egy tartalék képet (PNG vagy JPG) az SVG-képekhez, de most erre nem térünk ki bővebben. Az alábbiakban felsoroljuk a támogatott böngészőket:
Internet Explorer 9, 10, 11+ és Edge
Firefox 2+
Chrome 4+
Safari 3.1+
Opera 10+
iOS Safari 3.2+
Android Browser 3+
Firefox Android 86+
Opera Mini (mind)
Opera Mobile 12+
Chrome Android 89+
UC böngésző Android 12.12+
Samsung Internet 4+
QQ böngésző 10.4
Baidu böngésző 7.12
KaiOS böngésző 2.5
SVG böngésző támogatás
Az SVG fájlok használatának előnyei
Az SVG fájlok vektoros formátumúak, ami azt jelenti, hogy automatikusan méretezhetők mind a böngészőkben, mind a képszerkesztő eszközökben. Ez teszi nagyszerűvé az SVG fileokat a grafikusok és webes tervezők számára egyaránt. Általában, ha egy PNG vagy JPG fájlt próbálsz meg szerkeszteni egy olyan eszközzel, mint a Photoshop, a Sketch vagy a Paint, nem tudod felskálázni azokat pixelezés nélkül. Az SVG-kkel végtelen mennyiségre felnagyíthatod őket, és minden alkalommal pixel-tökéletesnek (vagy inkább vektortökéletesnek) fognak kinézni. Ez az oka annak, hogy ezek nagyszerű képformátumok a retina képernyők számára.
A Google indexeli az SVG-ket, ami nagyszerű hír SEO szempontból. A fájlokhoz csatolt SVG-tartalom indexelésre kerül, és megjelenik a Google képkeresőjében.
Az SVG-k fájlmérete hagyományosan kisebb, mint a PNG-k vagy JPG-k. Az SVG-k használatával ténylegesen felgyorsíthatod a WordPress weboldalad, mivel csökkented az oldal teljes méretét.
Az SVG fájlmérete jelentősen kisebb, mint a JPG és PNG-é, de ha nagyon részletgazdag képeket használunk, akkor jobb a PNG vagy JPG formátumot választani. A webhelyek gyakran hibrid megközelítést alkalmaznak, ahol a két fájltípust együtt használják. Fontos megemlíteni, hogy a közösségi média hálózatok nem támogatják az SVG-ket, ezért ha SVG-ket használtunk a kiemelt képekhez, akkor pl. a Yoast SEO funkcióját kell használnod, és fel kell töltened a PNG-t vagy JPG-t az OG-hoz és a metacímkékhez.
Amint fentebbi példában látható, az SVG fájlmérete 92,51%-kal kisebb a JPG-hez képest, a PNG-vel összehasonlítva 92,83%. Ezek meglehetősen lenyűgöző fájlméret-különbségek. Azonban van egy észrevétel is, a részletesebb képek tesztelésénél, az SVG-k fileok végül nagyobbak lettek, mint a JPG vagy a PNG.
Ez az oka annak, hogy sok weboldal SVG-ket használ kevésbé részletgazdag képekhez, például logókhoz, ikonokhoz stb., mivel így a fájlméret jelentősen csökken. Ha azonban több, nagyon részletes képet szeretnél, mint például egy blogbejegyzés „kiemelt képe”, érdemes maradnod a PNG vagy JPG formátumnál, de optimalizálhatod őket.
Miért fontos az SVG biztonság?
Az igazi ok, amiért az SVG még nem része a WordPress magjának, az az, hogy biztonsági aggályokat tart fent. Nyomon követheted az SVG-kről a WordPress core-ban (#24251) szóló, 2013-ban indult aktív vitát. Az SVG egy XML-fájl, amely önmagában is megnyithatja a különböző sebezhetőségeket, amelyek a normál képformátumokat nem érintik. Ide tartoznak az XML külső entitás támadások (XXE), bomba beágyazott entitások és XSS támadások.
Mario Heiderich szemléletes előadást tett közzé az SVG fájlokkal való aktív tartalominjektálásból adódó biztonsági kockázatokról. Az egyik példa az volt, hogy a JavaScriptet egy SVG-be ágyazták, és valóban sikerült felhívnia Mariót a Skype-on. Ez elég ijesztő! A SecuPress, a WordPress biztonsági bővítményének szerzői szintén kitértek arra, hogy óvatosnak kell lenni az SVG-k WordPress-hez való hozzáadásakor, valamint a megfelelő módon történő végrehajtás fontosságára.
A tárolóban található sok SVG-bővítmény a következő kódot használja, amely egyszerűen lehetővé teszi a MIME-típus számára, hogy SVG-ket tölts fel a WordPress médiakönyvtárba. Ez nem a biztonságos módja ennek! Tehát ne menj és töltse le az első ingyenes SVG beépülő modult, amit látsz, vagy másold be ezt a kódot, és úgy gondolja azt, hogy minden rendben, minden kész.
function cc_mime_types($mimes) {
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);
A megoldás az, hogy az SVG-ket „fertőtleníteni” kell. A fertőtlenítés alapvetően a kód vagy a bevitel megtisztítása a biztonsági problémák (például kódbefecskendezés), a kódütközések és a hibák elkerülése érdekében. Ez magában foglalhat olyan dolgokat, mint például az adatok kódolása, a karakterláncok szűrése és érvényesítése stb. Itt jön képbe Daryll Doyle SVG-Sanitizer könyvtára, amelyre úgy hivatkozik, mint „kísérletére egy tisztességes SVG fertőtlenítőt építeni PHP-ben”. Itt találod meg az SVG fertőtlenítő demóját működés közben.
Fontos, hogy végig gondold, hogy kik férhetnek hozzá weboldaladon az SVG-k feltöltéséhez. Például, ha egy többszerzős weboldal esetén fogalmad sincs, hogy valaki más milyen SVG-t tölthet fel, amivel felfedheti honlapodat. Javasoljuk, hogy az SVG-feltöltést az adminisztrátorokra és azokra korlátozd, akik megértik a biztonsági aggályokat.
A WordPress SVG támogatás biztonságos engedélyezése
Daryll kifejlesztett egy beépülő modult, a WP SVG-t (más néven Safe SVG), amely az SVG-Sanitizer könyvtárat használja fel az SVG képek WordPress médiakönyvtárába való feltöltésekor. A beépülő modul lehetővé teszi az SVG-k normál képekként való megtekintését a médiakönyvtárban.
A Safe SVG -t ingyenesen letöltheted WordPress bővítményként, ha rákeresel a WordPress irányítópulton a Bővítmények menüben az „Új hozzáadása” menü alatt.
WP SVG Bővítmény
(Ez a bővítmény a közelmúltban nem kapott frissítést, ezért mindenképpen teszteld le egy átmeneti helyen, mielőtt telepíted éles weboldaladra.)
Van egy prémium verzió is, amely a wpsvg.com webhelyen érhető el, és lehetővé teszi bizonyos felhasználók SVG-k feltöltésének korlátozását és további SVG-optimalizálást. Az alábbi példában az ingyenes verziót fogjuk használni.
Alternatív megoldásként érdemes megnézni az SVG Support nevű bővítményt is.
Az SVG-fájl feltöltése előtt fontos megérteni, hogy ezek kissé eltérnek a képektől. Amikor exportálsz egy SVG-t egy képszerkesztő eszközből, a szöveget görbeként kell exportálnod (vagy körvonalat kell létrehoznod), ellenkező esetben a különböző böngészőkben kissé eltérően jelenhet meg.
A beépülő modul telepítése után nincsenek beállítások, feltöltéskor egyszerűen megtisztítja az SVG-ket. Az alábbi tesztoldalon láthatod, hogy a logót SVG fájlra cseréltük, ami a médiakönyvtárban a megszokott módon megtekinthető.
SVG a WordPress médiakönyvtárban
Ez lehetővé teszi számunkra, hogy a témánk vezérlőpultját használva a WordPress fejlécében lévő logót az SVG-fájlunkra cseréljük. Alább láthatod, hogy az valóban .svg fájlt lett. Így most gyönyörűen néz ki a retina képernyőkön.
SVG a WordPress fejlécében
Van még egy finomítás, amit el kellett végeznünk. Az IE9-11-ben az asztali és mobileszközök még nem méretezik megfelelően az SVG-fájlokat. A magasság és a szélesség hozzáadása megoldja ezt a problémát. Ez témánként változhat, de tesztoldalunkon egyszerűen módosítottuk a header.php fájlt, és hozzáadtuk ezeket az egyéni dimenziókat. A WordPress-témák sokszor CSS-t használnak a méretezés módosítására, ami teljesítmény okokból nem teljesen jó, emiatt előfordulhat, hogy további kód hozzáadása szükséges az IE probléma megoldásához.
Módosított header.php fájl az SVG IE méretezési problémája miatt
És így már tökéletes! Így már biztonságosan engedélyezted a WordPress SVG támogatását. Ezt a beépülő modult és/vagy módszert a WordPress core nem támogatja, ezért természetesen csak saját felelősségedre használd. Ha azonban már csak a MIME típusú kódrészletet tartalmazó SVG-ket töltöd fel, akkor mindenképpen így csináld.
Továbbá, ha még soha nem használtál SVG-ket, győződj meg arról, hogy a GZIP engedélyezve van a szervereden az „image/svg+xml” fájltípushoz. Ez biztosítja, hogy összenyomódnak, és a lehető leggyorsabban betöltődnek. Van, hogy a rendszergazdák csak a szabványosabb fájltípusokat engedélyezik.
Összegzés
Az SVG-k nagyszerű lehetőséget kínálnak web.oldalad megjelenésének javítására! A legjobb teljesítmény elérése érdekében javasoljuk az SVG, PNG és JPG együttes használatát, mivel a részletgazdag képek nem teljesítenek olyan jól SVG formátumban. Az SVG-k nagyszerűek a logóhoz és az ikonokhoz, hogy együtt minden képernyőn pixel-tökéletesen nézzen ki.
Mi az SVG-fájl (és hogyan lehet SVG-ket feltölteni a WordPress-be)?
A fő ok, amiért az SVG-fájlok különösen népszerűek a fejlesztők és tervezők körében, az, hogy méretezhető képformátumról van szó, általában kisebb fájlmérettel (néha egészen kicsivel), és nem pixelizálódnak a retina képernyőkön. A WordPress alapértelmezés szerint azonban nem teszi lehetővé az SVG fájlformátum feltöltését, elsősorban biztonsági megfontolások miatt.
Ebben a bejegyzésben megvizsgáljuk, mik is azok az SVG-k, hogyan lehetnek előnyösek, és hogyan engedélyezheted biztonságosan a WordPress SVG támogatását. Megbeszéljük a böngészők támogatását is, valamint néhány figyelmeztetést, ha úgy döntesz, hogy vektoros képformátumra szeretnél váltani.
Mi az SVG fájl?
Az SVG (Scalable Vector Graphics) egy XML-alapú vektorkép, amelyet gyakran használnak márkák, cégek logók és ikonok megjelenítésére weboldalaikon.
Az SVG fájlokat kóddal vagy szövegszerkesztővel is kezelheted. Az SVG-ket jelenleg az összes weboldal kb. 33%-a használja, és amint alább is látható, az elfogadás aránya gyorsan növekszik. Az olyan népszerű oldalak, mint a Google, a Reddit, a Dropbox, is SVG-ket használnak.
SVG fájlböngésző támogatás
Az SVG fájlokat jelenleg minden nagyobb böngésző támogatja, beleértve a mobil böngészőket is. Az egyetlen probléma, amelybe ütközhetsz, az az, ha továbbra is szükséged van az IE8 támogatására. Az IE8 csak körülbelül 0,36%-os böngészőpiaci részesedéssel rendelkezik, és már nem támogatott. Ha valamilyen kétségbeesett okból továbbra is szükséged lenne az IE8 támogatására, definiálhatsz egy tartalék képet (PNG vagy JPG) az SVG-képekhez, de most erre nem térünk ki bővebben. Az alábbiakban felsoroljuk a támogatott böngészőket:
Az SVG fájlok használatának előnyei
Az SVG fájlok vektoros formátumúak, ami azt jelenti, hogy automatikusan méretezhetők mind a böngészőkben, mind a képszerkesztő eszközökben. Ez teszi nagyszerűvé az SVG fileokat a grafikusok és webes tervezők számára egyaránt. Általában, ha egy PNG vagy JPG fájlt próbálsz meg szerkeszteni egy olyan eszközzel, mint a Photoshop, a Sketch vagy a Paint, nem tudod felskálázni azokat pixelezés nélkül. Az SVG-kkel végtelen mennyiségre felnagyíthatod őket, és minden alkalommal pixel-tökéletesnek (vagy inkább vektortökéletesnek) fognak kinézni. Ez az oka annak, hogy ezek nagyszerű képformátumok a retina képernyők számára.
A Google indexeli az SVG-ket, ami nagyszerű hír SEO szempontból. A fájlokhoz csatolt SVG-tartalom indexelésre kerül, és megjelenik a Google képkeresőjében.
Az SVG-k fájlmérete hagyományosan kisebb, mint a PNG-k vagy JPG-k. Az SVG-k használatával ténylegesen felgyorsíthatod a WordPress weboldalad, mivel csökkented az oldal teljes méretét.
Az SVG fájlmérete jelentősen kisebb, mint a JPG és PNG-é, de ha nagyon részletgazdag képeket használunk, akkor jobb a PNG vagy JPG formátumot választani. A webhelyek gyakran hibrid megközelítést alkalmaznak, ahol a két fájltípust együtt használják. Fontos megemlíteni, hogy a közösségi média hálózatok nem támogatják az SVG-ket, ezért ha SVG-ket használtunk a kiemelt képekhez, akkor pl. a Yoast SEO funkcióját kell használnod, és fel kell töltened a PNG-t vagy JPG-t az OG-hoz és a metacímkékhez.
Genki írt egy nagyszerű cikket, amelyben összehasonlítja az SVG és a PNG és a JPEG méretét, itt találod a JPG és JPEG összehasonlításukat.
JPG (optimalizált méret: 81,4 KB)
PNG (optimalizált méret: 85,1 KB)
SVG (optimalizált méret: 6,1 KB)
Amint fentebbi példában látható, az SVG fájlmérete 92,51%-kal kisebb a JPG-hez képest, a PNG-vel összehasonlítva 92,83%. Ezek meglehetősen lenyűgöző fájlméret-különbségek. Azonban van egy észrevétel is, a részletesebb képek tesztelésénél, az SVG-k fileok végül nagyobbak lettek, mint a JPG vagy a PNG.
Ez az oka annak, hogy sok weboldal SVG-ket használ kevésbé részletgazdag képekhez, például logókhoz, ikonokhoz stb., mivel így a fájlméret jelentősen csökken. Ha azonban több, nagyon részletes képet szeretnél, mint például egy blogbejegyzés „kiemelt képe”, érdemes maradnod a PNG vagy JPG formátumnál, de optimalizálhatod őket.
Miért fontos az SVG biztonság?
Az igazi ok, amiért az SVG még nem része a WordPress magjának, az az, hogy biztonsági aggályokat tart fent. Nyomon követheted az SVG-kről a WordPress core-ban (#24251) szóló, 2013-ban indult aktív vitát. Az SVG egy XML-fájl, amely önmagában is megnyithatja a különböző sebezhetőségeket, amelyek a normál képformátumokat nem érintik. Ide tartoznak az XML külső entitás támadások (XXE), bomba beágyazott entitások és XSS támadások.
Mario Heiderich szemléletes előadást tett közzé az SVG fájlokkal való aktív tartalominjektálásból adódó biztonsági kockázatokról. Az egyik példa az volt, hogy a JavaScriptet egy SVG-be ágyazták, és valóban sikerült felhívnia Mariót a Skype-on. Ez elég ijesztő! A SecuPress, a WordPress biztonsági bővítményének szerzői szintén kitértek arra, hogy óvatosnak kell lenni az SVG-k WordPress-hez való hozzáadásakor, valamint a megfelelő módon történő végrehajtás fontosságára.
A tárolóban található sok SVG-bővítmény a következő kódot használja, amely egyszerűen lehetővé teszi a MIME-típus számára, hogy SVG-ket tölts fel a WordPress médiakönyvtárba. Ez nem a biztonságos módja ennek! Tehát ne menj és töltse le az első ingyenes SVG beépülő modult, amit látsz, vagy másold be ezt a kódot, és úgy gondolja azt, hogy minden rendben, minden kész.
function cc_mime_types($mimes) {
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);
A megoldás az, hogy az SVG-ket „fertőtleníteni” kell. A fertőtlenítés alapvetően a kód vagy a bevitel megtisztítása a biztonsági problémák (például kódbefecskendezés), a kódütközések és a hibák elkerülése érdekében. Ez magában foglalhat olyan dolgokat, mint például az adatok kódolása, a karakterláncok szűrése és érvényesítése stb. Itt jön képbe Daryll Doyle SVG-Sanitizer könyvtára, amelyre úgy hivatkozik, mint „kísérletére egy tisztességes SVG fertőtlenítőt építeni PHP-ben”. Itt találod meg az SVG fertőtlenítő demóját működés közben.
Fontos, hogy végig gondold, hogy kik férhetnek hozzá weboldaladon az SVG-k feltöltéséhez. Például, ha egy többszerzős weboldal esetén fogalmad sincs, hogy valaki más milyen SVG-t tölthet fel, amivel felfedheti honlapodat. Javasoljuk, hogy az SVG-feltöltést az adminisztrátorokra és azokra korlátozd, akik megértik a biztonsági aggályokat.
A WordPress SVG támogatás biztonságos engedélyezése
Daryll kifejlesztett egy beépülő modult, a WP SVG-t (más néven Safe SVG), amely az SVG-Sanitizer könyvtárat használja fel az SVG képek WordPress médiakönyvtárába való feltöltésekor. A beépülő modul lehetővé teszi az SVG-k normál képekként való megtekintését a médiakönyvtárban.
A Safe SVG -t ingyenesen letöltheted WordPress bővítményként, ha rákeresel a WordPress irányítópulton a Bővítmények menüben az „Új hozzáadása” menü alatt.
(Ez a bővítmény a közelmúltban nem kapott frissítést, ezért mindenképpen teszteld le egy átmeneti helyen, mielőtt telepíted éles weboldaladra.)
Van egy prémium verzió is, amely a wpsvg.com webhelyen érhető el, és lehetővé teszi bizonyos felhasználók SVG-k feltöltésének korlátozását és további SVG-optimalizálást. Az alábbi példában az ingyenes verziót fogjuk használni.
Alternatív megoldásként érdemes megnézni az SVG Support nevű bővítményt is.
Az SVG-fájl feltöltése előtt fontos megérteni, hogy ezek kissé eltérnek a képektől. Amikor exportálsz egy SVG-t egy képszerkesztő eszközből, a szöveget görbeként kell exportálnod (vagy körvonalat kell létrehoznod), ellenkező esetben a különböző böngészőkben kissé eltérően jelenhet meg.
A beépülő modul telepítése után nincsenek beállítások, feltöltéskor egyszerűen megtisztítja az SVG-ket. Az alábbi tesztoldalon láthatod, hogy a logót SVG fájlra cseréltük, ami a médiakönyvtárban a megszokott módon megtekinthető.
Ez lehetővé teszi számunkra, hogy a témánk vezérlőpultját használva a WordPress fejlécében lévő logót az SVG-fájlunkra cseréljük. Alább láthatod, hogy az valóban .svg fájlt lett. Így most gyönyörűen néz ki a retina képernyőkön.
Van még egy finomítás, amit el kellett végeznünk. Az IE9-11-ben az asztali és mobileszközök még nem méretezik megfelelően az SVG-fájlokat. A magasság és a szélesség hozzáadása megoldja ezt a problémát. Ez témánként változhat, de tesztoldalunkon egyszerűen módosítottuk a header.php fájlt, és hozzáadtuk ezeket az egyéni dimenziókat. A WordPress-témák sokszor CSS-t használnak a méretezés módosítására, ami teljesítmény okokból nem teljesen jó, emiatt előfordulhat, hogy további kód hozzáadása szükséges az IE probléma megoldásához.
És így már tökéletes! Így már biztonságosan engedélyezted a WordPress SVG támogatását. Ezt a beépülő modult és/vagy módszert a WordPress core nem támogatja, ezért természetesen csak saját felelősségedre használd. Ha azonban már csak a MIME típusú kódrészletet tartalmazó SVG-ket töltöd fel, akkor mindenképpen így csináld.
Továbbá, ha még soha nem használtál SVG-ket, győződj meg arról, hogy a GZIP engedélyezve van a szervereden az „image/svg+xml” fájltípushoz. Ez biztosítja, hogy összenyomódnak, és a lehető leggyorsabban betöltődnek. Van, hogy a rendszergazdák csak a szabványosabb fájltípusokat engedélyezik.
Összegzés
Az SVG-k nagyszerű lehetőséget kínálnak web.oldalad megjelenésének javítására! A legjobb teljesítmény elérése érdekében javasoljuk az SVG, PNG és JPG együttes használatát, mivel a részletgazdag képek nem teljesítenek olyan jól SVG formátumban. Az SVG-k nagyszerűek a logóhoz és az ikonokhoz, hogy együtt minden képernyőn pixel-tökéletesen nézzen ki.
Rólunk
OfficeHelper – Marketing megoldások A-tól Z-ig
Online marketinggel és profi weboldal fejlesztéssel foglalkozunk. Célunk, hogy elégedett ügyfelünk legyél, így mindent megteszünk sikeredért.
Naptár