Flagi państwowe do interfejsów internetowych
Pobierz flagi krajów w formacie SVG dla dostępnych globalnych stron internetowych
Pobierz gotowy do użycia zestaw 256 flag państw w formacie SVG, idealny dla stron internetowych, aplikacji, paneli kontrolnych, selektorów regionów, list serwerów i interfejsów lokalizacyjnych. Pliki są małe, skalowalne, przyjazne dla pamięci podręcznej i zaprojektowane do współpracy z czytelnymi etykietami tekstowymi.
Przegląd
Używaj flag krajów jako sygnałów regionalnych, a nie skrótu dla języka
Flagi państw sprawdzają się najlepiej, gdy wybór dotyczy kraju, regionu, rynku, strefy wysyłki, waluty, lokalizacji biura lub serwera. Mogą wspierać lokalizację, ale nie powinny zastępować nazw języków, ponieważ jeden język może być używany w wielu krajach, a jeden kraj może mieć wiele języków.
Sprawdzenie dopasowania
Flagi krajów i selektory języków rozwiązują różne problemy UX
Flaga to silny wizualny sygnał geograficzny. Wybór języka to decyzja związana z czytelnością i dostępnością. Najczystsze interfejsy często łączą flagę z natywną nazwą języka, nazwą regionu lub kraju, zamiast polegać wyłącznie na obrazie.
Używaj flag dla kontekstu regionalnego
- Selektory kraju lub regionu, gdzie widoczna etykieta nazywa kraj lub rynek.
- Listy lokalizacji serwerów, strefy wysyłki, lokalizacje biur, selektory walut i regionalne tabele cenowe.
- Lokalizowane strony docelowe, gdzie URL, treść, metadane i flaga wskazują ten sam region.
- Kompaktowe panele, gdzie mały sygnał wizualny pomaga użytkownikom szybko przeglądać wiersze dotyczące konkretnych krajów.
Unikaj używania flag jako jedynej etykiety języka
- Przełączniki języków pokazujące tylko flagę bez nazwy języka, np. Deutsch, English czy Espanol.
- Rynki, gdzie jeden kraj ma wiele języków urzędowych lub jeden język obejmuje wiele krajów.
- Dekoracyjne chmury flag, które zwiększają liczbę zapytań sieciowych, nie pomagając użytkownikowi w podjęciu decyzji.
- Tekst alt mówiący tylko DE, flaga lub ikona zamiast opisu kraju, gdy obraz jest informacyjny.
Spis treści
Zestaw flag
Kolekcja oferuje kilka kształtów bez zmiany procesu kodu kraju
Każdy zestaw zawiera 256 flag w formacie SVG. Używaj flag prostokątnych do gęstych układów, okrągłych lub kwadratowych do kompaktowych selektorów, falistych do większego podkreślenia wizualnego oraz owalnych do odznak lub wyróżnień premium. Implementacja może pozostać prosta, ponieważ kod kraju jest stałym i stabilnym identyfikatorem.
Flagi prostokątne
Używaj klasycznego proporcji dla list krajów, tabel cenowych, lokalizacji serwerów i wszelkich interfejsów, gdzie flagi muszą być równo ułożone w rzędach.
Flagi okrągłe i kwadratowe
Używaj kompaktowych kształtów do wyboru profilu, rozwijanych list języków, nawigacji mobilnej, elementów tabel i małych kontrolek statusu.
Flagi falujące
Używaj falistych flag, gdy strona ma mieć bardziej redakcyjny charakter, na przykład w sekcjach głównych, wyróżnieniach krajów lub panelach regionów.
Flagi owalne
Używaj owalnych flag do delikatnych odznak, etykiet na rynku, wyróżnień produktów oraz układów, gdzie ostre narożniki wydają się zbyt ciężkie.
Dostępność
Dostępny interfejs flag wymaga tekstu, etykiet i jasnego znaczenia
Flaga może ozdabiać wybór, ale nazwa dostępna dla czytników ekranu powinna wyjaśniać wybór. Używaj tekstu alternatywnego, np. Flaga Niemiec, gdy obraz jest informacyjny, stosuj pusty tekst alt dla flag dekoracyjnych i umieszczaj widoczne nazwy języków lub krajów obok ważnych elementów sterujących.
Opisuj flagi informacyjne
Używaj jasnego tekstu alt, gdy flaga przekazuje informacje o kraju. Jeśli nazwa kraju jest już widoczna obok, flaga może mieć charakter dekoracyjny.
Nigdy nie polegaj wyłącznie na fladze
Element sterujący powinien wyświetlać nazwę kraju, regionu lub języka w formie tekstowej. Pomaga to czytnikom ekranu, narzędziom tłumaczeniowym oraz użytkownikom, którzy nie rozpoznają flagi.
Ustaw rozmiar kontrolek, nie tylko obrazów
Małe pliki SVG są w porządku, ale obszar klikalny powinien być wygodny na urządzeniach mobilnych i dostępny do fokusu klawiaturą w formularzach i menu.
Wydajność
Flagi SVG pozostają ostre i tanie w dostarczaniu, gdy ścieżka dostawy jest prosta
SVG to właściwy domyślny format dla flag państw, ponieważ krawędzie pozostają ostre w każdym rozmiarze, a pliki są zazwyczaj bardzo małe. Optymalizuj znaczniki, agresywnie korzystaj z pamięci podręcznej, unikaj osadzania setek SVG inline na jednej stronie i ładuj tylko te flagi, które użytkownik może zobaczyć lub będzie potrzebował wkrótce.
Używaj SVG dla ostrych krawędzi
Flagi mają ostre kształty i płaskie kolory, dlatego SVG jest zwykle mniejsze i czyściejsze niż wiele rastrowych rozmiarów.
Buforuj według ścieżki pliku
Utrzymuj stabilne adresy URL flag i pozwól buforowaniu plików statycznych wykonywać powtarzalną pracę przy kolejnych odwiedzinach.
Unikaj dużych osadzeń inline
SVG inline jest przydatne dla kilku ikon, ale strona z setkami flag inline staje się ciężka do przetworzenia.
Zarezerwuj miejsce w układzie
Ustaw szerokość i wysokość w znacznikach lub CSS, aby interfejs nie skakał podczas ładowania flag.
Implementacja
Zachowaj semantykę markup przed upiększaniem flag
Zacznij od prawdziwego linku lub przycisku, dołącz etykietę tekstową, ustaw rozmiar flagi za pomocą CSS i pozwól, aby plik SVG ładował się z ścieżki możliwej do buforowania. Zapewnia to wyszukiwarkom i technologiom wspomagającym przydatny kontekst, a projektantom szybki sygnał wizualny.
Dostępny markup opcji kraju
Ten wzorzec sprawdza się w selektorach regionów, filtrach krajów i lokalizowanych linkach do sklepów, ponieważ widoczny tekst niesie rzeczywiste znaczenie.
<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>Stabilne rozmiary flag
Stałe wymiary zapobiegają przesunięciom układu i ułatwiają przeglądanie mieszanych kształtów flag.
.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 i UX
Flagi pomagają SEO tylko wtedy, gdy otaczająca strona wyjaśnia region
Wyszukiwarki nie pozycjonują strony tylko dlatego, że zawiera flagę. Flaga pomaga, gdy URL, nagłówki, tagi hreflang, metadane, tekst linków i widoczna treść jasno wskazują ten sam regionalny lub lokalizacyjny cel.
Dopasuj flagi do linków uwzględniających kulturę
Lokalizowane adresy URL i tagi hreflang mają silniejsze znaczenie SEO niż obraz. Flagi powinny wspierać te sygnały, a nie je zastępować.
Zachowaj rozróżnienie tytułu, H1 i opisu
Używaj skoncentrowanego tytułu, naturalnego H1 oraz meta opisu zachęcającego użytkownika do przeglądu lub pobrania zestawu flag.
Używaj znaczących nazw plików i tekstu alt
Plik taki jak de.svg jest odpowiedni dla kodu, ale widoczna zawartość i etykiety dostępne powinny mówić Niemcy lub odpowiednią nazwę kraju.
Używaj flag tam, gdzie zmniejszają wysiłek
Jeśli flaga zmusza użytkowników do zgadywania, usuń ją lub dodaj jaśniejszy tekst. Dobry interfejs lokalizacyjny jest oczywisty bez legendy.
Rozpocznij
Zacznij od darmowych próbek, a następnie wybierz kształt potrzebny Twojemu interfejsowi
Najpierw przetestuj próbki w swoim rzeczywistym selektorze, tabeli, menu lub panelu. Gdy odstępy i etykiety będą odpowiednie, kup pełny zestaw i zachowaj tę samą implementację opartą na kodzie kraju dla całej kolekcji.
Najczęstsze pytania
Czy powinienem używać flag państw do wyboru języka?
Używaj flag państw tylko jako wspierający sygnał wizualny. Selektor języka powinien także pokazywać nazwę języka, ponieważ jeden język może być używany w wielu krajach, a jeden kraj może mieć kilka języków.
Dlaczego flagi SVG są lepsze niż PNG?
Flagi SVG pozostają ostre w każdym rozmiarze, zazwyczaj mają bardzo małe pliki i dobrze działają w responsywnych układach. PNG może być nadal użyteczny w systemach starszych, ale wymaga stałych rozmiarów obrazów.
Jak pisać tekst alt dla flagi?
Gdy flaga jest znacząca, używaj tekstu takiego jak Flaga Niemiec. Gdy nazwa kraju jest już widoczna, a obraz jest dekoracyjny, stosuj pusty tekst alt, aby czytniki ekranu nie powtarzały tej samej informacji.
Czy flagi same poprawiają SEO?
Nie. Flagi wspierają SEO tylko wtedy, gdy strona ma jasną regionalną treść, adresy URL uwzględniające kulturę, tagi hreflang, przydatne metadane i dostępne etykiety.
Ile flag zawiera zestaw?
Każdy zestaw zawiera 256 flag państw w formacie SVG. Możesz używać kształtów prostokątnych, kwadratowych, okrągłych, falistych i owalnych w zależności od tworzonego układu.
Jak utrzymać szybkość strony z wieloma flagami?
Serwuj flagi jako zoptymalizowane pliki SVG z możliwych do buforowania ścieżek, rezerwuj ich rozmiar wyświetlania i unikaj renderowania setek dokumentów SVG inline, gdy wystarczą zwykłe pliki obrazów.