Povolení nahrávání svg do wordpressu

Zář 22, 2022 | Wordpress

SVG je velice populární formát na vkládání různé grafiky pro web jako jsou loga, ikony a jiné malůvky. Má tu výhodu, že je datově úsporný a zachovává si kvalitu i při změnách velikosti (když zvětšíte jpg nebo png nad jeho rozměry začne se vám čtverečkovatět, což se vám u svg nestane). Pokud se ho ale pokusíte nahrát do WordPressu, pravděpodobně narazíte na hlášku, že nemáte dostatečné povolení nahrávat tento typ souboru.

Wordpress nedostatečné oprávnění

Naštěstí lze toto obejít různými pluginy, případně jednoduchým snipetem.

add_filter('upload_mimes', 'lh_enable_svg_upload', 10, 1);
function lh_enable_svg_upload($mimes) {
  if (!current_user_can('administrator')) {
    return $mimes;
  }
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';

  return $mimes;
}

Snipet výše umožní nahrávat svg obrázky všem uživatelům v roli administrátor. Pokud chcete povolit nahrávání pro všechny odeberte sekci:

if (!current_user_can('administrator')) {
    return $mimes;
}

Nicméně tato sekce je tu z bezpečnostních důvodů (viz. níže).

Proč je svg ve výchozím nastavení zakázán?

Svg je strukturovaný XML dokument, to je něco podobného jako je HTML, ve kterém uchováváme strukturu webových stránek. No a stejně jako do HTML i do svg se dá propašovat například nějaký škodlivý javascript. V ukázce příklad svg obrázku znázorňující modré kolečko i se „škodlivým“ javascriptem:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="200"
   height="200"
   viewBox="0 0 52.916665 52.916668"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2" />
  <g
     id="layer1">
    <ellipse
       style="fill:#0000ff;stroke-width:1.24804"
       id="path868"
       cx="26.268953"
       cy="26.447653"
       rx="23.052345"
       ry="21.801445" />
  </g>
  <script>
  if (confirm('Ať zmáčknete co zmáčknete, stejně vás přesměruji.') == true) {
    window.location.replace("https://www.hilgert.cz/");
  } else {
    window.location.replace("https://www.hilgert.cz/");
  }
  </script>
</svg> 

Vyzkoušet na vlastní kůži si to můžete zde https://www.ksefticek.cz/skodlive-kolecko/. Možná jste si říkali, proč by někdo instaloval plugin, když stačí pár řádek kódu do functions.php vaší aktivní šablony. Pluginy většinou totiž nahrávaný svg zkontrolují a podobné zákeřnosti podchytí, případně nahrávaný svg minifikují apod. Pokud si stránky tvoříte sami a potřebuje nahrát pár svých nebo prověřených svg obrázků asi bych šel cestou pár řádků kódu. Pokud nad nahráváním nemáte úplně kontrolu, stojí už za zvážení nějaký plugin.

Není svg jako svg

Umístili jste do functions.php výše zmíněný kód a stále vám obrázek nejde nahrát? Ono totiž není svg jako svg. Všiměte si v kódu toho image/svg+xml. To značí typ souboru a setkat se můžete jak s již zmíněným image/svg+xml tak i s image/svg. Pokud vám tedy stále svg obrázek nejde nahrát, patrně máte ten druhý typ. Ověřit si to můžete otevřením obrázku například v poznámkovém bloku. Pokud na první řádce máte XML deklaraci jedná se o image/svg+xml, pokud to tam nemáte jedná se o image/svg.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Tuto deklaraci můžete libovolně smazat nebo naopak přidat a tím dostanete požadovaný typ souboru.