Kompletny przewodnik po SVG – od podstaw do zaawansowanych technik

SVG (Scalable Vector Graphics) to format grafiki wektorowej, który możesz używać bezpośrednio na stronach internetowych. W przeciwieństwie do zwykłych obrazków JPG czy PNG, SVG składa się z matematycznych opisów kształtów – dzięki temu możesz go powiększać w nieskończoność bez utraty jakości.

Dlaczego warto używać SVG?

Zanim przejdziemy do szczegółów, zobaczmy czym SVG wyróżnia się na tle tradycyjnych formatów graficznych: Skalowalność – To najważniejsza zaleta. Bez względu na to czy grafika jest wyświetlana na małym ekranie telefonu czy wielkim billboardzie, zawsze wygląda ostro i czytelnie. Nie ma mowy o pikselacji. Mały rozmiar pliku – Proste ikony i loga w SVG ważą często kilka KB, podczas gdy ich odpowiedniki PNG mogą mieć dziesiątki KB. Edytowalność – Możesz zmieniać kolory, rozmiary i właściwości SVG używając CSS i JavaScript, dokładnie tak jak zwykłe elementy HTML. Przyjazność dla SEO – Tekst zawarty w SVG jest odczytywalny przez Google i inne wyszukiwarki. Dostępność – Możesz dodać opisy dla osób korzystających z czytników ekranu. Animacje – SVG świetnie współpracuje z animacjami CSS, a nawet ma własne natywne możliwości animacji.

Podstawy SVG – jak to działa?

SVG to tak naprawdę kod XML, który opisuje kształty, kolory i pozycje elementów graficznych. Możesz go wstawiać bezpośrednio do HTML:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
</svg>

Ten kod stworzy niebieskie koło. Zobaczmy co oznaczają poszczególne części:

• width i height – wymiary całego kontenera SVG (tutaj 200×200 pikseli)
• circle – to jest element koła
• cx i cy – współrzędne środka koła (100, 100)
• r – promień koła (80 pikseli)
• fill – kolor wypełnienia

Układ współrzędnych w SVG Ważne: SVG używa układu współrzędnych, gdzie punkt (0, 0) znajduje się w lewym górnym rogu. Wartość X rośnie w prawo, a Y rośnie w dół (tak, w dół!). To trochę sprzeczne z intuicją z lekcji matematyki, ale szybko się przyzwyczaisz.

Podstawowe kształty w SVG

SVG ma kilka wbudowanych kształtów, które możesz łatwo rysować. Zacznijmy od najprostszych.

Koło (circle)

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
</svg>

Trzy liczby definiują koło: cx i cy to pozycja środka, a r to promień. Wszystko w pikselach.

Prostokąt (rect)

<svg width="200" height="150">
  <rect x="50" y="30" width="100" height="90" fill="#e74c3c" />
</svg>

Prostokąt definiujesz przez:

• x, y – pozycja lewego górnego rogu
• width, height – szerokość i wysokość
• rx, ry (opcjonalne) – zaokrąglenie rogów

Zaokrąglone rogi to proste:

<rect x="50" y="30" width="100" height="90" rx="10" fill="#e74c3c" />

Elipsa (ellipse)

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="50" fill="#2ecc71" />
</svg>

Podobnie jak koło, ale ma dwa promienie: rx (poziomy) i ry (pionowy).

Linia (line)

<svg width="200" height="150">
  <line x1="20" y1="20" x2="180" y2="130" 
        stroke="#9b59b6" stroke-width="3" />
</svg>

Linia łączy dwa punkty. Ważne: linie nie mają fill, tylko stroke (obrys). Domyślnie są niewidoczne, więc zawsze musisz dodać kolor obrysu.

Wielokąty (polygon i polyline)

Polyline to łamana – seria połączonych linii:

<svg width="200" height="150">
  <polyline points="20,100 60,40 100,80 140,20 180,60" 
            fill="none" stroke="#e67e22" stroke-width="2" />
</svg>

