poniedziałek,
SVG: Ikona prezentu
Prezentowaną grafikę wykonano przy pomocy dwóch ścieżek (elementy path). Podobny efekt można uzyskać, stosując dwie elipsy (element ellipse) i cztery prostokąty (element rect), jednak przykład jest dobrym wprowadzeniem do tworzenia ścieżek.
Pierwszym i najtrudniejszym do wykonania elementem grafiki jest ścieżka stanowiąca kokardę przewiązującą paczkę z prezentem. Składa się ona z dwóch części (zawartych w atrybucie d) będących łukami eliptycznymi (komenda A). Więcej o tworzeniu łuków dowiesz się z materiału „SVG: Ścieżki – łuk okręgu”. Po utworzeniu lewej strony kokardy odbij ją symetrycznie w poziomie. Element został pozbawiony wypełnienia (fill="none") i otrzymał obramowanie (stroke="#C38737") o szerokości 10 pikseli (stroke-width="10").
Druga ścieżka to cztery odpowiednio ułożone prostokąty. Do jej utworzenia wykorzystano dwie kilkukrotnie wywołane komendy:
- M – ustawia współrzędne punktu rysowania;
- L – tworzy linię od bieżącego punktu do punktu o podanych współrzędnych.
Wszystko sprowadza się do wyznaczenia odpowiednich punktów. Pamiętaj, że w formacie SVG współrzędne domyślnie obliczane są od lewego górnego rogu.
Poniżej znajduje się kod przykładu zapisany formacie SVG. Możesz go wkleić do edytora tekstowego (np. notatnika) i zapisać z rozszerzeniem svg lub wstawić do kodu strony internetowej.
<svg width="270" height="250" xmlns="http://www.w3.org/2000/svg"
style="background:#232730;">
<path d="M120,60 A 14 28 -50 1 1 125,60 L 120,60
M145,60 A 14 28 50 1 1 150,60 L 140,60"
stroke="#C38737" stroke-width="10" fill="none" />
<path d="M10,60 L132,60 L 132,100 L 10,100
M138,60 L260,60 L260,100 L138,100
M25,106 L132,106 L132,230 L25,230
M138,106 L245,106 L245,230 L138,230"
fill="#C38737" />
</svg>
