SVG Örnek 1

SVG, tanımlamalar ve verilenden oluşur.

Basit bir örnekle temel yapıyı açıklayalım.
Bir çemberin SVG'de tanımlaması:

<circle cx="100" cy="80" r="50" stroke="black" width="2" fill="red"/>

Açıklama:
Merkezi soldan 100 birim (cx),
üstten 80 birim (cy) uzakta olmak üzere,
yarıçapı 50 birim (r) olan,
ve 2 birim kalınlığında (stroke width),
siyah çerçeve (stroke) ile çevrili,
kırmızı (fill) bir
çember (circle).

Örnekte tanımlar, nesneye verilen özellikler ve değerler açıkça görülebilir.
Aşağıda örnek svg çizimin .png olarak kaydedilmiş hali:

Aşağıdaki ise (eğer tarayıcınız destekliyorsa) SVG çemberin HTML koduna gömülmüş hali:

Son olarak SVG çizimin Inkscape ile kaydedip bir metin düzenleyicisiyle açtığımızda göreceğimiz ise:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
xlmns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="200"
height="160"
id="svg2">

<defs id="defs5"/>

<circle
cx="100"
cy="80"
r="50"
stroke="black"
width="2"
fill="red"/>

</svg>

Not: Son kodlama örneğindeki yapılar, daha sonra tartışılacaltır.

Önceki Konu: 1.2 SVG Nedir?