wtorek, 2022-12-20

SVG: Bombka choinkowa

Na końcu materiału znajdziesz kody źródłowe prezentowanych przykładów. Po wklejeniu kodu wybranego przykładu do edytora tekstowego (np. notatnika) zapisz go jako plik z rozszerzeniem svg.

Bazowy kształt bombki choinkowej (rys. 1) jest łatwy do wykonania i składa się z dwóch kół (circle) oraz prostokąta (rect). Dwie z figur otrzymały wypełnienie kolorem (atrybut fill), mniejsze koło ma tylko obramowanie (stroke). Zmieniając kolor większego koła, można otrzymać przytłaczającą ilość wariantów bombki, jednak warto dodać jeszcze jakieś elementy ozdobne. Mogą to być różnego rodzaju kształty, zależy to tylko od pomysłowości autora grafiki.

Dopasowanie zdobień do kształtu bombki mogłoby się wiązać z koniecznością stosowania wyszukanych kształtów (np. ścieżek z łukami), jednak format SVG udostępnia mechanizm przycinania (clip-path), który pozwala to znacznie uprościć. W uproszczeniu przycinanie to wyznaczenie części wspólnej elementu i obszaru zajmowanego przez ścieżkę odcinania. W prezentowanych przykładach ścieżką przycinania (clipPath) jest kopia większego koła. Element <clipPath> zadeklarowano w obrębie znacznika <defs>, dzięki czemu nie jest on renderowany, można się do niego odwoływać za pomocą atrybutu clip-path z odpowiednim identyfikatorem.

Kolejne przykłady to kilka alternatywnych zdobień bombki, jednak wszystkie one korzystają z tego samego kształtu bazowego z zaaplikowanym przycinaniem.

Kod źródłowy kształtu bazowego z przycinaniem.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
      style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
  </defs>
  <circle cx="160" cy="230" r="150" fill="#49a7fe" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
      stroke="#f9bc40" stroke-width="5" />
  <g clip-path="url(#c)">
<!-- miejsce na elementy ozdobne -->
  </g>
</svg>

Kod źródłowy rysunku 3.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
      style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
  </defs>
  <circle cx="160" cy="230" r="150" fill="#ff004c" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
      stroke="#f9bc40" stroke-width="5" />
  <line x1="0" y1="230" x2="320" y2="230"
      stroke="#4db4a3" stroke-width="80"
    clip-path="url(#c)" />
  <circle cx="60" cy="230" r="25" fill="#a1d8ce" />
  <circle cx="160" cy="230" r="25" fill="#a1d8ce" />
  <circle cx="260" cy="230" r="25" fill="#a1d8ce" />
</svg>

Kod źródłowy rysunku 4.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
  style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
  </defs>
  <circle cx="160" cy="230" r="150" fill="#8d43ad" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
    stroke="#f9bc40" stroke-width="5" />
  <polyline points="0,280 80,180 160,280 240,180 320,280"
    fill="none" stroke="#ffb3cb" stroke-linejoin="round"
    stroke-width="60" clip-path="url(#c)" />
</svg>

Kod źródłowy rysunku 5.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
  style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
    <polyline id="pl" points="0,280 80,180 160,280 240,180 320,280"
    fill="none" stroke-linejoin="round" />
  </defs>
  <circle cx="160" cy="230" r="150" fill="#49a7fe" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
    stroke="#f9bc40" stroke-width="5" />
  <g clip-path="url(#c)">
  <use href="#pl" stroke="#fdf808" stroke-width="20" />
  <use href="#pl" stroke="#fffecc" stroke-width="5"
    transform="translate(0,30)" />
  <use href="#pl" stroke="#fffecc" stroke-width="5"
    transform="translate(0,-30)" />
  <use href="#pl" stroke="#fff" stroke-width="5"
    transform="translate(0,50)" />
  <use href="#pl" stroke="#fff" stroke-width="5"
    transform="translate(0,-50)" />
  </g>
</svg>

Kod źródłowy rysunku 6.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
	style="background:#232730;">
  <circle cx="160" cy="230" r="150" fill="#244f1c" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
  	stroke="#f9bc40" stroke-width="5" />
  <path d="M160,130 183,197.64 255.11,199.09
  	198.04,242.36 218.78,310.9 160,270 101.22,310.9 
  	121.96,242.36 64.89,199.1 136.49,197.64"
  fill="#7c874a" />
</svg>