Polygon to zamknięty kształt (ostatni punkt łączy się z pierwszym):

<svg width="200" height="200">
  <polygon points="100,20 180,180 20,180" fill="#f39c12" />
</svg>

W atrybucie points wpisujesz kolejne współrzędne oddzielone spacjami lub przecinkami.

Ścieżki (path) – najpotężniejsze narzędzie SVG

Element path to szwajcarski scyzoryk SVG. Możesz nim narysować dosłownie wszystko – od prostych linii po skomplikowane logo. Ścieżka używa specjalnych komend w atrybucie d:

<svg width="200" height="200">
  <path d="M 50 50 L 150 50 L 150 150 Z" 
        fill="#1abc9c" stroke="#16a085" stroke-width="2" />
</svg>

Podstawowe komendy ścieżek:

• M x y (Move To) – przesuń „pióro” do punktu bez rysowania
• L x y (Line To) – narysuj linię do punktu
• H x (Horizontal) – linia pozioma do pozycji x
• V y (Vertical) – linia pionowa do pozycji y
• Z (Close) – zamknij ścieżkę (połącz z początkiem)

Przykład – narysujmy trójkąt:

<path d="M 100 50 L 150 150 L 50 150 Z" fill="blue" />

To znaczy: idź do (100, 50), narysuj linię do (150, 150), potem do (50, 150), i zamknij ścieżkę.

Krzywe Béziera – zakrzywione linie

Krzywa kwadratowa (Q) ma jeden punkt kontrolny:

<svg width="200" height="150">
  <path d="M 20 100 Q 100 20 180 100" 
        fill="none" stroke="#3498db" stroke-width="3" />
</svg>

Składnia: Q kontrolny-x kontrolny-y końcowy-x końcowy-yKrzywa sześcienna (C) ma dwa punkty kontrolne, dając większą kontrolę:

<svg width="200" height="150">
  <path d="M 20 100 C 20 20, 180 20, 180 100" 
        fill="none" stroke="#9b59b6" stroke-width="3" />
</svg>

Składnia: C k1-x k1-y k2-x k2-y końcowy-x końcowy-y Punkty kontrolne „przyciągają” krzywą do siebie, ale sama krzywa przez nie nie przechodzi. Łuki (A) – fragmenty okręgów i elips:

<path d="M 30 75 A 50 50 0 1 1 170 75" 
      fill="none" stroke="#e74c3c" stroke-width="3" />

Łuki są skomplikowane, ale świetne do rysowania zaokrąglonych kształtów. W praktyce często używa się edytorów graficznych do ich generowania.

Kolory i stylowanie

SVG ma dwie główne właściwości kolorów: fill (wypełnienie) i stroke (obrys).

Fill – wypełnienie kształtu

<!-- Różne sposoby definiowania koloru -->
<circle cx="50" cy="50" r="30" fill="red" />
<circle cx="150" cy="50" r="30" fill="#3498db" />
<circle cx="250" cy="50" r="30" fill="rgb(231, 76, 60)" />
<circle cx="350" cy="50" r="30" fill="rgba(46, 204, 113, 0.5)" />

<!-- Brak wypełnienia -->
<circle cx="450" cy="50" r="30" fill="none" stroke="black" />

Stroke – obrys kształtu

<svg width="300" height="150">
  <!-- Podstawowy obrys -->
  <line x1="20" y1="30" x2="280" y2="30" 
        stroke="#2ecc71" stroke-width="4" />
  
  <!-- Przerywana linia -->
  <line x1="20" y1="60" x2="280" y2="60" 
        stroke="#e74c3c" stroke-width="4" 
        stroke-dasharray="10 5" />
  
  <!-- Różny wzór przerw -->
  <line x1="20" y1="90" x2="280" y2="90" 
        stroke="#3498db" stroke-width="4" 
        stroke-dasharray="5 10 15" />
  
  <!-- Zaokrąglone końce -->
  <line x1="20" y1="120" x2="280" y2="120" 
        stroke="#9b59b6" stroke-width="10" 
        stroke-linecap="round" />
