- Konu sahibi
- #1
HTML içindeki
Aşağıdaki dosyayı
Başarılı sonuçta 200’e 120 piksel alan içinde açık mavi bir dikdörtgen ve ortasında sarı bir daire görünür. Sayfa boş görünüyorsa önce dosyanın gerçekten
Örneğin
Satır içi SVG’nin erişilebilir olması için
Grafik yalnızca dekoratifse, kullanıcıya bilgi vermiyorsa erişilebilirlik ağacından gizlemek için
Anlamlı grafiğe yalnızca
Boş
Dekoratif olmayan SVG’yi
Satır içi kopyalarda title ve desc kimliklerini benzersiz yapın, her grafiğin aria-labelledby ve aria-describedby değerlerini kendi öğelerine bağlayın. Aynı id’nin tekrar edilmesi yanlış başlığın ilişkilendirilmesine neden olabilir.
HTML belgesine doğrudan yazılan svg öğesini HTML ayrıştırıcısı SVG ad alanında işler; xmlns burada zorunlu değildir. Grafik ayrı bir .svg XML dosyası olarak kaydedilecekse kökte uygun SVG ad alanı bildirilmelidir. Satır içi HTML örneğinde bildirimin bulunması da sorun oluşturmaz.
<svg> etiketi, vektörel grafik çizmek için kullanılan SVG alanını oluşturur. Çizgi, daire, dikdörtgen, yol ve benzeri şekiller bu kök öğenin içine yazılır. Satır içi SVG olarak kullanıldığında grafik doğrudan HTML DOM ağacının parçası olur; CSS ile biçimlendirilebilir, JavaScript ile yönetilebilir ve erişilebilirlik bilgileri markup içinde tanımlanabilir.En küçük çalışan örnek
Aşağıdaki dosyayı
ornek.html adıyla kaydedip tarayıcıda açın:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Satır içi SVG örneği</title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="120"
viewBox="0 0 200 120"
role="img"
aria-labelledby="grafik-baslik"
aria-describedby="grafik-aciklama">
<title id="grafik-baslik">Basit güneş grafiği</title>
<desc id="grafik-aciklama">Mavi gökyüzü üzerinde sarı bir daireyi gösteren basit SVG çizimi.</desc>
<rect width="200" height="120" fill="#dbeafe" />
<circle cx="100" cy="60" r="32" fill="#facc15" />
</svg>
</body>
</html>Başarılı sonuçta 200’e 120 piksel alan içinde açık mavi bir dikdörtgen ve ortasında sarı bir daire görünür. Sayfa boş görünüyorsa önce dosyanın gerçekten
.html uzantısıyla kaydedildiğini, etiketlerin düzgün kapatıldığını ve viewBox içindeki çizim koordinatlarının görünür alan içinde kaldığını kontrol edin.svg etiketi nasıl çalışır?
<svg> öğesi iki alanı birbirinden ayırır: Ekranda ayrılan görünür alan width ve height ile, çizimin kendi koordinat sistemi ise viewBox ile tanımlanır. viewBox="0 0 200 120" ifadesindeki dört değer sırasıyla başlangıç X koordinatı, başlangıç Y koordinatı, koordinat alanının genişliği ve yüksekliğidir.Örneğin
circle cx="100" cy="60" r="32" ifadesi, merkezi 100,60 koordinatında ve yarıçapı 32 birim olan bir daire çizer. viewBox bu koordinatların hangi sanal dikdörtgene ait olduğunu belirler; tarayıcı da bu alanı SVG’nin gerçek genişlik ve yüksekliğine uyarlar. Böylece çizim, koordinatları değiştirilmeden farklı boyutlarda gösterilebilir.Temel özellikleri ne zaman kullanmalı?
| Öğe veya özellik | Görevi | Pratik karar |
|---|---|---|
viewBox | Çizimin koordinat alanını belirler. | Ölçeklenebilir grafiklerde genellikle ekleyin. |
width ve height | Görünen SVG alanının boyutunu belirler. | Sayfadaki başlangıç boyutunu kontrol etmek için kullanın. |
<title> | Kısa, erişilebilir ad sağlar. | Anlam taşıyan grafiklerde ekleyin. |
<desc> | Grafiğin daha ayrıntılı açıklamasını sağlar. | Grafik kısa başlıkla anlaşılamıyorsa ekleyin. |
role="img" | Grafiğin yardımcı teknolojiler tarafından görsel olarak ele alınmasına yardımcı olur. | Anlamlı bağımsız bir grafik için kullanın. |
<title> kısa açıklama, <desc> ise daha ayrıntılı açıklama içerir. Örnekte aria-labelledby başlığın kimliğine, aria-describedby ise ayrıntılı açıklamanın kimliğine bağlanır; böylece ad ve açıklama ayrı tutulur. <title> ve <desc> ekranda çizilmez; grafik hakkında yardımcı teknolojiye bilgi verir. Açıklama zaten yakındaki görünür metinde bulunuyorsa aynı metni tekrar etmek yerine o metni ilişkilendirmek daha uygun olabilir.Grafik yalnızca dekoratifse, kullanıcıya bilgi vermiyorsa erişilebilirlik ağacından gizlemek için
aria-hidden="true" kullanılması düşünülebilir. Ancak bunu anlam taşıyan bir grafikte kullanmak, grafiğin ekran okuyucu kullanıcılarından saklanmasına neden olur.Sık yapılan hatalar
viewBox değerini çizimin gerçek koordinatlarıyla uyumsuz vermek: Şekil kesilebilir veya görünmeyebilir. Çizimin tüm sınırlarını kapsayan bir koordinat alanı seçin.width ve height değerlerini viewBox sanmak: İlki görünen alanı, ikincisi çizim koordinatlarını tanımlar.Anlamlı grafiğe yalnızca
title özelliği eklemek: SVG içindeki <title> öğesi ile HTML’deki title özelliği aynı kullanım değildir.Boş
<title> veya <desc> bırakmak: Boş açıklama erişilebilir bir ad sağlamaz.Dekoratif olmayan SVG’yi
aria-hidden="true" ile gizlemek: Grafik bilgisi yardımcı teknoloji kullanıcılarına ulaşmaz.Sık sorulan sorular
Aynı SVG’yi sayfada birkaç kez kullanırken neye dikkat etmeliyim?
Satır içi kopyalarda title ve desc kimliklerini benzersiz yapın, her grafiğin aria-labelledby ve aria-describedby değerlerini kendi öğelerine bağlayın. Aynı id’nin tekrar edilmesi yanlış başlığın ilişkilendirilmesine neden olabilir.
HTML içinde svg için xmlns yazmak zorunlu mudur?
HTML belgesine doğrudan yazılan svg öğesini HTML ayrıştırıcısı SVG ad alanında işler; xmlns burada zorunlu değildir. Grafik ayrı bir .svg XML dosyası olarak kaydedilecekse kökte uygun SVG ad alanı bildirilmelidir. Satır içi HTML örneğinde bildirimin bulunması da sorun oluşturmaz.
