Jak nahrát SVG na WordPress: 2 způsoby

Chcete se dozvědět, jak nahrát SVG na WordPress? V tomto tutoriálu představíme metody, jak toho dosáhnout..

Weboví administrátoři a weboví designéři musí při své práci používat různé formáty mediálních souborů. Jedním z nejpopulárnějších formátů současnosti je SVG, vektorový formát založený na XML. Bohužel ne všechny prohlížeče a platformy podporují SVG, takže musíte nejprve povolit podporu SVG ručně.

Tento článek se bude zabývat kroky pro nahrávání souborů SVG na web WordPress pomocí pluginu podpory SVG. Odpovíme také na několik otázek týkajících se bezpečnostních problémů souvisejících s tímto konkrétním formátem mediálních souborů a proč se vyplatí používat SVG.

Chcete-li začít, pojďme se seznámit s SVG a jak funguje.

Než ale začneme, zjistěte to, pokud jste WordPress nikdy nenainstalovali Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

Co je SVG?

Scalable Vector Graphics (SVG) je formát vektorové grafiky založený na textu XML. Přestože běžné obrazové formáty jako JPG a PNG se skládají z tuny malých čtverečků zvaných pixely, tento formát se při popisu atributů obrázků spoléhá na značkovací jazyk XML.

V lednu 2022, 42 % všech webových stránek na celém světě použít SVG. Toto procento se zvýšilo pouze od ledna 2021 29,4 % webových stránek použili to. Podobně jako formáty PNG a JPG je SVG populární mezi weby s vysokou návštěvností, jako je Google, Wikipedia a YouTube.

Další skvělá věc na SVG je, že je široce podporována všemi hlavními prohlížeči.

Zde je seznam prohlížečů které podporují formát souboru SVG:

navigátor	Částečná podpora	Plná podpora
Deska	-	Verze 12-18, 79-96, 97
Firefox	Verze 2	Verze 3-94, 95, 96-97
Firefox pro Android	-	Verze 95
chróm	-	Verze 4-96, 97, 98-100
Chrome pro Android	-	Verze 96
Safari	Verze 3.1	Verze 3.2-15.1, 15.2, TP
Opera	-	Verze 10-81, 82
Mini Opera	-	Všechny verze
Opera Mobile	-	Vydání 12-12.1, 64
Safari na iOS	-	Vydání 3.2-15.1, 15.2
prohlížeč Android	Verze 3-4.3	Vydání 4.4-4.4.4, 96
Prohlížeč UC pro Android	-	Verze 12.12
Samsung Internet	-	Vydání 4-14.0, 15.0
Prohlížeč QQ	-	Verze 10.4
Prohlížeč Baidu	-	Verze 7.12
Prohlížeč KaiOS	-	Verze 2.5

Jak funguje SVG?

SVG používají XML k vytváření dvourozměrných vektorových obrázků. Na rozdíl od JPG a PNG nemá vektorová grafika žádné pixely. Místo toho je jejich chování popsáno v textových souborech XML.

Z tohoto důvodu lze SVG vyhledávat, indexovat, skriptovat, upravovat a komprimovat jako kód. Díky tomu je může vytvořit kdokoli pomocí textového editoru nebo softwaru pro vektorovou grafiku.

Podporuje WordPress SVG?

Ve výchozím nastavení není ve WordPressu žádná podpora SVG kvůli bezpečnostním rizikům, která přináší – bezpečnostním problémům kolem SVG se budeme hlouběji věnovat později.

Zde je chybová zpráva, která se zobrazí při nahrávání grafiky SVG na web WordPress:

Tady je aktuální diskuse o tom, že SVG bude součástí základní funkce WordPressu. Do té doby musíme být kreativní a používat jiná řešení pro nahrávání obrázků SVG na WordPress.

Proč používat WordPress SVG?

Navzdory bezpečnostním problémům mnoho uživatelů stále používá tento formát obrázku, protože má různé výhody. Zde jsou některé z výhod používání souborů SVG:

• Škálovatelnost: Protože SVG je vektorový formát obrázku, soubory SVG si zachovávají stejnou kvalitu ve všech rozlišeních obrazovky. Tato výhoda je přítomna i po jejich zvětšení, a proto mnoho lidí používá tento škálovatelný formát obrázku pro ikony a loga.
• Menší velikost souboru : Soubory SVG usnadňují zlepšení výkonu webu, protože zabírají méně místa na webu a načítají se mnohem rychleji než jiné obrázky.
• SEO Friendly : Google indexuje soubory SVG, což umožňuje jejich zobrazení ve Vyhledávání obrázků Google a zlepšuje vaše vyhledávání. SEO. U jiných typů obrázků jste omezeni na optimalizaci jejich alternativních atributů.
• SVG založené na kódu lze upravovat pomocí textového editoru nebo softwaru pro úpravu vektorové grafiky. Můžete optimalizovat soubory SVG pro webové stránky nebo dokonce přidat animace, aby byla grafika interaktivní.

SVG na WordPress a zabezpečení

