KWALIFIKACJA PGF4 - WRZESIEŃ 2014

PYTANIE NR 13.
Co przedstawia obraz formatu svg zdefiniowany za pomocą zamieszczonego w ramce kodu?
Ilustracja przedstawia fragment kodu SVG, który definiuje grafikę wektorową.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "Pełne, zielone koło o promieniu 90 px." jest właściwa, bo w SVG koło rysuje się elementem <circle>, a rozmiar określa atrybut promienia (r), nie średnicy. Kolor wypełnienia wynika z atrybutu fill ustawionego na zielony, a "pełne" oznacza wypełniony kształt.

Pełne wyjaśnienie:

W SVG podstawowe kształty opisuje się elementami o jednoznacznej semantyce. Koło/okrąg wypełniony rysuje się najczęściej przez <circle> z atrybutem r (promień) oraz atrybutem fill (kolor wypełnienia). Jeśli promień wynosi 90, to średnica wynosi 180, ale w treści odpowiedzi kluczowe jest to, że kod podaje promień, a nie średnicę. "Pełne" oznacza, że kształt ma wypełnienie (nie jest tylko obrysem).

Dlaczego pozostałe odpowiedzi są błędne?

  • "Pełne, zielone koło o średnicy 100 px." — typowy błąd polega na pomyleniu promienia ze średnicą lub na założeniu innej wartości rozmiaru. W SVG atrybut r oznacza promień; średnica musiałaby wynikać z innej wartości albo z przeliczenia.
  • "Pełny, czerwony kwadrat o boku 90 px." — kwadrat w SVG powstaje zwykle z <rect> (prostokąt) z width/height; samo koło nie stanie się kwadratem tylko dlatego, że pojawia się liczba 90.
  • "Pełny, niebieski kwadrat o boku 200 px." — analogicznie: to inny kształt i inny rozmiar. Taka odpowiedź pasowałaby do kodu opisującego <rect> z bokiem 200 oraz fill w kolorze niebieskim.

Wskazówka egzaminacyjna: zawsze sprawdzaj, czy liczba dotyczy promienia (r), średnicy (2r) czy wymiarów prostokąta (width/height). Następnie dopiero oceniaj kolor (fill) i to, czy kształt jest wypełniony (fill) czy tylko obrysowany (stroke).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
SVG to format grafiki wektorowej oparty o XML. Używa się go do ikon, ilustracji i elementów interfejsu, bo skaluje się bez utraty jakości. SVG łatwo stylować (np. kolorem) i animować, dlatego jest popularny w projektach WWW i multimedialnych.
Najczęściej używa się elementu <circle> z atrybutami cx, cy (środek) oraz r (promień). Aby koło było "pełne", ustaw fill na wybrany kolor; obrys kontroluje stroke.
W SVG promień jest podstawowym parametrem koła, dlatego atrybut to r. Średnica jest pochodna (2r). Na egzaminie często sprawdza się, czy zdający poprawnie rozróżnia promień od średnicy i nie myli tych pojęć.
Wypełnienie wynika z atrybutu fill. Jeśli fill jest ustawione na kolor (np. green), kształt będzie wypełniony. Gdy fill ma wartość none, zobaczysz tylko obrys kontrolowany przez stroke.
fill określa kolor wnętrza kształtu (np. koła lub prostokąta). Może to być nazwa koloru, zapis HEX, RGB itp. W praktyce projektowej fill odpowiada za "kolor bryły", a stroke za "kolor konturu".
Najczęściej myli się promień ze średnicą (r vs 2r), miesza kształty (<circle> z <rect>) i ignoruje atrybuty koloru (fill/stroke). Pomaga czytanie kodu "po atrybutach": najpierw typ elementu, potem wymiary, na końcu styl.
Koło zwykle jest opisane przez <circle> i atrybut r. Kwadrat/prostokąt najczęściej to <rect> z width i height (dla kwadratu są równe). To najszybszy sposób rozpoznania kształtu w zadaniach testowych.
W SVG wiele wartości jest podawanych jako jednostki użytkownika; często odpowiadają pikselom w typowym renderowaniu, ale nie zawsze muszą mieć jawne "px". Na egzaminie ważne jest rozumienie relacji (np. promień 90), a nie tylko obecność jednostki.
SVG jest lepsze dla ikon i prostych ilustracji, gdy potrzebujesz skalowania bez utraty jakości i łatwej zmiany kolorów. PNG sprawdza się przy obrazach rastrowych (zdjęcia, złożone tekstury) oraz tam, gdzie wektor byłby zbyt ciężki lub trudny do przygotowania.
Najlepiej wziąć proste pliki SVG i zmieniać pojedyncze atrybuty (np. r, fill, width/height), obserwując efekt w podglądzie przeglądarki. Notuj, co zmienia kształt, co kolor, a co położenie. To szybko buduje intuicję potrzebną w testach.
info

Statystycznie 68% uczniów zna prawidłową odpowiedź. średnie

Specjaliści zwracają uwagę: "Odpowiedź "Pełne, zielone koło o promieniu 90 px." jest właściwa, bo w SVG koło rysuje się elementem &lt;circle&gt;, a rozmiar określa atrybut promienia (r), nie średnicy."

Źródła:

  • MDN Web Docs: SVG &lt;circle&gt; element — https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle (dostęp: 2026-03-01)
  • MDN Web Docs: SVG attribute fill — https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill (dostęp: 2026-03-01)
  • W3C: Scalable Vector Graphics (SVG) 2 — Basic Shapes (w tym circle) — https://www.w3.org/TR/SVG2/shapes.html (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN Web Docs: SVG (podstawy i elementy)
  • Specyfikacja SVG (sekcje dot. podstawowych kształtów)
  • Ćwiczenia: ręczne modyfikowanie atrybutów fill/stroke/r i obserwacja zmian w podglądzie

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego