Wstęp do SVG w HTML5

Element svg HTML5

Element(y) svg
	Opis
svg	element svg
title	tytuł, nazwa warstwy
g	grupa, warstwa

Integracja SVG z HTML

Atrybuty elementu svg
Atrybut	Opis
height	wysokość
width	szerokość
viewBox	układ

Atrybuty elementu svg

Uwaga

Dwie pierwsze liczby atrybutu viewBox oznaczają początek układu a dwie następne koniec

Atrybuty elementu svg
Atrybut	Opis
style	styl
preserveAspectRatio	dopasowanie

Atrybuty elementu svg

Atrybuty elementów svg
Atrybut	Opis
fill	kolor wypełnienia (tło)
stroke	kolor obramowania (kontur)
stroke-width	szerokość (grubość) obramowania

Transformacje

Animacje

<svg  width="100%" height="100%" viewBox="0 0 400 400">
  <title>SVG Smiley Face</title>
    <script type="text/ecmascript"><![CDATA[
    function Smile()
    {
      document.getElementById("smile").setAttribute("fill", "black");
    };
  ]]></script>
  <defs>
    <radialGradient id="rg" cx="25%" cy="25%" r="100%" fx="40%" fy="40%">
      <stop stop-color="lightyellow" offset="0%">
        <set attributeName="stop-color" to="lightgreen" begin="face.click" fill="freeze"/>
      </stop>  
      <stop stop-color="yellow" offset="40%">
        <set attributeName="stop-color" to="lime" begin="face.click" fill="freeze"/>
      </stop>
      <stop stop-color="orange" offset="110%">
        <set attributeName="stop-color" to="green" begin="face.click" fill="freeze"/>
      </stop>
    </radialGradient>
  </defs>
  <circle id="face" cx="200" cy="200" r="195" fill="url(#rg)" onclick="Smile()"/>
  <a xlink:href="target.svg">
    <ellipse id="left-eye" cx="120" cy="150" rx="18" ry="33" fill="black"/>
    <ellipse id="right-eye" cx="280" cy="150" rx="18" ry="33" fill="black">
      <animate id="wink" attributeType="XML" attributeName="ry" values="33; 33; 1; 33; 33" begin="0s" dur="2s" repeatCount="indefinite"/>
    </ellipse>
  </a>
  <path id="smile" stroke-width="10" stroke="black" fill="none" stroke-linecap="round" d="M120,280 Q200,330 280,280"/>
</svg>

[SVG11]: Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
URL: http://www.w3.org/TR/SVG11/
[SVG_Integration]: SVG Integration
W3C First Public Working Draft 17 April 2014
URL: http://www.w3.org/TR/svg-integration/