czwartek,
SVG: Kartka świąteczna
Na końcu materiału znajdziesz kod źródłowy przykładu.
Tło obrazu stanowi prostokąt (rect) o wymiarach (width, height) równych wymiarom grafiki, początkowo nadano mu szare wypełnienie (atrybut fill). Najważniejszym elementem grafiki z przykładu jest choinka, powstała ona z połączenia trzech elementów. W pierwszym kroku za pomocą znacznika polygon (wielokąt) utworzono kształt bazowy elementu i wypełniono go kolorem (atrybut fill). Następnie dodano trójkąt z trochę ciemniejszym wypełnieniem zakrywający prawą stronę pierwszego kształtu. Elementy zgrupowano za pomocą znacznika g. Do grupy dodano jeszcze kolejny wielokąt, wypełniono go czarnym kolorem i nadano pewną przezroczystość (atrybut opacity), tak aby sprawiał wrażenie cienia rzucanego przez bazowy element.
Utworzoną wcześniej grupę przeniesiono do znacznika <defs> i nadano jej identyfikator, będzie ona stanowiła wzorzec wstawiany do grafiki. Element został dodany do „widzialnej” części obrazu za pomocą znacznika <use> zawierającego odwołanie do odpowiedniego identyfikatora (href="#c") i przesunięty w dół (translate(0,180). W podobny sposób utworzono kolejne dwa składowe choinki, dodatkowo zostały one trochę pomniejszone (scale).
Kolejny etap prac nad projektem to przygotowanie tła. Kwadrat stanowiący tło wypełniono gradientem radialnym (radialGradient) zdefiniowanym w obrąbie znacznika <defs>. Zawarte w obrębie <radialGradient> elementy <stop> to definicje kolorów (atrybut stop-color) składowych gradientu z określonym miejscem rozpoczęcia przejścia tonalnego (atrybut offset).
Do tła grafiki dodano także deseń. W celu jego utworzenia zadeklarowano kolejną grupę elementów (g) zawierającą sześć kół (circle) wypełnionych białym kolorem. Mieszczą się one w obrębie kwadratu o wymiarach 120 × 120. W kolejnym roku deklarację grupy przeniesiono w obręb znacznika <pattern> dopisanego do elementu <defs>. Grupie nadano wysoki stopień przezroczystości (atrybut opacity). Element <pattern> otrzymał identyfikator (atrybut id) oraz wymiary (width i height), atrybut patternUnits ustawiono na wartość userSpaceOnUse. Deseń dodano do obrazu, tworząc kolejny kwadrat o wymiarach grafiki z odpowiednim wypełnieniem (url(#snow)).
Po przygotowaniu grafiki możesz dodać do niej tekst, służy do tego znacznik <text>. Informacje o wstawianiu tekstu do grafiki SVG znajdziesz w materiale „SVG: STOP SPAM”.
Poniżej znajduje się kod źródłowy przykładu, możesz go wkleić do edytora tekstowego (np. notatnika) i zapisać z rozszerzeniem svg lub wstawić do kodu strony internetowej.
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="g">
<stop offset="10%" stop-color="#ddd" />
<stop offset="95%" stop-color="#999" />
</radialGradient>
<pattern id="snow" height="120px" width="120px"
patternUnits="userSpaceOnUse">
<g opacity=".1" fill="white">
<circle cx="30" cy="30" r="7" />
<circle cx="90" cy="90" r="8" />
<circle cx="120" cy="120" r="5" />
<circle cx="25" cy="100" r="5" />
<circle cx="55" cy="70" r="3" />
<circle cx="110" cy="40" r="5" />
</g>
</pattern>
<g id="c">
<polygon points="300,150 450,200 300,185 150,200"
fill="#000" opacity=".2" />
<polygon points="300,0 450,200 300,170 150,200" fill="#5d7520" />
<polygon points="300,0 450,200 300,170" fill="#475919" />
</g>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#snow)" />
<use href="#c" transform="translate(0,180)" />
<use href="#c" transform="translate(60,130) scale(.8)" />
<use href="#c" transform="translate(120,80) scale(.6)" />
</svg>
