Optymalizacja SVG

svg omg cover

svg omg cover

Od kiedy poznałam narzędzie SVG OMG już zawsze dbam aby kod SVG, który dodaję do projektu zawsze był jak najlżejszy i bardziej czytelny. To genialne narzędzie stworzone przez Jakea Archibald i opisane jako:

SVGOMG is SVGO‚s Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

Jak korzystać z SVG OMG?

Kiedy dostajemy grafikę w formacie SVG często znajduje się tam sporo kodu, który zupełnie nie jest potrzebny. Do tego pewne kształty i krzywe można znacznie uprościć. Warto zadbać o optymalizację, dzięki temu narzędziu zyskamy mniejszy rozmiar pliku oraz większą czytelność kodu.

Wchodzimy na stronę: SVG OMG i wklejamy nasz snippet lub ładujemy nasz plik SVG. W głównym panelu powinniśmy mieć podgląd naszej grafiki. Na stronie dostępne jest demo, polecam zapoznanie się z dostępnymi opcjami.

svg omg dashboard

 

Jak widać z powyższego obrazka dzięki SVG OMG plik został zmniejszony o prawie 60%. Dostępne są dwa widoki: możemy sprawdzić wygląd grafiki oraz mamy podgląd kodu. Jednym z ważniejszych parametrów jest dokładność jaka jest zachowana względem oryginalnej grafiki. Warto mieć na uwadze to, że program upraszcza krzywe i kształty, stąd mogą się pojawić drobne różnice.

SVG OMG dostarcza nam sporo opcji, które możemy dostosować do własnych potrzeb.

svg omg options

Polecam wprowadzenie używania tego narzędzia jako standard w Twoich projektach. 😉

Masz jeszcze jakieś inne metody na optymalizację SVG? Znasz jakieś inne ciekawe narzędzia? Koniecznie podziel się w komentarzu!

Style do druku

print styles

Style do druku stron internetowych

CSS media otwierają nam wiele możliwości. Dzięki nim nie tylko możemy dodawać style, które będą aplikowane o różnych rozdzielnościach urządzeń, czy orientacji urządzenia mobilnego (wertykalne/ horyzontalne). Warto pamiętać, że mamy również możliwość stylowania stron internetowych do druku.

Spotkałeś/spotkałaś się z zapisem @media screen? Aby zaaplikować dodatkowe style do druku należy dodać do pliku CSS @media print. Inną metodą dodawania stylów jest przez link do osobnego pliku.

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

Dla ciekawskich jest jeszcze kilka innych opcji, które możemy dodać oprócz wyżej wymienionych screen i print, na przykład speech, tv a nawet  braille. Więcej przeczytasz tutaj.

Symulator w narzędziach developerskich Chrome

Narzędzia developerskie Chrome umożliwiają nam na symulowanie strony do druku. Wystarczy wejść w zakładkę Rendering. Na samym dole znajdziemy zakładkę Emulate CSS media. Najprawdopodobniej będziesz mieć wybraną opcję no emulation albo screen. Po kliknięciu pokazują nam się trzy opcje i możemy wybrać print.

print css chrome dev tools

A po jaką cholerę potrzebne mi style do druku?

W obecnych czasach raczej rzadko korzystamy z drukowania stron internetowych. Czasami jednak może to być przydatne dla naszych użytkowników.  Warto zadbać o to, aby taka strona do druku nie była w totalnej rozsypce. Flexbox i CSS grid nie będą wyglądać najlepiej po wydrukowaniu.

Przykładowe sytuacje w których faktycznie może się to przydać?

  • Strona podsumowania zamówienia w sklepie internetowym. Ważne, żeby po wydrukowaniu wyglądała czytelnie.
  • Wydruki z banku internetowego.
  • I jeszcze jeden przypadek, na który natknęłam się osobiście w pracy. Zastanów się, czy widziałeś kiedyś logotyp na stornie internetowej, który był biały? Domyślasz się zatem jak wygląda na białej kartce? Czasami małe rzeczy mają spore znaczenie 😉

Dodatkowe źródła

Poniżej znajdziesz kilka przydatnych linków, które zawierają dużo więcej informacji o stylowaniu stron o druku.

A Guide To The State Of Print Stylesheets In 2018; Rachel Andrew, Smashing Magazine

How to Create Printer-friendly Pages with CSS; Craig Buckler, Sitepoint

Masz jakieś fajne wskazówki odnośnie stylowania stron internetowych do druku? Koniecznie podziel się w komentarzu!