Zaawansowane obrazy picture, map, canvas, SVG

Wprowadzenie

Oprócz zwykłego <img>, HTML oferuje też dodatkowe możliwości: <picture>, mapy obrazkowe, <canvas> i grafika wektorowa SVG.

---

Teoria / Wyjaśnienia

• <picture> – pozwala podmieniać obraz w zależności od rozmiaru ekranu lub formatu.
• Mapy obrazkowe (<map>, <area>) – różne klikalne obszary na jednym obrazku.
• <canvas> – „płótno” do rysowania za pomocą JavaScript.
• SVG – grafika wektorowa, skalowalna bez utraty jakości.

---

Praktyczne przykłady

Przykład

<!-- Przyklad picture -->
<picture>
  <source srcset="obraz-duzy.jpg" media="(min-width: 800px)">
  <source srcset="obraz-sredni.jpg" media="(min-width: 500px)">
  <img src="obraz-maly.jpg" alt="Responsywny obraz">
</picture>

---

Ćwiczenie

1. Znajdź trzy wersje tego samego obrazka w różnych rozdzielczościach.
2. Zbuduj prosty przykład <picture>, który podmienia obraz w zależności od szerokości okna.
3. Dla chętnych: wstaw prostą ikonę SVG na stronę.