Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA AUD5 - TEST WIEDZY NR 1



PYTANIE NR 36.
Rozważ następujący fragment kodu SVG: 
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Które z poniższych stwierdzeń jest prawdziwe?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Element <circle> w SVG rysuje okrąg/koło.
Atrybut r oznacza promień, więc przy r="40" figura ma promień 40 (w typowej interpretacji: pikseli). Parametry cx i cy ustawiają środek w punkcie (50,50), a stroke/fill określają obrys i wypełnienie.

Pełne wyjaśnienie:

W podanym fragmencie SVG najważniejszy jest element <circle>. To właśnie on definiuje rysowaną figurę – jest to okrąg (a w praktyce wizualnej: koło z wypełnieniem, jeśli ustawiono fill).

Dlaczego poprawne jest stwierdzenie o promieniu 40?

  • Atrybut r w elemencie <circle> oznacza promień okręgu. W kodzie ustawiono r="40", więc promień wynosi 40 jednostek (najczęściej pikseli w kontekście renderowania w przeglądarce).
  • Atrybuty cx i cy określają położenie środka okręgu. Tutaj środek jest w punkcie (50, 50), czyli w środku obszaru 100×100.
  • Atrybut stroke ustawia kolor obrysu, stroke-width grubość obrysu, a fill kolor wypełnienia. Te parametry nie zmieniają typu figury, tylko jej wygląd.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • Kod tworzy kwadrat o boku 100 pikseli. – Samo ustawienie width i height w <svg> definiuje rozmiar obszaru rysunku (viewport), a nie automatycznie rysowany kształt. Aby narysować kwadrat/prostokąt, zwykle używa się elementu <rect>.
  • Kod tworzy elipsę o osiach 50 pikseli. – Elipsę tworzy się elementem <ellipse> i opisuje atrybutami rx oraz ry (promienie w poziomie i pionie). W tym kodzie nie ma <ellipse> ani rx/ry.
  • Kod tworzy prostokąt o bokach 100 i 50 pikseli. – Ponownie: brak elementu <rect> oraz atrybutów definiujących wymiary prostokąta (np. width/height w <rect>). Parametry 100×100 dotyczą tylko kontenera <svg>.

Wskazówka egzaminacyjna: Najpierw identyfikuj nazwę elementu SVG (<circle>, <rect>, <line>, <ellipse>), a dopiero potem interpretuj atrybuty specyficzne dla tego elementu. To ogranicza ryzyko "zgadywania" na podstawie samych liczb.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza atrybut r w elemencie <circle> w SVG?
Atrybut r określa promień okręgu rysowanego przez element <circle>. Jeśli wpiszesz r="40", promień będzie równy 40 jednostek współrzędnych (w typowym renderowaniu w przeglądarce: pikseli).
Jak działa element <circle> w SVG w praktyce?
<circle> rysuje okrąg o środku w punkcie (cx, cy) i promieniu r. Wygląd kontrolujesz przez fill (wypełnienie) oraz stroke i stroke-width (obrys i jego grubość).
Dlaczego width i height w <svg> nie oznaczają, że powstaje kwadrat?
Atrybuty width i height w <svg> opisują rozmiar obszaru rysowania (viewport), a nie kształt. Kształt powstaje dopiero po użyciu elementu figury, np. <rect> dla prostokąta lub <circle> dla okręgu.
Jakie są różnice między <circle> a <ellipse> w SVG?
<circle> ma jeden promień r (taki sam w pionie i poziomie). <ellipse> ma dwa promienie: rx i ry, więc może być "rozciągnięta". Oba elementy używają cx i cy do określenia środka.
Jak odczytać środek okręgu z cx i cy w kodzie SVG?
Środek okręgu to punkt (cx, cy) w układzie współrzędnych SVG. Dla cx="50" i cy="50" środek jest w (50,50). Jeśli obszar SVG ma 100×100, taki środek wypada w połowie szerokości i wysokości.
Czy stroke-width zmienia promień koła w SVG?
stroke-width zmienia grubość obrysu, ale nie zmienia wartości r zapisanej w kodzie. Wizualnie obrys "dodaje się" wokół krawędzi okręgu, więc całkowity zajmowany rozmiar może wyglądać na większy, lecz promień geometrii okręgu pozostaje r.
Jak narysować prostokąt w SVG zamiast koła?
Do prostokąta używa się elementu <rect>, a nie <circle>. W <rect> podajesz m.in. położenie (x, y) oraz wymiary (width, height). To częsty trik egzaminacyjny: nazwa elementu wskazuje typ figury.
Jakie są najczęstsze błędy w zadaniach o figurach SVG?
Najczęściej myli się: (1) rozmiar kontenera <svg> z rozmiarem figury, (2) <circle> z <ellipse> i atrybuty r vs rx/ry, (3) atrybuty wyglądu (fill, stroke) z atrybutami geometrii (cx, cy, r).
Kiedy w praktyce używa się SVG w projektach multimedialnych?
SVG stosuje się, gdy potrzebujesz grafiki wektorowej skalującej się bez utraty jakości: ikony, logotypy, elementy interfejsu, infografiki, proste animacje. Dla technika fotografii i multimediów to częsty format eksportu do WWW i aplikacji.
Jak przygotować się do pytań o SVG na egzaminie zawodowym?
Ćwicz rozpoznawanie elementów (<circle>, <rect>, <ellipse>, <line>) i ich kluczowych atrybutów. Rób krótkie testy: zmień jedną wartość (np. r, cx) i przewiduj efekt przed uruchomieniem podglądu.
info

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

Eksperci podkreślają: "Element &lt;circle&gt; w SVG rysuje okrąg/koło.Atrybut r oznacza promień, więc przy r="40" figura ma promień 40 (w typowej interpretacji: pikseli)."

Źródła:

  • W3C Recommendation: Scalable Vector Graphics (SVG) 1.1 (Second Edition) – rozdział o elementach podstawowych, element circle – https://www.w3.org/TR/SVG11/shapes.html#CircleElement (dostęp: 2026-02-18)
  • MDN Web Docs: SVG element &lt;circle&gt; – atrybuty cx, cy, r – https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle (dostęp: 2026-02-18)
  • MDN Web Docs: SVG shapes (podstawowe figury: circle, rect, ellipse) – https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes (dostęp: 2026-02-18)

Materiały:

  • Dokumentacja SVG (element &lt;circle&gt; i atrybuty podstawowe)
  • MDN Web Docs: podstawy SVG i przykłady figur
  • Ćwiczenia praktyczne: modyfikacja cx, cy, r oraz stroke-width i obserwacja efektu
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego