HTML5 SVG Kullanımı

Web tasarım derslerinde bu kez HTML5’te SVG kullanımını görüyoruz. İlk olarak tanımları inceleyelim.

SVG Nedir?

• SVG’nin açılımı Scalable Vector Graphics, yani Ölçeklenebilir Vektörel Grafikler’dir.
• SVG, web’de grafik oluşturmak için kullanılır.

HTML’de <svg> Elemanı

<svg> elemanı SVG grafiklerini kapsayan bir elemandır.

SVG’nin yollar, kutular, daireler, metinler ve grafik resimleri çizmek için çeşitli yöntemleri vardır.

SVG ile Çember Oluşturma

Örnek:

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

SVG ile Dikdörtgen Oluşturma

Örnek:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

SVG ile Kenarları Yumuşatılmış Dikdörtgen

Örnek:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG ile Yıldız Şekli Oluşturma

Örnek:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG ile Basit Logo Tasarımı

Örnek:

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Üzgünüz, tarayıcınız satır içi SVG'yi desteklemiyor.
</svg>

HTML Siteye Google Maps Ekleme

Bu işlem için kısa bir JavaScript koduna ihtiyacımız olacak; onu da örnek içerisinde vereceğiz.

İlk önce başlığımızı ekleyelim:

<!DOCTYPE html>
<html>
<body>

<h1>İlk Google Maps Uygulaması</h1>

<div id="map">Buraya Harita Gelecek</div>

</body>
</html>

Ardından haritamızı yerleştireceğimiz div’i oluşturalım:

<div id="map" style="width:400px;height:400px"></div>

Daha sonra JavaScript kodlarımızı ekleyelim. Zaten önceki derslerimizde JavaScript kodlarının nereye nasıl ekleneceğini işlemiştik.

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

JavaScript Elemanlarının Görevleri

• mapOptions haritaya özellik eklememize izin verir.
• center özelliği, enlem ve boylam koordinatlarını kullanarak haritayı ortalamaya yarar.
• zoom özelliği, haritanın yakınlaştırma düzeyini belirler.
• mapTypeId özelliği, harita türünü belirler (yol haritası, uydu haritası, karma harita, arazi haritası).

Ve son olarak Google haritamızı sitemize dahil edelim. Google Maps JavaScript API artık bir API anahtarı istiyor; anahtarı Google Cloud konsolundan alıp key değerine yazmalısınız:

<script src="https://maps.googleapis.com/maps/api/js?key=API_ANAHTARINIZ&callback=myMap"></script>