Jak dodać svg w WordPress

SVG? A co to w ogóle jest? Takie pytanie często słyszę, kiedy polecam dodać logo w formacie svg zamiast png lub jpg. Inni zaś mówią, że jak wektory na www? No właśnie! Wektory dobrze się skalują więc to jest rozwiązanie idealne, jeśli chce się mieć wyraźne logo na stronie www.

SVG pozwala na dodanie zarówno statycznej grafiki jaki i animacji, obsługuje też przezroczystość więc generalnie ma wszystko co potrzeba przy logo czy ikonkach na stronie www. Dodatkowo niezależnie jak bardzo taki plik przeskalujemy zawsze będzie wyraźny – czego nie można powiedzieć o png czy jpg, które jak zrobimy bardzo malutkie będą rozmazane.

Jak zrobić logo/ ikonkę w svg?

O ile jpg czy png można wygenerować w każdym programie o tyle z svg już tak lekko nie ma. Jeśli ma być za free to możecie posłużyć się Inkscape – to darmowy program do grafiki wektorowej, w nim możecie zaprojektować swoje logo lub ikonki i zapisac je do svg. Należy pamiętać o tym by napisy zrobić jako krzywe i dopiero wtedy zapisać do svg! Inaczej może się rozjechać ich wyświetlanie.

Jeżeli ktoś Wam robił logo i macie je w PDF (oczywiście wektorowo, nie jpg zapisany do PDF) lub EPS to możecie go otworzyć w programie do grafiki wektorowej i zapisać jako svg. Jeśli nie macie plików wektorowych to troszkę lipa – trzeba przerobić wpierw logo na wektory.

Jak dodać plik svg do WordPress?

Logika wskazuje, że wziąć plik i wgrać jak każdy inny. No i super – wgrać trzeba tylko jeśli zrobicie to od tak to sypnie Wam WP komunikatem, że jest to niedozwolone. I co wtedy? Po pierwsze nie panikujemy, a po drugie – szukamy rozwiązania.

Pierwszą opcją będzie kawałek kodu, który wystarczy wrzucić w plik functions.php w motywie potomnym.

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');

lub gdyby nie śmigało to można spróbować poniższy kod

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Opcja druga – szukamy wtyczki. Tutaj mam dla Was w ramach podpowiedzi dwie: Safe SVG oraz SVG Support. Obie działają, są darmowe, dostępne w repozytorium przez kokpit WP i robią to samo – pozwolą Wam wgrać normalnie plik svg do WP 🙂 Którą ja wybieram? Ja osobiście stawiam na Safe SVG, jeżeli już ma być robione wtyczką 🙂

Dajcie znać w komentarzach czy stosujecie u siebie na stronach svg czy jednak jest to dla Was nowe rozwiązanie. Przy okazji polecam wpis o optymalizacji grafik na stronie www. Jeśli macie jakieś pytanie do śmiało uderzajcie na grupę Zostań specką!