SVG

SVG, czyli Scalable Vector Graphics, to język znaczników oparty na XML do opisywania dwuwymiarowych grafik wektorowych, który jest wspierany w HTML5. SVG pozwala na tworzenie złożonych grafik, które są skalowalne bez utraty jakości, co oznacza, że mogą być powiększane lub zmniejszane bez wpływu na ich wyraźność. SVG jest szeroko stosowany w projektowaniu stron internetowych, grafikach, logotypach oraz wszelkich aplikacjach wymagających precyzyjnych i skalowalnych obrazów.

SVG oferuje różnorodne możliwości, w tym animacje, filtry, interakcje z użytkownikiem za pomocą JavaScript, a także integrację z CSS. Możliwość bezpośredniego osadzenia kodu SVG w HTML5 ułatwia tworzenie dynamicznych i interaktywnych stron internetowych.

Przykład zastosowania SVG w HTML5

Poniższy kod demonstruje podstawowe zastosowanie SVG w HTML5. Zawiera on kilka kluczowych elementów SVG, takich jak prostokąty, koła, i tekst, aby pokazać różnorodność możliwości tego formatu.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podstawy SVG w HTML5</title>
</head>
<body>
    <!-- Prosty obrazek SVG z kilkoma elementami -->
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <!-- Tło -->
        <rect width="100%" height="100%" fill="lightgrey" />
        <!-- Prostokąt -->
        <rect x="50" y="50" width="100" height="100"
              fill="red" stroke="black" stroke-width="2" />
        <!-- Koło -->
        <circle cx="200" cy="200" r="50" fill="green" />
        <!-- Tekst -->
        <text x="50" y="200" font-family="Arial" font-size="24" fill="blue">
            SVG w HTML5
        </text>
    </svg>
</body>
</html>

W tym przykładzie przedstawiono podstawową strukturę SVG, włączając w to:

  • <svg>: Główny kontener SVG, określający przestrzeń, w której będzie rysowana grafika.
  • <rect>: Element do tworzenia prostokątów.
  • <circle>: Element do tworzenia kół.
  • <text>: Element do wstawiania tekstu.

Możliwości SVG

SVG oferuje szeroki zakres możliwości, które mogą być wykorzystywane do tworzenia zaawansowanych i interaktywnych grafik:

  1. Animacje: SVG wspiera animacje, które mogą być tworzone zarówno za pomocą atrybutów SVG, jak i CSS.
  2. Filtry: Możliwość stosowania różnorodnych filtrów, takich jak rozmycie czy zmiana kolorów.
  3. Interakcje: Możliwość interakcji z elementami SVG za pomocą JavaScript.
  4. Integracja z CSS: Stylowanie grafik SVG za pomocą CSS, co umożliwia łatwą zmianę wyglądu bez konieczności modyfikacji samego kodu SVG.

Podsumowanie

SVG w HTML5 otwiera przed projektantami i programistami drzwi do tworzenia zaawansowanych grafik wektorowych, które są skalowalne, wydajne i interaktywne. Dzięki wsparciu dla animacji, filtrów, i możliwościom interakcji, SVG staje się potężnym narzędziem w arsenale każdego twórcy stron internetowych, pozwalając na tworzenie bogatych wizualnie i funkcjonalnie aplikacji webowych.

Poprzedni
Następny
Scroll to Top