Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - STYCZEŃ 2015



PYTANIE NR 37.
Co przedstawia obraz SVG określony poniższym kodem?

<svg width="200″ height="150″>
<rect width="100″ height="100″ fill=#ff0000″>

A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Element <rect> rysuje prostokąt o podanych wymiarach. Gdy width i height wynoszą 100, powstaje kwadrat 100×100 px. Atrybut fill=#ff0000 oznacza czerwone wypełnienie. Rozmiar <svg> (200×150) to obszar rysunku, nie rozmiar figury.

Pełne wyjaśnienie:

W kodzie SVG kluczowe są dwa elementy: kontener <svg> oraz obiekt rysowany <rect>.

  • <svg width="200" height="150"> definiuje obszar rysunku (płótno) o wymiarach 200×150 px. To nie jest automatycznie rozmiar każdej figury.
  • <rect width="100" height="100" ...> tworzy prostokąt o szerokości 100 px i wysokości 100 px. Ponieważ oba wymiary są równe, w praktyce jest to kwadrat 100×100 px.
  • Atrybut fill=#ff0000 oznacza wypełnienie kolorem o kodzie szesnastkowym #ff0000, czyli czerwonym.

Dlatego poprawny opis to: kwadrat o boku 100 pikseli z czerwonym wypełnieniem.

Pozostałe odpowiedzi są błędne z typowych powodów:

  • Wariant z niebieskim wypełnieniem nie zgadza się z wartością fill (w kodzie jest #ff0000, a nie niebieski).
  • Warianty mówiące o prostokącie 200×150 mylą rozmiar kontenera <svg> z rozmiarem obiektu <rect>. Kontener określa przestrzeń, w której rysujemy, ale sam obiekt ma własne wymiary.
  • Wariant "200×150 z czerwonym wypełnieniem" dodatkowo błędnie przypisuje kolor wypełnienia całemu obszarowi <svg> (a kolor dotyczy konkretnego elementu <rect>).

Wskazówka egzaminacyjna: zawsze odczytuj atrybuty przy elemencie, którego dotyczą (tu: wymiary i wypełnienie są przy <rect>), a <svg> traktuj jako "kartkę", na której obiekty są dopiero rysowane.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest SVG i do czego się go używa?
SVG to format grafiki wektorowej oparty na XML. Używa się go m.in. do ikon, logo, infografik i elementów interfejsu, bo skaluje się bez utraty jakości. Plik można edytować w programie graficznym albo bezpośrednio w kodzie, zmieniając kształty i kolory.
Jak działa element <rect> w SVG?
Element <rect> rysuje prostokąt. Najczęściej podajesz jego szerokość (width) i wysokość (height), a opcjonalnie pozycję (x, y) oraz zaokrąglenie rogów (rx, ry). Gdy width = height, powstaje kwadrat.
Dlaczego width i height w <svg> nie opisują rozmiaru prostokąta?
Atrybuty width i height w <svg> definiują rozmiar obszaru rysunku (płótna). Obiekty wewnątrz, np. <rect>, mają własne wymiary. To częsty błąd: mylenie rozmiaru "kartki" z rozmiarem narysowanej figury.
Co oznacza fill=#ff0000 w SVG?
fill to kolor wypełnienia kształtu. Wartość #ff0000 jest zapisem szesnastkowym koloru czerwonego (maksymalna składowa czerwieni, brak zieleni i niebieskiego). Jeśli w kodzie jest fill, to dotyczy ono elementu, przy którym się znajduje.
Jak rozpoznać, czy <rect> tworzy kwadrat czy prostokąt?
Sprawdź atrybuty width i height elementu <rect>. Jeśli są równe, figura jest kwadratem (np. 100 i 100). Jeśli są różne (np. 120 i 80), jest to prostokąt. To prosty test, który często pojawia się w zadaniach egzaminacyjnych.
Kiedy w SVG trzeba podawać atrybuty x i y?
Atrybuty x i y określają pozycję lewego górnego rogu prostokąta. Jeśli nie są podane, zwykle przyjmuje się wartości domyślne (początek układu, czyli 0,0). Podawaj je, gdy chcesz przesunąć obiekt w obrębie obszaru <svg>.
Czy rozmiar obiektu SVG zależy od jednostek pikselowych?
W SVG wartości liczbowe często są interpretowane jako jednostki użytkownika, które w praktyce zwykle odpowiadają pikselom przy typowym renderowaniu w przeglądarce. Można też używać innych jednostek (np. mm, cm), ale w zadaniach podstawowych najczęściej spotkasz wartości bez jednostek.
Jakie błędy najczęściej popełnia się przy czytaniu kodu SVG na egzaminie?
Najczęstsze błędy to: pomylenie rozmiaru <svg> z rozmiarem kształtu, przeoczenie atrybutu fill (koloru), nieuwzględnienie, że width=height oznacza kwadrat, oraz "zgadywanie" na podstawie nazwy elementu bez analizy atrybutów.
Jak zmienić kolor prostokąta w SVG na niebieski?
Zmień wartość fill przy elemencie <rect>. Dla niebieskiego możesz użyć np. #0000ff lub nazwy koloru (jeśli dopuszczasz taki zapis). Najważniejsze jest, aby modyfikować atrybut przy właściwym elemencie, a nie w <svg>.
Jak przygotować się do zadań z SVG w kwalifikacji multimedialnej?
Ćwicz rozpoznawanie podstawowych elementów: <rect>, <circle>, <line>, <path> oraz atrybutów: width/height, r, x/y, fill, stroke. Rozwiązuj krótkie zadania "co narysuje kod" i porównuj z podglądem w przeglądarce.
info

Statystycznie 72% uczniów zna prawidłową odpowiedź. średnio łatwe

Specjaliści zwracają uwagę: "Element &lt;rect&gt; rysuje prostokąt o podanych wymiarach."

Źródła:

  • MDN Web Docs: "&lt;rect&gt;" (SVG) – opis elementu i atrybutów width/height/fill, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect (dostęp: 2026-02-27)
  • MDN Web Docs: "fill" (SVG/CSS) – znaczenie wypełnienia i zapis kolorów (w tym hex), https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill (dostęp: 2026-02-27)
  • W3C: "Scalable Vector Graphics (SVG) 1.1 Specification" – rozdziały dotyczące elementów kształtów (rect) i właściwości prezentacyjnych, https://www.w3.org/TR/SVG11/ (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN: element SVG &lt;rect&gt; i atrybuty prezentacyjne
  • Specyfikacja SVG (W3C): definicja elementu rect i atrybutów geometrycznych
  • Materiały do podstaw grafiki wektorowej (różnice SVG vs raster)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego