SVG

SVG czyli Skalowalna Grafika Wektorowa, pozwala na tworzenie grafik w oparciu o język XML, są to zarówno linie, bryły, gradienty oraz wiele innych elementów. Elementy później można poddać animacji, przewagą jaką posiada SVG na Canvas jest to, że stworzone grafiki można dowolnie skalować bez utraty jakości.

<svg id="" width=" px" height=" px"> 
Tutaj zawarte są znaczniki
</svg>

W SVG można tworzyć różne były, linie, kształty za pomocą wbudowanych funkcjonalności, określa się je za pomocą danych na osiach X i Y wyrażonych w pikselach, stworzone figury można kolorować, skalować

<svg>
<polygon points="X,Y X1,Y1 X2,Y2..."       - tworzenie punków, które są łączone
style="fill:lime;     - ustalanie koloru
stroke:purple;         - ustalanie koloru linii
stroke-width:5;          - szerokości linii
fill-rule:evenodd;"/>     - wypełnienie wewnętrzne
</svg>

Również w SVG można "rysować" gradienty, zarówno liniowe jak i promieniste o różnych kolorach i kierunkach ich rozchodzenia się.

<svg> 
<defs> - kontener
 <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">   
 
                   - gradient liniowy za pomocą wartości x,y sterujemy skąd się zaczyna
							
  <stop offset="0%" style="stop-color:rgb(255,192,0);stop-opacity:1"/>  
  
	                                - ustalenie koloru  gradientu w gamie rgb
									
  <stop offset="100%" style="stop-color:rgb(243,236,219);stop-opacity:1"/> 
 </linearGradient> 
</defs> 
<rect width="350" height="150" fill="url(#grad1)"> - umieszczemie gradientu w prostokącie
</svg>

Jedną z unikalnych możliwości jakie wprowadza SVG jest możliwość animowania stworzonych elementów, w klatkach, które są wyświetlane po sobie, wyrażone w procentach.

<svg> 
<path d="M 160 400 l 180 0" stroke="blue" stroke-width="3" fill="none">  
 
 - tworzenie ścieżki w atrybucie "d" ustalanie położenia M X Y l X1 Y1 przy czym 
 w tym wypadku  wartości X1 i Y1 obliczane  są na zasadzie X1=X+180, Y1=Y+0
 
 <animate id="b" attributeName="d" attributeType="XML" begin="7s" dur="2s" fill="freeze" 
 from="M 160 400 l 180 0" to="M 160 300 l 180 0"  /> 
 
- animowanie stworzonej ścieżki czyli atrybutu "d", dalej określenie opóżnienia (7s), 
czas trwania (2s), zamrożenie elementu po wykonaniu oraz określenie skąd do kąd się 
przemieści

</path> 
</svg>

Do góry