SVG/example/HTML

SVG/example/HTML – použití tagu <svg> v HTML souboru a vyzkoušení, jak to funguje na Wiki.

Odkazy[editovat]

Budeme se inspirovat:

w3schools.com/graphics/svg_intro – SVG Tutorial

Plátno, kružnice[editovat]

<html>
<body>

<h1>Moje první SVG</h1>

<svg width="100" height="100">  <!-- rozměry plátna, na které malujeme, v pixelech -->
    <!-- Kružnice o daných souřadnicích středu, poloměru, barvě, tloušťce čáry a barvě výplně: -->
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg>

</body>
</html>

Danou ukázku si zkopírujeme do nějakého souboru a necháme si ji zobrazit prohlížečem, který SVG podporuje (většina moderních browserů).

Inline SVG[editovat]

Problém byl diskutován zde:

m:Inline SVG use

Nyní zkusíme podobnou řádku vložit přímo do stránky:

Bohužel, jak vidíte, nefunguje to. Tady vidíme nějaký důvod:

m: Extension:Inline SVG

Píšou, že namísto této extense máme použít nějakou jinou se stejným účinkem. Ale jakou? Tady

m: Extension:Inline SVG extension

píšou, že máme použít:

m: Extension:NativeSvgHandler

Nejspíš nám ho ale asi nikdo na Wikiverzitu ještě nenainstaloval.

Zajímavě vypadá možnost editovat SVG přímo v browseru:

m: Extension:SVGEdit

Elipsa, obdélník[editovat]

Uděláme si větší pláténko a do něj elipsu a obdélník:

<html>
<body>

<h1>Elipsa a obdélník</h1>

<svg width="600" height="200">
<!-- Elipsa: všechny další attributy dáme tentokrát do stylu: -->
    <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
<!-- Obdélník: barvy můžeme vyjádřit jako RGB. To, co se kreslí později, překrývá to, co je pod tím – proto zde nastavíme průhlednost, aby to spodní prosvítalo: -->
    <rect x="200" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0);fill-opacity:0.2;stroke-opacity:0.5" />
</svg>

</body>
</html>

[editovat]

<html>
<body>

<h1></h1>

<svg width="200" height="100">

</svg>

</body>
</html>