SVG… SVG… czym jest SVG

SVG (ang. Scalable Vector Graphics) – to format wektorowego pliku graficznego, który w odróżnieniu do rastrowych jpg, png, gif, składa się z krzywych, a nie pikseli.
Z uwagi na możliwość nadawania różnych rozmiarów dla plików tej samej jakości, SVG świetnie spełniają się w roli logo. Sprawdzają się też jako bardziej złożone grafiki.

SVG sięga korzeniami lat 90-tych. Zostało stworzone przez konsorcjum W3C Link do W3C otwiera się w nowym oknie. (ang.World Wide Web Consortium).
Format SVG z łatwością obsługiwany przez większość popularnych przeglądarek. Możliwość skalowania bez utraty jakości dzięki wektorowej budowie pliku, a także łatwość edycji, skłaniają do częstego sięgania po ten format pliku przez web designerów.

SVG – dlaczego warto?

• relatywnie mały rozmiar pliku w kontekście szybkości działania stron internetowych,
• możliwość zmiany wielkości bez utraty jakości,
• coraz lepsza obsługa przeglądarek internetowych tego rodzaju plików,
• możliwość edycji z użyciem CSS i JS (animacje!).

W zależności od rodzaju implementacji, a także charakteru obrazu, będzie różnić się sposób nadawania mu atrybutów celem edycji, aby był on dostępny cyfrowo zgodnie z kryteriami WCAG.

Zasady używania SVG

Pierwszą i najważniejszą zasadą używania SVG jest zdefiniowanie, jaką rolę będzie pełnił obraz o tym formacie na stronie internetowej. Czy będzie to jedynie rola dekoracyjna? Czy może element graficzny, który będzie pełnił jakąś funkcję na stronie (np. ikona funkcyjna, przycisk)?

Jeśli grafika jest tylko „dodatkiem” dla jakichś treści pisanych i nie wnosi żadnej wartości merytorycznej, a jedynie okrasza wizualnie content strony, wówczas powinna być rozumiana jako dekoracyjna.
Ukrywamy SVG dla czytników ekranów poprzez dodanie atrybutu aria-hidden="true".

Przykład:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden=”true”>
  <circle cx="50" cy="50" r="50"/>
</svg>

Jeżeli grafika zaimplementowana za pomocą SVG ma przenosić informację dla użytkownika, wykorzystajmy atrybut title do opisania kontekstu użytej grafiki.

Przykład:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<title>Czarny okrąg na białym tle</title> 
  <circle cx="50" cy="50" r="50"/>
</svg>

Podsumowanie

Sposoby implementacji elementów nietekstowych na stronie internetowej są ściśle uzależnione od kontekstu otaczających ją treści. Ważne jest, aby najpierw trafnie określić, jaki cel przyświeca danej grafice. Powinniśmy ustalić też, kto będzie odbiorcą naszych treści albo jaką rolę ma pełnić dany plik graficzny?
Warto korzystać ze sprawdzonych źródeł ze szczegółowym opisem problemu.

W Kinaole zwracamy szczególną uwagę na elementy nietekstowe, kiedy audytujemy produkty cyfrowe naszych klientów. Doradzamy nie tylko w zakresie technologii implementacji, ale także w zakresie szerszego kontekstu umieszczania ich na stronach czy w aplikacjach. Wskazujemy różne możliwości, aby wspólnie znaleźć najbardziej dostępne i użyteczne rozwiązania.
Zapraszamy do kontaktu!