Protože SVG je v podstatě textový soubor XML, má zneužitelné chyby zabezpečení, které neovlivňují jiné formáty obrázků. Lidé jej proto mohou snadno unést pomocí škodlivého kódu a spustit útoky Cross-Site Scripting (XSS) a XML External Entity (XXE) na váš systém.

Z tohoto důvodu byste měli být opatrní při manipulaci se soubory SVG a jejich přidávání do WordPressu.

Chcete-li minimalizovat bezpečnostní rizika, nezapomeňte soubory SVG před nahráním do knihovny médií WordPress dezinfikovat. Tento proces odstraňuje podezřelý kód a chyby, díky čemuž jsou obrázky pro váš web bezpečné.

Nahrané soubory SVG můžete vyčistit pomocí pluginu SVG – jeho kroky probereme později. Doporučujeme jej však dezinfikovat dvakrát pomocí Test dezinfekce SVG -

Dalším způsobem, jak zabezpečit svůj web WordPress, je omezit nahrávání SVG pouze na důvěryhodné uživatele. Vybraní uživatelé by si měli být vědomi bezpečnostních problémů souvisejících s formátem SVG – to je odradí od získávání souborů SVG z pochybných zdrojů.

Jak nahrát soubory SVG na WordPress ve 2 bezpečných metodách

Technicky existují dva způsoby, jak přidat podporu SVG do WordPress: pomocí a WordPress Plugin nebo ruční aktivací. Bez ohledu na to, co si vyberete, důrazně doporučujeme, abyste oprávnění ke stahování omezili pouze na správce a důvěryhodné uživatele, abyste minimalizovali škodlivé stahování.

Použijte plugin WordPress

V tomto tutoriálu použijeme Podpora SVG, toto WordPress Plugin používá knihovnu SVG sanitizer, která se automaticky aktivuje při nahrávání souborů SVG do knihovny médií. Je také snadné jej nastavit a používat zdarma.

Zde jsou kroky ke konfiguraci podpory SVG:

1. INainstalujte plugin a aktivujte jej.

2. Přístup k nastavení -> podpora SVG z vašeho řídicího panelu WordPress.

3. Zaškrtněte políčko vedle možnosti Omezit na administrátory omezit oprávnění k nahrávání. Udělejte totéž pro možnost Aktivujte pokročilý režim pokud chcete mít přístup k pokročilým funkcím, jako je inline vykreslování SVG a styly CSS.

4. Po uložení změn můžete bezpečně začít nahrávat soubory SVG do knihovny médií.

Ručně přidejte podporu WordPress SVG

Tato metoda zahrnuje úpravu souboru functions.php vašeho webu WordPress. Proto důrazně doporučujeme, abyste se řídili těmito kroky, pokud jste obeznámeni s PHP a plně rozumíte problému zabezpečení SVG.

Ujistěte se, že zálohujte si svůj web WordPress před provedením změn, abyste předešli ztrátě dat v případě nesprávné konfigurace.

Následující kroky vysvětlí, jak povolit SVG ve WordPress ručně pomocí FTP klienta, jako je FileZilla.

1. Přejděte do adresáře souborů vašeho webu na vašem hostiteli
2. Přístup k public_html -> wp-obsahuje. Přejděte dolů, dokud nebudete najít funkce.php.

3. Klikněte pravým tlačítkem na tento soubor a vyberte Zobrazit/Upravit jej otevřete a vložte do něj následující fragment kódu:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Uložte změny a zkuste nahrát nový soubor SVG. Pokud je proces úspěšný, vaše knihovna médií by měla přijmout nahrání souboru.

Mnoho výhod souborů SVG přispívá k rostoucí popularitě tohoto typu souborů. Textové soubory XML jsou bohužel náchylné ke vkládání kódu, což je hlavní důvod, proč WordPress ve výchozím nastavení nezahrnuje podporu SVG.

To znamená, že existují dva způsoby, jak přimět váš web WordPress, aby přijímal soubory SVG: pomocí a WordPress Plugin nebo upravte soubor functions.php. Kromě omezení práv pro nahrávání budete moci bezpečně nahrávat soubory SVG do knihovny médií webu.

Další doporučené zdroje

Zveme vás také ke konzultaci ressources níže, abyste získali větší vlastnictví a kontrolu nad svými webovými stránkami a blogem.

• Jak vytvořit jednoduchý plugin WordPress
• Jak vytvořit jednoduchý plugin Gutenberg Block WordPress
• Jak nastavit domovskou stránku ve WordPressu
• Jak porozumět ovládacímu panelu WordPress
• Jak vytvořit jednoduchý plugin WordPress

Proč investovat do čističky vzduchu?

To je vše pro tuto příručku, která vám ukáže, jak nahrát SVG do WordPress. Doufáme, že vám tento článek poskytl určitý přehled o výhodách a rizicích nahrávání souborů SVG na web WordPress. Máte-li jakékoli obavy nebo návrhy, dejte nám vědět commentaires.

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.   

...