Landsflaggor för webbgränssnitt
Ladda ner landsflaggor i SVG för tillgängliga globala webbplatser
Ladda ner en produktionsklar uppsättning med 256 landsflaggor i SVG-format för webbplatser, appar, instrumentpaneler, regionsväljare, serverlistor och lokaliseringsgränssnitt. Filerna är små, skalbara, cachevänliga och utformade för att kombineras med tydliga textetiketter.
Översikt
Använd landsflaggor som regionala signaler, inte som en genväg för språk
Landsflaggor fungerar bäst när valet gäller ett land, en region, marknad, fraktzon, valuta, kontorsplats eller serverplats. De kan stödja lokalisering, men bör inte ersätta språknamn eftersom ett språk kan tillhöra många länder och ett land kan ha flera språk.
Passar bra
Landsflaggor och språkval löser olika UX-problem
En flagga är en stark visuell ledtråd för geografi. En språkvalare är ett läs- och tillgänglighetsbeslut. De renaste gränssnitten kombinerar ofta en flagga med en inhemsk språketikett, regionsnamn eller landsnamn istället för att enbart förlita sig på bilden.
Använd flaggor för regional kontext
- Land- eller regionsväljare där den synliga etiketten anger landet eller marknaden.
- Listor över serverplatser, fraktzoner, kontorsplatser, valutaväljare och regionala prislistor.
- Lokaliserade landningssidor där URL, text, metadata och flagga alla pekar på samma region.
- Kompakta instrumentpaneler där en liten visuell ledtråd hjälper användare att snabbt skanna landspecifika rader.
Undvik flaggor som enda språkmarkering
- Språkväxlare som endast visar en flagga utan språknamn som Deutsch, English eller Espanol.
- Marknader där ett land har flera officiella språk eller där ett språk sträcker sig över många länder.
- Dekorativa flaggmoln som lägger till nätverksförfrågningar utan att hjälpa användaren att fatta ett beslut.
- Alt-text som bara säger DE, flagga eller ikon istället för att beskriva landet när bilden är meningsfull.
Innehållsförteckning
Flaggsats
Samlingen ger dig flera former utan att ändra arbetsflödet för landskoder
Varje sats innehåller 256 SVG-flaggor. Använd rektangulära flaggor för täta layouter, cirklar eller kvadrater för kompakta väljare, vågflagga för mer visuell betoning och ovaler för märken eller premiummarkeringar. Implementeringen kan hållas enkel eftersom landskoden förblir den stabila ingången.
Rektangulära flaggor
Använd det klassiska bildförhållandet för landslistor, prislistor, serverplatser och alla gränssnitt där flaggor måste ligga snyggt i rader.
Cirkelformade och kvadratiska flaggor
Använd kompakta former för profilväljare, språkmenyer, mobilnavigering, tabellchips och små statuskontroller.
Vågformade flaggor
Använd vågflaggor när sidan ska kännas mer redaktionell, till exempel i hero-sektioner, landshöjdpunkter eller utvalda regionpaneler.
Ovala flaggor
Använd ovala flaggor för mjuka märken, marknadsetiketter, produktmarkeringar och layouter där skarpa hörn känns för tunga.
Tillgänglighet
Tillgängligt flagggränssnitt kräver text, etiketter och tydlig betydelse
En flagga kan dekorera ett val, men det tillgängliga namnet bör förklara valet. Använd alt-text som Tysklands flagga när bilden är informativ, använd tom alt-text för dekorativa flaggor och placera synliga språk- eller landsnamn bredvid viktiga kontroller.
Beskriv informativa flaggor
Använd tydlig alt-text när flaggan förmedlar landsinformation. Om samma landsnamn redan är synligt bredvid kan flaggan vara dekorativ.
Lita aldrig enbart på flaggan
En kontroll bör visa ett lands-, regions- eller språknamn i text. Det hjälper skärmläsare, översättningsverktyg och användare som inte känner igen en flagga.
Storleksanpassa kontroller, inte bara bilder
Små SVG-filer är okej, men klickytan bör ändå vara bekväm på mobiler och kunna fokuseras med tangentbord i formulär och menyer.
Prestanda
SVG-flaggor förblir skarpa och billiga att leverera när leveransvägen är enkel
SVG är rätt standard för landsflaggor eftersom kanterna förblir skarpa i alla storlekar och filerna vanligtvis är små. Håll markuppen optimerad, cachelagra filer aggressivt, undvik att bädda in hundratals inline-SVG:er på en sida och ladda endast de flaggor användaren kan se eller snart behöver.
Använd SVG för skarpa kanter
Flaggor innehåller skarp geometri och enfärgade ytor, så SVG är oftast mindre och renare än flera rasterstorlekar.
Cachelagra efter filsökväg
Håll flagg-URL:er stabila och låt cachelagring av statiska filer sköta det tråkiga arbetet vid upprepade besök.
Undvik stora inline-dumpar
Inline-SVG är användbart för några ikoner, men en sida med hundratals inline-flaggor blir tung att tolka.
Reservera layoututrymme
Ange bredd och höjd i markup eller CSS så att gränssnittet inte hoppar när flaggor laddas.
Implementering
Behåll semantisk markup innan du gör flaggorna snygga
Börja med en riktig länk eller knapp, inkludera en textetikett, ställ in flaggans storlek med CSS och låt SVG-filen laddas från en cachebar sökväg. Det ger sökmotorer och hjälpmedel användbar kontext samtidigt som designers får en snabb visuell ledtråd.
Tillgänglig markup för landsval
Detta mönster fungerar för regionsväljare, landsfilter och lokaliserade butikslänkar eftersom den synliga texten bär den faktiska betydelsen.
<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>Stabil flaggstorlek
Fasta dimensioner förhindrar layoutförskjutning och gör det enklare att skanna blandade flaggformer.
.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 och UX
Flaggor hjälper SEO endast när sidan runtomkring förklarar regionen
Sökmotorer rankar inte en sida bara för att den innehåller en flagga. Flaggan hjälper när URL, rubriker, hreflang-taggar, metadata, länkar och synlig text alla tydligt visar samma regionala eller lokaliseringsinriktning.
Matcha flaggor med kulturmedvetna länkar
Lokaliserade URL:er och hreflang-taggar har starkare SEO-värde än en bild. Flaggor bör stödja dessa signaler, inte ersätta dem.
Håll titel, H1 och beskrivning åtskilda
Använd en fokuserad titel, en naturlig H1 och en metabeskrivning som uppmuntrar användaren att granska eller ladda ner flaggsatsen.
Använd meningsfulla filnamn och alt-text
En fil som de.svg är okej för kod, men synligt innehåll och tillgängliga etiketter bör säga Tyskland eller relevant landsnamn.
Använd flaggor där de minskar ansträngning
Om en flagga får användare att gissa, ta bort den eller lägg till tydligare text. Bra lokaliseringsgränssnitt känns självklart utan en förklarande legend.
Kom igång
Börja med de gratis exemplen, välj sedan den form ditt gränssnitt behöver
Testa först proverna i din faktiska väljare, tabell, meny eller instrumentpanel. När avstånd och etiketter känns rätt, köp hela satsen och behåll samma landskodbaserade implementering för hela samlingen.
Vanliga frågor
Vanliga frågor om landsflaggor i SVG
Korta svar om landsflaggor, språkval, tillgänglighet, SEO, prestanda och SVG-leverans.
Ska jag använda landsflaggor för språkval?
Använd landsflaggor endast som en stödjande visuell ledtråd. En språkvalare bör också visa språknamnet eftersom ett språk kan talas i många länder och ett land kan ha flera språk.
Varför är SVG-flaggor bättre än PNG-flaggor?
SVG-flaggor förblir skarpa i alla storlekar, kräver vanligtvis mycket små filer och fungerar bra med responsiva layouter. PNG kan fortfarande vara användbart för äldre system, men kräver fasta bildstorlekar.
Hur ska jag skriva alt-text för en flagga?
När flaggan är meningsfull, använd text som Tysklands flagga. När landsnamnet redan är synligt och bilden är dekorativ, använd tom alt-text så att skärmläsare inte upprepar samma sak.
Förbättrar flaggor SEO på egen hand?
Nej. Flaggor stödjer SEO endast när sidan också har tydlig regional text, kulturmedvetna URL:er, hreflang-taggar, användbar metadata och tillgängliga etiketter.
Hur många flaggor ingår i satsen?
Varje sats innehåller 256 SVG-landsflaggor. Du kan använda rektangulära, kvadratiska, cirkulära, vågformade och ovala former beroende på vilken layout du bygger.
Hur kan jag hålla en sida med många flaggor snabb?
Servera flaggor som optimerade SVG-filer från cachebara sökvägar, reservera deras visningsstorlek och undvik att rendera hundratals inline-SVG-dokument när vanliga bildfiler räcker.