HTML ve SVG (Scalable Vector Graphics), web geliştiricilerine sayfalarına canlı ve ölçeklenebilir grafikler eklemelerini sağlayan güçlü araçlardır. SVG, XML tabanlı bir dosya formatıdır ve vektör grafiklerini tanımlamak için kullanılır. Bu yazıda, HTML içinde SVG kullanarak basit bir daire oluşturmayı öğreneceğiz.
SVG Nedir?
SVG, vektör grafiklerini tanımlayan bir XML tabanlı bir dosya formatıdır. Vektör grafikler, bilgisayar ekranındaki herhangi bir boyuta ölçeklendirilebilen grafiklerdir. HTML içinde SVG kullanmak, statik ve dinamik grafikler oluşturmanın etkili bir yolunu sağlar.
SVG Örnek Kodu
HTML içinde SVG kullanarak basit bir daire oluşturmak için aşağıdaki örnek kodu inceleyelim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG ile Daire Oluşturma</title>
</head>
<body>
<svg width="100" height="100">
<!-- Daire oluşturma -->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>
</html>
Yukarıdaki kod, bir HTML belgesi içinde SVG kullanarak bir daire oluşturur. circle elemanı, bir daire çizmek için kullanılır. cx ve cy özellikleri, dairenin merkezinin x ve y koordinatlarını belirtir. r özelliği, dairenin yarıçapını belirtir. stroke ve stroke-width, dairenin kenarlığının rengini ve kalınlığını belirtir. fill, dairenin iç rengini belirtir.
Bu örnek kodu kullanarak, çeşitli özellikleri değiştirerek farklı şekiller oluşturabilir ve SVG’nin gücünü keşfetmeye başlayabilirsiniz.
SVG, daha karmaşık grafikler ve animasyonlar oluşturmak için geniş bir özellik seti sunar. HTML içinde SVG kullanarak, web sayfalarınızı görsel olarak zenginleştirebilir ve etkileşimli kullanıcı deneyimleri oluşturabilirsiniz.