Rysunek SVG prosto w kodzie

Listy, linki i obrazki - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Obrazek możesz też narysować kodem. Znacznik <svg> tworzy płótno o podanej szerokości i wysokości, a w środku umieszczasz kształty: <rect> (prostokąt), <circle> (koło ze środkiem cx, cy i promieniem r) oraz <text>. Punkt (0, 0) to lewy górny róg, a y rośnie w dół. Atrybut fill to kolor wypełnienia. Zmień liczby i kolory, aby przesunąć słońce.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>SVG</title>
</head>
<body>
  <h2>Domek w słońcu</h2>
  <svg width="220" height="160" role="img" aria-label="Domek i słońce">
    <rect x="0" y="0" width="220" height="160" fill="lightblue" />
    <circle cx="180" cy="35" r="22" fill="gold" />
    <rect x="50" y="80" width="80" height="70" fill="peru" />
    <rect x="80" y="110" width="20" height="40" fill="saddlebrown" />
    <text x="10" y="25" fill="navy">Mój dom</text>
  </svg>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.