baner

logo idw SVG i png logo idw SVG i png

Problem, może nie dotyczy zbyt wielu osób, ale bardziej zaawansowani i obyci w temacie grafiki będą zainteresowani. Generalnie wstawiamy grafiki na stronie internetowej w trzech formatach JPG, PNG i GIF oraz uwaga od jakiegoś casu możemy wstawiaćformacie w SVG czyli w grafice wektorowej, zasadniczo SVG to format wolny od patentów i licencji, oparty o język XML. Grafikę wektorową możemy skalować bez utraty jakości, animować zaś pliki są często lżejsze od odpowiedników w PNG. SVG mógł by być bardzo popularnym formatem jednak niestety tak nie jest.

Co to jest SVG

Format SVG nadaje się najbardziej do wyświetlania niezbyt skomplikowanych obrazów jak loga, wykresy, rysunki techniczne. Natomiast nikt nie pobije JPG w zdjęciach i tutaj zapominamy o SVG – nie nadaje się do zdjęć.
Jak wspomniałem liki SVG można animować bez utraty jakości pliku, animację wykonujemy albo za pomocą XML albo za pomocą CSS. Proste i piękne ale z wadą i to dużą. Proszę wgrać plik SVG za pomocą Joomla na serwer, domyślnie się nie da, niestety trzeba zmienić ustawienia a nawet jak nam się uda to już bardzo trudno załączyć ten plik do szablonu lub artykułu. Ograniczenia mają powód – bezpieczeństwo.

Proszę zobaaczyć jak wygląda plik SVG i taki sam PNG. To są te dwa zdjęcia wprowadzajace. To są te same plik jeden w formacie SVG drugi w PNG. Jak widać jeden ma wagę 27kb a drugi 168kb. Proszę zgadnac który ma jaką wagę odpowiedź na końcu arykułu.

Tutaj ten sam pliki co wyżej w SVG i PNG tylko moco powiększone w edytorze Joomla JCE. I tutaj widać wyższość plików SVG nad PNG. Tak naprawdę mogę pik SVG powiekszyć bardziej i nie straci na jakości.

logo idw SVG i png logo idw SVG i png

 

Wczytywanie pliku SVG przez Joomla

Joomla generalnie nie potrafi wczytać SVG na dysk to jest nie możemy go załadować na serwer za pomocą standardowego menadżera plików czy też JCE. Najpierw musimy wysłać plik do katalogu images za pomocą ftp. Po wysłaniu pliku ręcznie trzeba wpisać ścieżkę dostępu do pliku SVG i to jest niestety trudność dla osób, które nie mają doświadczenia w edycji kodu. Pisałem jednak wcześniej ta treść jest dla osób bardziej zaawansowanych.
Dodanie ścieżki do pliku SVG z poziomu edytora tekstu czy też w kodzie praktycznie kończy sprawę. Na podglądzie po przełączeniu w tryb podglądu plik SVG już zobaczymy i możemy go skalować bez utraty jakości. Swoją drogą muszę sprawdzić jak plik svg wpływa na wydajność strony w ocenach systemów jak PageSpeed Insights od Google czy GTmetrix.

W wyżej wymienionym przykładzie pliki SVG jest sporo większy od pliku PNG. Jednak to logo jest bardzo skomplikowane.


Ebook Joomla 3

ebook 2 okladka

Tutaj jest drugie wydanie ebooka o Joomla 3, dopisane jest kilka rozdziałów, jest ponad 270 stron