</svg>

Właściwości stroke:

• stroke – kolor obrysu
• stroke-width – grubość linii
• stroke-dasharray – wzór przerwanej linii (długość kreski i przerwy)
• stroke-linecap – zakończenie linii: butt (domyślne), round (zaokrąglone), square
• stroke-linejoin – połączenie linii: miter (ostre), round (zaokrąglone), bevel (ścięte)
• stroke-opacity – przezroczystość obrysu (0-1)

ViewBox – klucz do responsywnego SVG

ViewBox to jedna z najważniejszych, ale często niezrozumianych właściwości SVG. Pozwala oddzielić rzeczywisty rozmiar SVG od jego wewnętrznego układu współrzędnych. Wyobraź sobie, że patrzysz na mapę przez okno. Rozmiar okna (width/height) to fizyczny rozmiar SVG na stronie, a viewBox to obszar mapy, który widzisz.

<svg width="400" height="200" viewBox="0 0 100 50">
  <circle cx="50" cy="25" r="20" fill="#3498db" />
</svg>

Co się tu dzieje?

• SVG ma fizyczny rozmiar 400×200 pikseli na stronie
• Ale wewnętrzny układ współrzędnych to tylko 100×50 jednostek
• Koło jest w środku tego układu (50, 25)
• SVG automatycznie przeskaluje ten mały układ do dużego rozmiaru

Składnia: viewBox=”min-x min-y width height”

Responsywne SVG

Żeby SVG było responsywne i zajmowało 100% szerokości rodzica:

<svg width="100%" viewBox="0 0 200 100">
  <rect x="50" y="25" width="100" height="50" fill="#2ecc71" />
</svg>

Możesz też całkowicie usunąć width i height, a ustawić je w CSS:

<svg viewBox="0 0 200 100" class="my-svg">
  <rect x="50" y="25" width="100" height="50" fill="#2ecc71" />
</svg>

<style>
.my-svg {
  width: 100%;
  height: auto;
}
</style>

preserveAspectRatio kontroluje jak SVG się skaluje:

• xMidYMid meet (domyślne) – wyśrodkowane, zachowuje proporcje, widoczne całe SVG
• xMidYMid slice – wypełnia cały obszar, może przyciąć części SVG
• none – rozciąga bez zachowania proporcji

Grupowanie i organizacja elementów

Element <g> (grupa) pozwala organizować powiązane elementy i stosować do nich wspólne właściwości:

<svg width="200" height="200">
  <g id="house" fill="#e67e22" stroke="#d35400" stroke-width="2">
    <rect x="50" y="80" width="100" height="80" />
    <polygon points="100,40 150,80 50,80" />
    <rect x="80" y="120" width="20" height="40" fill="#3498db" />
  </g>
</svg>

Wszystkie elementy wewnątrz <g> dziedziczą jego właściwości (fill, stroke), chyba że nadpiszesz je lokalnie.

Transformacje

Możesz przesuwać, obracać, skalować i pochylać elementy SVG:

<svg width="300" height="300">
  <!-- Przesunięcie -->
  <rect x="0" y="0" width="50" height="50" fill="#3498db" 
        transform="translate(50, 50)" />
  
  <!-- Obrót (kąt, punkt-środka-x, punkt-środka-y) -->
  <rect x="120" y="50" width="50" height="50" fill="#e74c3c" 
        transform="rotate(45, 145, 75)" />
  
  <!-- Skalowanie -->
  <circle cx="250" cy="75" r="20" fill="#2ecc71" 
          transform="scale(1.5)" />
  
  <!-- Kombinacja transformacji -->
  <rect x="150" y="150" width="50" height="50" fill="#f39c12" 
        transform="translate(20, 20) rotate(45) scale(0.8)" />
</svg>

Rodzaje transformacji:

• translate(x, y) – przesunięcie o x pikseli w prawo i y pikseli w dół
• rotate(kąt, cx, cy) – obrót o kąt stopni wokół punktu (cx, cy)
• scale(x, y) – skalowanie (1 = 100%, 2 = 200%, 0.5 = 50%)
• skewX(kąt), skewY(kąt) – pochylenie

Transformacje wykonują się od prawej do lewej w zapisie!

Tekst w SVG

SVG może zawierać prawdziwy tekst, nie tylko grafiki. To świetne dla SEO i dostępności.

<svg width="300" height="100">
  <text x="150" y="50" 
        font-family="Arial" 
        font-size="24" 
        fill="#2c3e50" 
        text-anchor="middle">
    Hello SVG!
  </text>
</svg>

Ważne właściwości tekstu:

• x, y – pozycja tekstu (uwaga: y to baseline, nie górna krawędź!)
• font-family – czcionka
• font-size – rozmiar czcionki
• fill – kolor tekstu
• text-anchor – wyrównanie: start (lewo), middle (środek), end (prawo)
• font-weight – grubość: normal, bold, 700
• font-style – styl: normal, italic

Tekst wzdłuż ścieżki

Możesz układać tekst wzdłuż krzywej lub dowolnej ścieżki:

<svg width="400" height="200">
  <defs>
    <path id="curve" d="M 50 150 Q 200 50 350 150" />
  </defs>
  
  <text font-size="20" fill="#2c3e50">
    <textPath href="#curve">
      Tekst wzdłuż krzywej!
    </textPath>
  </text>
</svg>

Wieloliniowy tekst

SVG nie łamie tekstu automatycznie. Musisz użyć elementu <tspan>:

<svg width="300" height="150">
  <text x="20" y="30" font-size="16" fill="#34495e">
    <tspan x="20" dy="0">Pierwsza linia</tspan>
    <tspan x="20" dy="25">Druga linia</tspan>
    <tspan x="20" dy="25" font-weight="bold" fill="#e74c3c">
      Trzecia linia bold
    </tspan>
  </text>
</svg>

Atrybut dy przesuwa tekst w pionie względem poprzedniej linii.

Gradienty – płynne przejścia kolorów

