SVG Bir Örnek

SVG XML ile yazılır.

SVG Örnek

Aşağıdaki örnek, basit bir SVG dosyası örneğidir. SVG dosyaları .svg sonluğu ile kaydedilmelidir:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Örneği görüntüle (sadece SVG'yi destekleyen tarayıcılar için)

SVG kaynak kodunu görmek için bu örneği açın, ardından pencerede sağ tıklayın. 'Kaynak kodunu görüntüle' seçeneğini seçin.

Kod açıklaması:

ilk satır XML beyanı içerir. standalone özelliğine dikkat edin! Bu özellik, bu SVG dosyasının

standalone="no" anlama varamaktadır SVG belgesinin harici bir dosya - burada, DTD dosyası.

İkinci ve üçüncü satırlar, bu dışarıdan alınan SVG DTD'yi referans alır. Bu DTD, “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” adresinde bulunur. Bu DTD, W3C'de ve tüm izin verilen SVG elementlerini içerir.

SVG kodu <svg> özelliğiyle başlar, açılış etiketi <svg> ve kapanış etiketi </svg> içerir. Bu kök özelliktir. width ve height özellikleri, bu SVG belgesinin genişliğini ve yüksekliğini ayarlar. version özelliği, kullanılan SVG sürümünü tanımlar, xmlns özelliği, SVG ad alanını tanımlar.

SVG'nin <circle> özelliği, bir daire oluşturmak için kullanılır. cx ve cy özellikleri, dairenin merkezinin x ve y koordinatlarını tanımlar. Bu iki özellik göz ardı edilirse, daire noktası (0, 0) olarak ayarlanır. r özelliği, dairenin yarıçapını tanımlar.

stroke ve stroke-width özellikleri, şeklin etrafını nasıl gösterdiğinizi kontrol eder. Dairenin etrafını 2px geniş, siyah çerçeve olarak ayarlıyoruz.

fill özelliği, şekil içindeki rengi ayarlar. Doldurma rengini kırmızı olarak ayarlıyoruz.

Kapanış etiketlerinin görevi SVG elementini ve belgenin kendisini kapatmaktır.

Açıklama:Tüm açılan etiketler kapanış etiketleriyle birlikte olmalıdır!