Web arayüzleri için ülke bayrakları
Erişilebilir küresel web siteleri için ülke bayrakları SVG indir
Web siteleri, uygulamalar, paneller, bölge seçiciler, sunucu listeleri ve yerelleştirme kullanıcı arayüzleri için üretime hazır 256 ülke bayrağı setini SVG formatında indirin. Dosyalar küçük, ölçeklenebilir, önbelleğe uygun ve net metin etiketleriyle eşleştirilmek üzere tasarlanmıştır.
Genel Bakış
Ülke bayraklarını dil kısayolu olarak değil, bölgesel işaretler olarak kullanın
Ülke bayrakları, seçim ülke, bölge, pazar, gönderim bölgesi, para birimi, ofis konumu veya sunucu konumu ile ilgili olduğunda en iyi şekilde çalışır. Yerelleştirmeyi destekleyebilirler ancak dil isimlerinin yerine geçmemelidir çünkü bir dil birçok ülkeye ait olabilir ve bir ülke birçok dili barındırabilir.
Uygunluk kontrolü
Ülke bayrakları ve dil seçiciler farklı UX sorunlarını çözer
Bayrak, coğrafya için güçlü bir görsel işarettir. Dil seçici ise okuma ve erişilebilirlik kararıdır. En temiz arayüzler genellikle sadece görüntüye güvenmek yerine bayrağı yerel dil etiketi, bölge adı veya ülke adı ile birleştirir.
Bayrakları bölgesel bağlam için kullanın
- Görünür etiketin ülke veya pazarı adlandırdığı ülke veya bölge seçiciler.
- Sunucu konumu listeleri, gönderim bölgeleri, ofis konumları, para birimi seçiciler ve bölgesel fiyat tabloları.
- URL, içerik, meta veriler ve bayrağın aynı bölgeyi işaret ettiği yerelleştirilmiş açılış sayfaları.
- Küçük bir görsel ipucunun kullanıcıların ülkeye özel satırları hızlıca taramasına yardımcı olduğu kompakt paneller.
Bayrakları tek dil etiketi olarak kullanmaktan kaçının
- Deutsch, English veya Espanol gibi dil isimleri olmadan sadece bayrak gösteren dil değiştiriciler.
- Bir ülkenin birden fazla resmi dili olduğu veya bir dilin birçok ülkeye yayıldığı pazarlar.
- Kullanıcının karar vermesine yardımcı olmadan ağ isteklerini artıran dekoratif bayrak kümeleri.
- Görüntü anlamlı olduğunda ülkeyi tanımlamak yerine sadece DE, bayrak veya simge diyen alt metin.
İçindekiler
Bayrak seti
Koleksiyon, ülke kodu iş akışını değiştirmeden size çeşitli şekiller sunar
Her set 256 SVG bayrak içerir. Yoğun düzenler için dikdörtgen bayraklar, kompakt seçiciler için daireler veya kareler, daha görsel vurgu için dalgalı bayraklar ve rozetler veya premium çağrılar için oval şekiller kullanın. Uygulama basit kalabilir çünkü ülke kodu sabit girdidir.
Dikdörtgen bayraklar
Ülke listeleri, fiyat tabloları, sunucu konumları ve bayrakların satırlarda düzgün hizalanması gereken tüm kullanıcı arayüzlerinde klasik en-boy oranını kullanın.
Daire ve kare bayraklar
Profil seçiciler, dil çekmeceleri, mobil navigasyon, tablo etiketleri ve küçük durum kontrolleri için kompakt şekiller kullanın.
Dalgalı bayraklar
Sayfa daha editoryal bir his vermeli ise, örneğin kahraman bölümlerinde, ülke öne çıkanlarında veya öne çıkan bölge panellerinde dalgalı bayraklar kullanın.
Oval bayraklar
Yumuşak rozetler, pazar yeri etiketleri, ürün çağrıları ve keskin köşelerin ağır hissettirdiği düzenler için oval bayraklar kullanın.
Erişilebilirlik
Erişilebilir bayrak arayüzü metin, etiketler ve doğru anlam gerektirir
Bayrak bir seçeneği süsleyebilir ancak erişilebilir isim seçimi açıklamalıdır. Görüntü bilgilendirici ise Almanya Bayrağı gibi alt metin kullanın, dekoratif bayraklar için boş alt metin kullanın ve önemli kontrollerin yanına görünür dil veya ülke isimleri koyun.
Bilgilendirici bayrakları tanımlayın
Bayrak ülke bilgisi iletiyorsa net alt metin kullanın. Aynı ülke adı zaten yanındaysa bayrak dekoratif olabilir.
Asla sadece bayrağa güvenmeyin
Bir kontrol, ülke, bölge veya dil adını metin olarak göstermelidir. Bu, ekran okuyuculara, çeviri araçlarına ve bayrağı tanımayan kullanıcılara yardımcı olur.
Sadece görselleri değil, kontrolleri de boyutlandırın
Küçük SVG dosyaları uygundur ancak tıklanabilir alan mobilde rahat olmalı ve formlar ile menülerde klavye odaklanabilir olmalıdır.
Performans
SVG bayraklar, teslimat yolu basit olduğunda keskin kalır ve sunumu ucuzdur
Bayraklar için SVG doğru varsayılandır çünkü kenarlar her boyutta net kalır ve dosyalar genellikle küçüktür. İşaretlemeyi optimize tutun, dosyaları agresif önbelleğe alın, bir sayfada yüzlerce satır içi SVG gömmekten kaçının ve yalnızca kullanıcının görebileceği veya yakında ihtiyaç duyacağı bayrakları yükleyin.
Keskin kenarlar için SVG kullanın
Bayraklar keskin geometrik şekiller ve düz renkler içerir, bu yüzden SVG genellikle birden fazla raster boyutundan daha küçük ve temiz kalır.
Dosya yoluna göre önbellekleme
Bayrak URL’lerini sabit tutun ve statik dosya önbelleklemesiyle tekrar eden ziyaretlerde sıkıcı işleri yaptırın.
Büyük satır içi yığınlardan kaçının
Satır içi SVG birkaç simge için faydalıdır ancak yüzlerce satır içi bayrak içeren sayfa analiz için ağırlaşır.
Düzen alanı ayırın
Bayraklar yüklenirken arayüzün kaymaması için işaretleme veya CSS’de genişlik ve yükseklik belirleyin.
Uygulama
Bayrakları görsel olarak güzelleştirmeden önce işaretlemeyi semantik tutun
Gerçek bir bağlantı veya butonla başlayın, metin etiketi ekleyin, bayrak boyutunu CSS ile ayarlayın ve SVG dosyasının önbelleğe alınabilir bir yoldan yüklenmesini sağlayın. Bu, arama motorları ve yardımcı teknolojilere faydalı bağlam sunarken tasarımcılara hızlı bir görsel ipucu verir.
Erişilebilir ülke seçenek işaretlemesi
Bu desen, görünür metin gerçek anlamı taşıdığı için bölge seçiciler, ülke filtreleri ve yerelleştirilmiş mağaza bağlantıları için uygundur.
<a class="country-option" href="/de-de/" hreflang="de-DE">
<img class="country-option__flag"
src="/svg/flages/4x3/de.svg"
width="24"
height="18"
alt="Flag of Germany" />
<span>Deutsch - Germany</span>
</a>Kararlı bayrak boyutlandırması
Sabit boyutlar, düzen kaymasını önler ve karışık bayrak şekillerinin taranmasını kolaylaştırır.
.country-option {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 10px;
padding: 8px 12px;
}
.country-option__flag {
width: 24px;
height: 18px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 4px;
}SEO ve UX
Bayraklar, yalnızca çevredeki sayfa bölgeyi açıkladığında SEO'ya yardımcı olur
Arama motorları bir sayfayı sadece bayrak içerdiği için sıralamaz. Bayrak, URL, başlıklar, hreflang etiketleri, meta veriler, bağlantı metni ve görünür içerik aynı bölgesel veya yerelleştirme amacını netleştirdiğinde yardımcı olur.
Bayrakları kültüre duyarlı bağlantılarla eşleştirin
Yerelleştirilmiş URL’ler ve hreflang etiketleri bir görüntüden daha güçlü SEO anlamı taşır. Bayraklar bu sinyalleri desteklemeli, yerine geçmemelidir.
Başlık, H1 ve açıklamayı ayrı tutun
Odaklanmış bir başlık, doğal bir H1 ve kullanıcıyı bayrak setini incelemeye veya indirmeye davet eden bir meta açıklama kullanın.
Anlamlı dosya adları ve alt metin kullanın
de.svg gibi bir dosya kod için uygundur ancak görünür içerik ve erişilebilir etiketler Almanya veya ilgili ülke adını belirtmelidir.
Bayrakları çabayı azaltan yerlerde kullanın
Bayrak kullanıcıların tahmin yapmasına neden oluyorsa kaldırın veya daha net metin ekleyin. İyi yerelleştirme kullanıcı arayüzü, açıklama olmadan bile açık olmalıdır.
Başlayın
Ücretsiz örneklerle başlayın, ardından arayüzünüzün ihtiyaç duyduğu şekli seçin
Örnekleri önce gerçek seçicinizde, tabloda, menüde veya panoda test edin. Boşluklar ve etiketler doğru hissettikten sonra tam seti satın alın ve tam koleksiyon için aynı ülke kodu tabanlı uygulamayı koruyun.
SSS
Ülke bayrakları SVG SSS
Ülke bayrakları, dil seçiciler, erişilebilirlik, SEO, performans ve SVG teslimatı hakkında kısa yanıtlar.
Dil seçimi için ülke bayrakları kullanmalı mıyım?
Ülke bayraklarını yalnızca destekleyici görsel ipucu olarak kullanın. Dil seçici ayrıca dil adını da göstermelidir çünkü bir dil birçok ülkede konuşulabilir ve bir ülkede birden fazla dil olabilir.
Neden SVG bayraklar PNG bayraklardan daha iyidir?
SVG bayraklar her boyutta keskin kalır, genellikle çok küçük dosyalar gerektirir ve duyarlı düzenlerle iyi çalışır. PNG eski sistemler için hala faydalı olabilir ancak sabit görsel boyutları gerekir.
Bayrak için alt metni nasıl yazmalıyım?
Bayrak anlamlıysa Almanya Bayrağı gibi metin kullanın. Ülke adı zaten görünür ve görüntü dekoratifse, ekran okuyucuların aynı fikri tekrarlamaması için boş alt metin kullanın.
Bayraklar tek başına SEO’yu iyileştirir mi?
Hayır. Bayraklar ancak sayfa net bölgesel içerik, kültüre duyarlı URL’ler, hreflang etiketleri, faydalı meta veriler ve erişilebilir etiketler içerdiğinde SEO’yu destekler.
Set içinde kaç bayrak var?
Her set 256 SVG ülke bayrağı içerir. Oluşturduğunuz düzenin türüne göre dikdörtgen, kare, daire, dalga ve oval şekiller kullanabilirsiniz.
Birçok bayrak içeren sayfayı nasıl hızlı tutabilirim?
Bayrakları önbelleğe alınabilir yollardan optimize edilmiş SVG dosyaları olarak sunun, görüntü boyutlarını ayırın ve normal görsel dosyaları yeterliyse yüzlerce satır içi SVG belgesi oluşturmayı önleyin.