Jaki wpływ na SEO i bezpieczeństwo strony mają pliki SVG?
Pliki SVG – co to jest?
Pełna nazwa plików SVG, to “Scalable Vector Graphics”, więc można przetłumaczyć jako “Rozszerzalna Grafika Wektorowa”. Otwarty standard graficzny został zaprojektowany z myślą o przechowywaniu grafiki w formie tekstowej stworzony przez W3C (World Wide Web Consortium) – organizację odpowiedzialną za rozwijanie standardów dla internetu. Pliki SVG służą do opisywania dwuwymiarowych grafik wektorowych, gdzie kształty i ich właściwości są zdefiniowane matematycznymi instrukcjami opartymi na punktach i liniach siatki.
Korzyści z wykorzystania plików SVG w SEO
Dzięki temu, że te pliki są tekstowe mają bardzo wiele zalet
- Szybkość ładowania strony: obrazy wektorowe zazwyczaj mają mniejszy rozmiar niż rastrowe odpowiedniki, co przekłada się na szybsze ładowanie strony. Jest to istotne z punktu widzenia SEO, ponieważ wpływa na doświadczenie użytkownika i jest brane pod uwagę przez algorytmy wyszukiwarek (Core Web Vitals).
- Skalowanie: obrazy skalują się bez utraty jakości, tj. bez “pikselozy”, więc mogą być wyświetlane prawidłowo na różnych urządzeniach, co jest szczególnie istotne gdzie większośc ludzi przegląda internet w telefonie.
- Indeksowanie: Kod plików SVG bazuje na XML, co umożliwia ich indeksowanie przez wyszukiwarki. Do źródła można dodawać tekst, metadane i inne informacje, które mogą pomóc w poprawie ich widoczności w wyszukiwarkach.
- Czytelność dla wyszukiwarek: W przeciwieństwie do rastrowych formatów graficznych, pliki SVG mogą być czytane przez boty. Tekst i metadane zawarte w pliku SVG mogą być brane pod uwagę przy indeksowaniu, czy w czytnikach ekranu.
- Mniejsza liczba zapytań HTTP: Ze względu na to, że pliki SVG mogą być wbudowywane bezpośrednio w HTML, to zmniejsza się liczba zapytań HTTP. Ostatecznie wpływa to pozytywnie na szybkość ładowania strony.
- Wsparcie dla atrybutów ARIA: Pliki SVG wspierają atrybuty ARIA, co ułatwia tworzenie grafik przyjaznych dla osób niepełnosprawnych, a googlebot ceni sobie strony przyjazne dla użytkowników.
To tak pokrótce.
Jakie technologie wspierają SVG?
- HTML – mogą być osadzane bezpośrednio w kodzie HTML za pomocą elementu <svg>. To pozwala na dodawanie grafiki wektorowej do strony internetowej bez konieczności odwoływania się do zewnętrznego pliku. W poniższym kodzie dla kontrastu dodałem również czarne tło
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!-- Czarne tło -->
<rect width="100%" height="100%" fill="black" />
<!-- Żółte koło -->
<circle cx="50" cy="50" r="40" fill="yellow" />
</svg>Obraz
Idąc dalej tą drogą można zrobić prosty obrazek “uśmiechu”
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!-- Żółte koło -->
<circle cx="50" cy="50" r="40" fill="yellow" />
<!-- Lewe oko -->
<circle cx="40" cy="40" r="5" fill="black" />
<!-- Prawe oko -->
<circle cx="60" cy="40" r="5" fill="black" />
<!-- Uśmiech -->
<path d="M40 60 Q50 70 60 60" fill="none" stroke="black" />
</svg>
Obraz
- CSS – style umożliwiają kontrolę nad ich wyglądem. Można zmieniać kolory, kształty, wielkość i inne właściwości za pomocą stylów CSS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" class="svg-container">
<style>
.svg-container {
background-color: black;
}
.yellow-circle {
fill: yellow;
}
.black-eye {
fill: black;
}
.smile {
fill: none;
stroke: black;
}
</style>
<!-- Żółte koło -->
<circle cx="50" cy="50" r="40" class="yellow-circle" />
<!-- Lewe oko -->
<circle cx="40" cy="40" r="5" class="black-eye" />
<!-- Prawe oko -->
<circle cx="60" cy="40" r="5" class="black-eye" />
<!-- Uśmiech -->
<path d="M40 60 Q50 70 60 60" fill="none" stroke="black" class="smile" />
</svg>Obraz
- JavaScript – SVG można łączyć z do tworzenia interaktywnych i dynamicznych elementów na stronie. JavaScript umożliwia manipulację elementami SVG, animacje, obsługę zdarzeń i wiele innych. Przez co strony mogą być podatne na ataki XSS – o (nie)bezpieczeństwie plików SVG będzie później 🙂
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" class="svg-container">
<style>
.svg-container {
background-color: black;
}
.yellow-circle {
fill: yellow;
}
.black-eye {
fill: black;
}
.smile {
fill: none;
stroke: black;
}
</style> <!-- Żółte koło --> <circle id="animatedCircle" cx="50" cy="50" r="40" class="yellow-circle" /> <!-- Lewe oko --> <circle cx="40" cy="40" r="5" class="black-eye" /> <!-- Prawe oko --> <circle cx="60" cy="40" r="5" class="black-eye" /> <!-- Uśmiech --> <path d="M40 60 Q50 70 60 60" fill="none" stroke="black" class="smile" /></svg><!-- Animacja w JavaScript --><script> const animatedCircle = document.getElementById('animatedCircle'); function animateCircle() { animatedCircle.setAttribute('r', Math.abs(Math.sin(Date.now() / 1000) * 20) + 30); requestAnimationFrame(animateCircle); } animateCircle();
</script>Obraz z animacją
- Canvas API – umożliwia rysowanie grafiki bitmapowej na elemencie canvas w HTML. Istnieje nawet metoda drawImage(), która pozwala na renderowanie zawartości pliku SVG na obszarze canvas
- SMIL – Ta specyfikacja umożliwiająca tworzenie animacji w plikach SVG
- WebGL – mimo iż SVG domyślnie jest dwuwymiarowe, to w połączeniu z WebGL może być używane w bardziej zaawansowanych grafikach czy animacjach 3D.
SEO-Friendly SVG
Czyli jak wykorzystać semantykę by zmaksymalizować efekty pozycjonowania
Semantyka SVG (Scalable Vector Graphics) odnosi się do możliwości osadzania znaczeń i metadanych w SVG. Jak już wcześniej wspomniałem właśnie ten format bazuje na kodzie XML. Dzięki czemu istnieje kilka węzłów w SVG, które z powodzeniem można stosować w kwestii SEO. Te węzły mogą być zastosowane do dowolnego elementu w SVG lub do całego dokumentu, np.: title, desc, metadata, id. Mimo że jest możliwość ich dodania, to i tak proponuję korzystać z alt tagów podczas linkowania do obrazów SVG. Dlaczego? bo jest 100% pewność, że google prawidłowo odczyta. W niektórych przypadkach te elementy semantyczne nie są dostępne na poziomie widocznym lub powierzchownym; użytkownik może mieć do nich dostęp tylko wtedy, gdy autor użyje ich w skrypcie lub gdy odpowiednia przeglądarka, taka jak czytnik ekranu, uzyska do nich dostęp za pośrednictwem DOM i przedstawi je odpowiednim sposobem, na przykład czytając je na głos.
Z resztą daleko nie trzeba szukać, bo w oficjalnej dokumentacji google informuje wprost “Używaj opisowych nazw plików, tytułów i tekstu alternatywnego”. Z tego powodu warto też korzystać z systemu atrybutów ARIA w kontekście optymalizacji ikon SVG pod kątem SEO.
Co to jest Aria?
ARIA (Accessible Rich Internet Applications) jest zbiorem standardów, które precyzyjnie określają, w jaki sposób czytniki ekranu powinny się zachowywać gdy trafią na dany element strony. Przez dodanie atrybutów i ról ARIA do kodu SVG można dostosować ikony do różnych kontekstów i złożoności strony. Na przykład atrybuty
- aria-hidden=”true”
- role=”img”
informują czytnik ekranu, że dana ikona ma charakter dekoracyjny i nie powinna być brana pod uwagę. To jest istotne dla osób dotkniętych niepełnosprawnością, np. wzroku lub słuchu, w takim razie ewidentnie optymalizacja z użyciem ARIA może zwiększyć dostępność i użyteczność strony pod UX.
Od razu zaznaczam, że czasem brak ARIA jest lepsze niż złe ARIA 🙂
(Nie)bezpieczne pliki SVG
Mimo iż ten format jest grafiką wektorową, to niektóre aspekty mogą stanowić zagrożenie związane z atakami typu XSS (Cross-Site Scripting). Polega to na wstrzykiwaniu złośliwego kodu JavaScript na stronie internetowej, który następnie jest wykonany przez przeglądarkę użytkownika. Jak już wcześniej wspomniałem pliki SVG, będące dokumentami XML, umożliwiają osadzanie kodu JavaScript w przypadku nieprawidłowej walidacji danych wejściowych i niewłaściwego przetwarzania plików SVG na serwerze.
Przykładowy scenariusz:
- Zaimplementowanie kodu JavaScript
- Upload niesprawdzonego / nieoczyszczonego pliku
- Atakujący wchodzi na stronę z obrazem
- Ukryty kod w pliku SVG kradnie ciasteczka / tworzy nowe ciasteczka / przekierowuje na inną stronę / tworzy fałszywe strony logowania (niepotrzebne skreślić)
Dlatego przed każdym uploadem warto zastosować sanityzację.
Co to jest sanityzacja SVG?
Sanityzacja to nic innego jak oczyszczenie kodu ze zbędnych dodatków. W kontekście plików opartych o XML sanityzacja polega na usuwaniu lub neutralizowaniu potencjalnie złośliwego kodu JavaScript osadzonego w danych wejściowych.
Na szczęście w repozytorium WordPress są gotowe wtyczki, które włączają wsparcie dla uploadu SVG oraz przeprowadzają sanityzację.
Najpopularniejszy jest
ale jeśli jednak mam wybrać, to zdecydowanie wybieram poniższe “Safe SVG” autorstwa 10up, ponieważ korzysta z biblioteki SVGO, która jest rozwijana na githubie (https://github.com/svg/svgo). Po prostu mam większe zaufanie do tej wtyczki aniżeli do powyższej
Nie chcesz korzystać z wtyczek? Nie ma problemu, poniżej przedstawiam kod, który umożliwi upload plików SVG (bez sanityzacji!)
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');Wrzuć ten kod na sam koniec pliku functions.php swojego motywu
Narzędzia SVG
Poniżej przedstawiam listę narzędzi związanych z plikami SVG i grafiką wektorową:
- Edytory:
- Inkscape: Bezpłatny i otwarty program do edycji grafiki wektorowej ze wsparciem dla opisywanego formatu
- Adobe Illustrator: Płatny profesjonalny program do projektowania grafiki wektorowej
- Vectr: Darmowy edytor wektorowy dostępny online i jako program
- Konwertery:
- Convertio: Narzędzie online do konwersji plików SVG na różne formaty
- CloudConvert: j/w
- Optymalizatory:
- SVGO (SVG Optimizer): Narzędzie do optymalizacji plików SVG pod kątem rozmiaru i wydajności. Właśnie na tej samej bibliotece została stworzona wtyczka do wordpressa “Safe SVG”, którą osobiście polecam jeśli ktoś chce mieć wszystko w jednym miejscu.
- SVGOMG: Narzędzie online do optymalizacji plików za pomocą interfejsu użytkownika.
- Sprawdzanie zgodności:
- W3C SVG Validator: Narzędzie online do sprawdzania zgodności plików SVG z normami W3C.
- Animacje:
- GreenSock Animation Platform (GSAP): Biblioteka do tworzenia zaawansowanych animacji
- Snap.svg: Biblioteka do manipulacji i animacji plików
- Generatory SVG:
- Hero Patterns: Generuje wzory w formacie SVG do wykorzystania w projektach.
- Blobmaker: Tworzy losowe kształty, które mogą być używane jako tła.
- Biblioteki i Frameworki SVG:
- Edukacja i Dokumentacja:
- MDN Web Docs – SVG: Dokumentacja na temat SVG na stronie Mozilla Developer Network.
- Zasoby Grafiki SVG:
- SVGRepo: Platforma oferująca darmowe pliki do pobrania
- FontAwesome: Zestaw ikon
Jaki wpływ na SEO i bezpieczeństwo strony mają pliki SVG – podsumowanie
Wykorzystanie SVG na stronie ma dużo zalet i jeśli mógłbym w prosty sposób stworzyć podobne obrazy tak jak w jpg czy png, to… po prostu korzystałbym tylko z tego formatu. Skalowalność i proste animacje mogą przynieść wiele korzyści pod kątem SEO i UX oraz dostępności. Optymalizacja semantyki SVG, czyli dodanie odpowiednich znaczników i metadanych, może pozwolić na lepsze zrozumienie treści przez wyszukiwarki internetowe, a elementy semantyczne, takie jak “title” czy “desc” mogą być używane do optymalizacji pod kątem indeksacji przez wyszukiwarki. Dodatkowo, zastosowanie atrybutów ARIA umożliwia dostosowanie ikon SVG poprawia dostępność dla osób z niepełnosprawnościami.
Jednak, należy być świadomym potencjalnych zagrożeń związanych z (nie)bezpieczeństwem plików SVG. Wstrzykiwanie złośliwego kodu JavaScript poprzez nieprawidłową walidację danych wejściowych i niewłaściwe przetwarzanie plików SVG na serwerze może prowadzić do ataków typu XSS, dlatego ważne jest oczyszczenie ze zbędnych dodatków często nawet niebezpiecznych.
PS obrazek wyróżniony tego artykułu to SVG (nie pierwszy, nie ostatni)
Licencja W3C SVG Logo: https://www.w3.org/2009/08/svg-logos.html#LogoWithoutW3C / https://www.w3.org/copyright/document-license-2002/