Gradienty w SVG definiujesz w sekcji <defs>, a potem odwołujesz się do nich przez fill=”url(#id)”.

Gradient liniowy

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3498db" />
      <stop offset="100%" stop-color="#2ecc71" />
    </linearGradient>
  </defs>
  
  <rect x="50" y="50" width="200" height="100" fill="url(#gradient1)" />
</svg>

Parametry:

• x1, y1, x2, y2 – kierunek gradientu (od punktu do punktu)
• 0% 0% do 100% 0% = poziomy gradient
• 0% 0% do 0% 100% = pionowy gradient
• 0% 0% do 100% 100% = przekątny gradient
• stop – punkt kolorystyczny
• offset – pozycja koloru (0% = początek, 100% = koniec)

Możesz dodać więcej punktów kolorów:

<linearGradient id="rainbow">
  <stop offset="0%" stop-color="red" />
  <stop offset="33%" stop-color="yellow" />
  <stop offset="66%" stop-color="blue" />
  <stop offset="100%" stop-color="green" />
</linearGradient>

Gradient radialny

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient2">
      <stop offset="0%" stop-color="#f39c12" />
      <stop offset="50%" stop-color="#e74c3c" />
      <stop offset="100%" stop-color="#c0392b" />
    </radialGradient>
  </defs>
  
  <circle cx="150" cy="100" r="80" fill="url(#gradient2)" />
</svg>

Gradient radialny rozchodzi się od środka na zewnątrz, tworząc efekt kulkowy lub świetlny.

Animacje w SVG

SVG można animować na dwa sposoby: przez CSS lub przez natywne animacje SMIL.

Animacje CSS

To najprostszy sposób – używasz zwykłych animacji CSS:

<svg width="200" height="200">
  <style>
    .rotating {
      transform-origin: center;
      animation: rotate 3s linear infinite;
    }
    
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .pulsing {
      animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
  </style>
  
  <rect class="rotating" x="75" y="75" width="50" height="50" fill="#3498db" />
  <circle class="pulsing" cx="100" cy="100" r="30" fill="#e74c3c" />
</svg>

Natywne animacje SVG (SMIL)

SVG ma wbudowany system animacji, który nie wymaga CSS ani JavaScript:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#2ecc71">
    <!-- Animacja promienia -->
    <animate attributeName="r" 
             from="20" 
             to="80" 
             dur="2s" 
             repeatCount="indefinite" 
             direction="alternate" />
    
    <!-- Animacja koloru -->
    <animate attributeName="fill" 
             values="#2ecc71;#e74c3c;#3498db;#2ecc71" 
             dur="4s" 
             repeatCount="indefinite" />
  </circle>
</svg>

Animacja wzdłuż ścieżki:

<svg width="400" height="200">
  <defs>
    <path id="motionPath" d="M 50 100 Q 200 20 350 100" />
  </defs>
  
  <circle r="10" fill="#e74c3c">
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath href="#motionPath" />
    </animateMotion>
  </circle>
</svg>

Sposoby osadzania SVG w HTML

Masz kilka opcji dodawania SVG do strony. Każda ma swoje plusy i minusy.

1. Inline SVG (bezpośrednio w HTML)

<!DOCTYPE html>
<html>
<body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="#3498db" />
  </svg>
</body>
</html>

✅ Zalety: pełna kontrola przez CSS i JavaScript, najlepsze dla interaktywności, nie wymaga osobnego zapytania HTTP ❌ Wady: zwiększa rozmiar HTML, nie jest cache’owane osobno

2. Jako obrazek <img>

<img src="logo.svg" alt="Logo firmy" width="200">

✅ Zalety: najprostsze w użyciu, cache’owanie przez przeglądarkę, znane wszystkim ❌ Wady: brak stylowania przez zewnętrzny CSS, brak interaktywności JavaScript

3. Jako tło CSS

.element {
  background-image: url('pattern.svg');
  background-size: cover;
  width: 300px;
  height: 200px;
}

✅ Zalety: separacja treści od prezentacji, dobre dla wzorów i dekoracji ❌ Wady: brak dostępu do struktury SVG, brak interaktywności

4. Przez <object>

<object data="graphic.svg" type="image/svg+xml" width="300">
  Twoja przeglądarka nie obsługuje SVG
</object>

✅ Zalety: zachowana struktura DOM SVG, możliwość skryptowania ❌ Wady: bardziej skomplikowane, rzadziej używane

5. Przez <embed> lub <iframe>

<embed src="graphic.svg" type="image/svg+xml" />
<iframe src="graphic.svg"></iframe>

✅ Zalety: izolacja stylów ❌ Wady: zbyt skomplikowane dla większości przypadków, gorsze dla SEO Które wybrać? Dla ikon i grafik, które chcesz stylować – używaj inline SVG. Dla prostych obrazków i logo – używaj <img>. Dla wzorów tła – używaj CSS background.

Stylowanie SVG przez CSS

Inline SVG możesz stylować dokładnie jak zwykłe elementy HTML:

<svg width="200" height="200" class="my-svg">
  <circle class="main-circle" cx="100" cy="100" r="50" />
</svg>

<style>
.my-svg {
  background: #f0f0f0;
}

.main-circle {
  fill: #3498db;
  stroke: #2980b9;
  stroke-width: 3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.main-circle:hover {
  fill: #e74c3c;
  transform: scale(1.1);
}
</style>

Właściwości CSS specyficzne dla SVG:

• fill – kolor wypełnienia
• stroke – kolor obrysu
• stroke-width – grubość obrysu
• stroke-dasharray – przerywana linia
• opacity – przezroczystość całego elementu
• fill-opacity – przezroczystość tylko wypełnienia
• stroke-opacity – przezroczystość tylko obrysu

Reużywalność – definiowanie i kopiowanie elementów

Element <defs> (definitions) pozwala definiować elementy do późniejszego użycia. Elementy w <defs> nie są renderowane, dopóki ich nie „wywołasz”.

<svg width="300" height="200">
  <defs>
    <!-- Definicje do ponownego użycia -->
    <circle id="dot" r="5" fill="#e74c3c" />
    
    <g id="tree">
      <rect x="-5" y="0" width="10" height="30" fill="#8B4513" />
      <circle cx="0" cy="-10" r="20" fill="#2ecc71" />
    </g>
  </defs>
  
  <!-- Użycie zdefiniowanych elementów -->
  <use href="#dot" x="50" y="50" />
  <use href="#dot" x="100" y="80" />
  <use href="#dot" x="150" y="60" />
  
  <use href="#tree" transform="translate(50, 150)" />
  <use href="#tree" transform="translate(150, 150) scale(1.5)" />
</svg>

Element <use> tworzy kopię zdefiniowanego elementu:

• href – odwołanie do id elementu (z #)
• x, y – pozycja kopii
• transform – transformacje kopii

To świetny sposób na tworzenie ikon – definiujesz raz, używasz wszędzie!

Praktyczne przykłady użycia SVG

Zobaczmy jak stworzyć typowe elementy interfejsu.

Ikona menu (hamburger)

<svg width="40" height="40" viewBox="0 0 40 40" class="menu-icon">
  <style>
    .menu-icon line {
      stroke: #333;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.3s ease;
    }
    .menu-icon:hover line {
      stroke: #3498db;
    }
  </style>
  
  <line x1="8" y1="12" x2="32" y2="12" />
  <line x1="8" y1="20" x2="32" y2="20" />
  <line x1="8" y1="28" x2="32" y2="28" />
</svg>

Logo z gradientem

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#667eea" />
      <stop offset="100%" stop-color="#764ba2" />
    </linearGradient>
  </defs>
  
  <circle cx="100" cy="100" r="80" fill="url(#logo-gradient)" />
  <text x="100" y="120" 
        font-family="Arial, sans-serif" 
        font-size="60" 
        font-weight="bold"
        fill="white" 
        text-anchor="middle">
    L
  </text>
</svg>

Loading spinner

<svg width="100" height="100" viewBox="0 0 100 100">
  <style>
    .spinner {
      transform-origin: center;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
  
  <circle class="spinner" 
          cx="50" cy="50" r="40" 
          fill="none" 
          stroke="#3498db" 
          stroke-width="6"
          stroke-dasharray="60 200" 
          stroke-linecap="round" />
</svg>

System ikon SVG sprite

To profesjonalny sposób zarządzania ikonami na stronie:

<!-- Definicje ikon (ukryte) -->
<svg style="display: none;">
  <defs>
    <symbol id="icon-heart" viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </symbol>
    
    <symbol id="icon-star" viewBox="0 0 24 24">
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
    </symbol>
    
    <symbol id="icon-user" viewBox="0 0 24 24">
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
    </symbol>
  </defs>
</svg>

<!-- Użycie ikon -->
<svg width="24" height="24" fill="#e74c3c">
  <use href="#icon-heart" />
</svg>

<svg width="32" height="32" fill="#f39c12">
  <use href="#icon-star" />
</svg>

<svg width="24" height="24" fill="#3498db">
  <use href="#icon-user" />
</svg>

Optymalizacja SVG

SVG z edytorów graficznych często zawiera mnóstwo zbędnego kodu. Oto jak to naprawić.

Co można zoptymalizować?

Przed optymalizacją (350 bajtów):

<svg width="100.000" height="100.000" xmlns="http://www.w3.org/2000/svg">
  <!-- Created with Adobe Illustrator 24.0.0 -->
  <metadata>...mnóstwo danych...</metadata>
  <circle cx="50.000" cy="50.000" r="40.000" fill="#3498db" opacity="1.0" />
</svg>

Po optymalizacji (65 bajtów):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#3498db" />
</svg>

Zasady optymalizacji:

• Usuń metadane z edytorów (Adobe Illustrator, Sketch itp.)
• Zaokrąglij współrzędne do 1-2 miejsc po przecinku
• Usuń niewidoczne elementy
• Usuń domyślne wartości atrybutów (np. opacity=”1″)
• Połącz podobne style w CSS
• Usuń zbędne grupy i zagnieżdżenia
• Użyj krótszych komend path (h zamiast H, l zamiast L gdy możliwe)

Narzędzia do optymalizacji:

• SVGO – narzędzie linii komend
• SVGOMG – wersja graficzna SVGO dostępna online
• Pluginy do bundlerów – automatyczna optymalizacja w procesie budowania

Dostępność SVG

SVG powinno być dostępne dla wszystkich użytkowników, włączając osoby korzystające z czytników ekranu.

<svg role="img" aria-labelledby="title desc">
  <title id="title">Logo firmy XYZ</title>
  <desc id="desc">Niebieskie koło z białą literą L w środku</desc>
  
  <circle cx="50" cy="50" r="40" fill="#3498db" />
  <text x="50" y="58" font-size="32" fill="white" text-anchor="middle">L</text>
</svg>

Najlepsze praktyki dostępności:

• Dodaj role=”img” dla grafik znaczących
• Użyj <title> dla krótkiego opisu (jak alt w img)
• Użyj <desc> dla dłuższego opisu jeśli potrzebny
• Połącz z aria-labelledby
• Dla dekoracyjnych SVG dodaj aria-hidden=”true”
• Upewnij się, że kontrast spełnia standardy WCAG (min. 4.5:1)

Dla czysto dekoracyjnego SVG:

<svg aria-hidden="true" focusable="false">
  <!-- dekoracyjna grafika -->
</svg>

Częste problemy i jak je rozwiązać

Problem: SVG nie skaluje się responsywnie

❌ Źle:

<svg width="500" height="300">
  <circle cx="250" cy="150" r="100" fill="blue" />
</svg>

✅ Dobrze:

<svg width="100%" viewBox="0 0 500 300">
  <circle cx="250" cy="150" r="100" fill="blue" />
</svg>

Rozwiązanie: Zawsze dodawaj viewBox i używaj procentowych wymiarów lub usuń height.

Problem: Tekst nie jest wyśrodkowany

❌ Źle:

<text x="100" y="100">Tekst</text>

✅ Dobrze:

<text x="100" y="100" 
      text-anchor="middle" 
      dominant-baseline="middle">
  Tekst
</text>

Rozwiązanie: Użyj text-anchor=”middle” dla poziomego i dominant-baseline=”middle” dla pionowego wyrównania.

Problem: Nie mogę zmienić koloru SVG przez CSS

Jeśli używasz SVG jako <img>, nie możesz stylować go zewnętrznym CSS-em. Rozwiązania:

1. Użyj inline SVG zamiast <img>
2. Lub ustaw kolory jako currentColor w SVG, a potem zmieniaj właściwość color w CSS
3. Lub użyj CSS filters na <img> (ale to ograniczone)

Trik z currentColor:

<!-- W pliku SVG -->
<svg>
  <path fill="currentColor" d="..." />
</svg>

<!-- W HTML -->
<img src="icon.svg" style="color: red;">

Problem: Transformacje nie działają jak oczekiwano

❌ Może nie działać:

<circle cx="100" cy="100" r="50" transform="rotate(45)" />

✅ Lepiej:

<circle cx="100" cy="100" r="50" transform="rotate(45 100 100)" />

Rozwiązanie: Zawsze podawaj punkt obrotu w rotate(), lub użyj transform-origin w CSS.

Problem: SVG „przeskakuje” podczas ładowania strony

svg {
  display: block;  /* Usuwa dolny margines inline */
  max-width: 100%;
  height: auto;
}

/* Opcjonalnie ustaw wymiary kontenera */
.svg-container {
  width: 300px;
  height: 200px;
}

Rozwiązanie: Ustaw display: block i zdefiniuj wymiary kontenera lub samego SVG.

Porady i najlepsze praktyki

✅ Zawsze dodawaj viewBox – To klucz do responsywności SVG ✅ Używaj semantycznych id i class – Np. „main-logo”, „menu-icon”, nie „shape-1”, „path-2” ✅ Grupuj powiązane elementy w <g> – Łatwiej zarządzać i animować ✅ Definiuj reużywalne elementy w <defs> – DRY (Don’t Repeat Yourself) dotyczy też SVG ✅ Optymalizuj przed produkcją – Użyj SVGO lub podobnego narzędzia ✅ Dodawaj title i desc – Dla dostępności i SEO ✅ Używaj currentColor – Dla elastyczności kolorów ✅ Testuj w różnych przeglądarkach – Szczególnie jeśli musisz wspierać IE11 ❌ Nie używaj absolutnych px bez potrzeby – Preferuj względne jednostki ❌ Nie zagnieżdżaj zbyt głęboko – Może spowalniać rendering ❌ Nie używaj inline styles gdy możesz użyć CSS – Lepsze dla utrzymania kodu ❌ Nie zapomnij o fallback – Dla starszych przeglądarek jeśli potrzebne

Zasoby i narzędzia do nauki

Edytory graficzne

• Figma – Darmowe narzędzie do designu UI z doskonałym eksportem SVG
• Adobe Illustrator – Profesjonalny edytor wektorowy (płatny)
• Inkscape – Darmowa alternatywa open source
• Affinity Designer – Przystępna cenowo alternatywa dla Illustrator
• Sketch – Popularne narzędzie dla macOS

Narzędzia online

• SVGOMG – Optymalizacja plików SVG online
• SVG Path Editor – Edytor ścieżek w przeglądarce
• Boxy SVG – Prosty edytor online
• Method Draw – Przypomina Inkscape w przeglądarce

Biblioteki JavaScript

• Snap.svg – Jak jQuery, ale dla SVG
• D3.js – Potężna biblioteka do wizualizacji danych
• GreenSock (GSAP) – Zaawansowane animacje
• Vivus.js – Animowanie rysowania ścieżek
• Anime.js – Lekka biblioteka animacji

Zbiory ikon

• Heroicons – Piękne darmowe ikony SVG
• Feather Icons – Minimalistyczne ikony
• Font Awesome – Popularne ikony (też jako SVG)
• Lucide – Fork Feather Icons z większą liczbą ikon

Inspiracje

• unDraw – Darmowe ilustracje SVG
• SVG Backgrounds – Wzory tła SVG
• Dribbble – Inspiracje projektowe

Przewodniki i dokumentacja

• MDN Web Docs: SVG – Najbardziej kompletna dokumentacja
• CSS-Tricks: A Compendium of SVG Information – Świetne artykuły
• Sara Soueidan’s blog – Ekspertka od SVG
• W3Schools SVG Tutorial – Dla początkujących

Podsumowanie

SVG to potężne narzędzie do tworzenia skalowalnych, lekkich i interaktywnych grafik webowych. Nauczyłeś się: Podstaw – jak działa SVG, układ współrzędnych, podstawowe kształty (circle, rect, ellipse, line, polygon) i zaawansowane ścieżki (path) Stylowania – fill, stroke, gradienty, filtry i pełna kontrola przez CSS Responsywności – jak używać viewBox do skalowania i preserveAspectRatio do kontroli proporcji Zaawansowanych technik – grupowanie, transformacje, tekst, animacje, reużywalność przez defs i use Optymalizacji – jak zmniejszać rozmiar plików i dbać o wydajność Dostępności – jak sprawiać by SVG było przyjazne dla wszystkich użytkowników Najlepszy sposób nauki to praktyka. Zacznij od prostych ikon, potem przejdź do bardziej skomplikowanych grafik. Eksperymentuj w CodePen lub bezpośrednio w swoich projektach. Z czasem SVG stanie się naturalną częścią Twojego warsztatu! Powodzenia w tworzeniu pięknych, skalowalnych grafik! 🎨