Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - TEST WIEDZY NR 5



PYTANIE NR 9.
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="#ff0000"/>
</svg>
Na podstawie powyższego kodu SVG, określ jaki kolor ma obiekt wektorowy.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Atrybut fill w elemencie <circle> określa kolor wypełnienia obiektu. W kodzie podano fill="#ff0000", czyli zapis heksadecymalny RGB: FF=255 dla czerwieni, 00 dla zieleni i 00 dla niebieskiego. Oznacza to kolor czerwony.

Pełne wyjaśnienie:

W SVG kolor obiektu wektorowego najczęściej wynika z atrybutów prezentacyjnych przypisanych do elementu rysującego kształt. Dla koła (<circle>) kolor wypełnienia ustala atrybut fill.

W podanym fragmencie jest fill="#ff0000". To zapis heksadecymalny w formacie #RRGGBB, gdzie:

  • RR – składowa czerwieni,
  • GG – składowa zieleni,
  • BB – składowa niebieskiego.

Wartość FF oznacza maksimum (255) dla czerwieni, a 00

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza atrybut fill w pliku SVG?
Atrybut fill określa kolor wypełnienia kształtu w SVG (np. koła, prostokąta, ścieżki). Jeśli ustawisz fill="#ff0000", wnętrze obiektu będzie czerwone, niezależnie od tego, jaki jest obrys.
Jak odczytać kolor z zapisu heksadecymalnego #RRGGBB?
Zapis #RRGGBB to trzy pary cyfr szesnastkowych: czerwony (RR), zielony (GG) i niebieski (BB). FF oznacza maksimum, 00 brak składowej. Przykład: #ff0000 to czysta czerwień.
Dlaczego #ff0000 oznacza kolor czerwony?
W modelu RGB #ff0000 ma ustawione maksimum dla kanału czerwonego (FF=255) oraz zero dla zielonego i niebieskiego (00). Skoro świeci tylko "czerwony" kanał, wynikowym kolorem jest czerwony.
Jaka jest różnica między fill a stroke w SVG?
fill to kolor wypełnienia (wnętrze kształtu), a stroke to kolor obrysu (kontur). Możesz mieć np. fill="#ffffff" (białe wnętrze) i stroke="#000000" (czarny obrys). To odrębne ustawienia.
Czy brak atrybutu fill oznacza brak koloru w SVG?
Nie zawsze. Jeśli fill nie jest podany, kształt może dziedziczyć wartość z CSS lub z elementu nadrzędnego, albo użyć wartości domyślnej zależnej od kontekstu. Na egzaminie najpewniej analizujesz jawnie podany fill w kodzie.
Jak w SVG ustawić kolor zielony w zapisie HEX?
Dla "czystej" zieleni w RGB ustawiasz maksimum w kanale zielonym i zero w pozostałych: #00ff00. W SVG zapiszesz to np. jako fill="#00ff00". Uważaj na kolejność kanałów: najpierw czerwony, potem zielony, potem niebieski.
Czy można zapisać kolor w SVG nazwą, a nie kodem HEX?
Tak. SVG akceptuje wiele formatów kolorów znanych z CSS, np. nazwy (red), zapis RGB (rgb(255,0,0)) czy HEX (#ff0000). W zadaniach egzaminacyjnych często spotyka się HEX, bo jest jednoznaczny.
Jak sprawdzić, czy pytanie dotyczy wypełnienia czy obrysu obiektu?
Spójrz w kod: jeśli pojawia się fill, chodzi o wypełnienie; jeśli stroke, o obrys. Częsty błąd to odpowiedź na podstawie stroke, mimo że pytanie i kod wskazują fill. Warto zawsze wypisać w głowie: "fill=wnętrze, stroke=kontur".
Czy kolor obiektu w SVG zależy od width i height elementu <svg>?
Nie. width i height określają rozmiar obszaru rysunku (viewport), a nie barwę. Kolor wynika z atrybutów takich jak fill i stroke lub z reguł CSS. Rozmiar może wpłynąć na wygląd, ale nie na sam kolor.
Jak przygotować się do zadań egzaminacyjnych z kodu SVG?
Ćwicz czytanie krótkich fragmentów: rozpoznawaj elementy (<circle>, <rect>, <path>) i atrybuty (np. cx, r, fill, stroke). Dodatkowo utrwal mapowanie podstawowych kodów HEX na barwy (czerwień, zieleń, błękit, biel, czerń, żółć).
info

To pytanie poprawnie rozwiązuje 71% zdających egzamin. średnio łatwe

Eksperci podkreślają: "Atrybut fill w elemencie &lt;circle&gt; określa kolor wypełnienia obiektu."

Źródła:

  • MDN Web Docs: SVG &lt;circle&gt; element – opis atrybutów, w tym fill, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle - dostęp 2026-02-27
  • MDN Web Docs: SVG attribute fill – znaczenie i sposób zapisu koloru, https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill - dostęp 2026-02-27
  • W3C: Scalable Vector Graphics (SVG) 2 – definicje właściwości/atrybutów prezentacyjnych (m.in. fill), https://www.w3.org/TR/SVG2/ - dostęp 2026-02-27

Materiały:

  • Dokumentacja SVG: sekcje o elementach podstawowych (np. circle) i atrybutach prezentacyjnych
  • Materiały o zapisie kolorów RGB/HEX w grafice cyfrowej
  • Ćwiczenia praktyczne: edycja prostych plików SVG i podgląd w przeglądarce
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego