Galerie complète de 271 drapeaux SVG téléchargeables en SVG ou PNG : filtrez par pays, copiez le code source et intégrez les flags dans vos projets web.
Galerie interactive — 271 drapeaux du monde
Tous les drapeaux sont disponibles en format SVG vectoriel. Cliquez sur un drapeau pour accéder aux options : télécharger en SVG, convertir en PNG, ou copier directement le code SVG source.
Aucun drapeau trouvé pour cette recherche.
Essayez un autre nom de pays ou un code ISO.
SVG et drapeaux : pourquoi choisir ce format ?
Le format SVG (Scalable Vector Graphics) s'impose comme le choix optimal pour afficher des drapeaux nationaux sur le web. Contrairement aux images matricielles (PNG, JPG, WebP), un SVG est défini par des équations mathématiques décrivant des formes géométriques, des courbes et des couleurs. Résultat : une qualité parfaite à toutes les résolutions, du favicon 16×16 jusqu'à l'impression grand format.
Comparaison des formats pour les drapeaux
| Critère | SVG | PNG | WebP |
|---|---|---|---|
| Qualité à grande taille | ✓ Parfaite | Pixellisation | Pixellisation |
| Poids fichier (drapeau simple) | ✓ 2–15 Ko | 8–30 Ko | 5–20 Ko |
| Support navigateurs | ✓ 98%+ | ✓ 100% | 95%+ |
| Animation CSS | ✓ Oui | Non | Limité |
| Modification des couleurs via CSS | ✓ Inline SVG | Non | Non |
| Compatibilité email | Limitée | ✓ Oui | Limitée |
| Accessibilité (titre, desc) | ✓ Natif | Via alt | Via alt |
Structure interne d'un SVG de drapeau
Un drapeau SVG est un fichier XML. Voici la structure type d'un drapeau simple (France, trois bandes verticales) :
<!-- drapeau France simplifié -->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 900 600"
role="img"
aria-label="Drapeau de la France">
<!-- Titre pour l'accessibilité -->
<title>Drapeau de la France</title>
<!-- Bande bleue (gauche) -->
<rect width="300" height="600" fill="#002395"/>
<!-- Bande blanche (centre) -->
<rect x="300" width="300" height="600" fill="#FFFFFF"/>
<!-- Bande rouge (droite) -->
<rect x="600" width="300" height="600" fill="#ED2939"/>
</svg>
Le viewBox="0 0 900 600" définit le système de coordonnées interne.
Quelle que soit la taille affichée (20px ou 2000px), les proportions restent identiques.
C'est la force principale du SVG pour les drapeaux.
Afficher un drapeau SVG en HTML : 4 méthodes
Il existe quatre approches principales pour intégrer un SVG dans une page HTML. Chacune a ses avantages selon le contexte d'utilisation.
Méthode 1 — Balise <img> (recommandée pour les galeries)
La méthode la plus simple et la plus performante. Le SVG est traité comme une image externe, mise en cache par le navigateur et non interprétée comme DOM actif.
<!-- Affichage simple avec taille fixe -->
<img
src="assets/images/flags/fr.svg"
alt="Drapeau de la France"
width="64"
height="42"
loading="lazy"
>
<!-- Responsive avec objet-fit -->
<img
src="assets/images/flags/de.svg"
alt="Drapeau de l'Allemagne"
style="width: 100%; max-width: 200px; height: auto;"
loading="lazy"
>loading="lazy" pour les galeries de nombreux drapeaux.
Pour l'image principale visible au-dessus de la ligne de flottaison,
utilisez fetchpriority="high" à la place.
Méthode 2 — Balise <picture> avec fallback
<!-- SVG avec fallback PNG pour les vieux systèmes -->
<picture>
<source srcset="assets/images/flags/jp.svg" type="image/svg+xml">
<img src="assets/images/flags/jp.png" alt="Drapeau du Japon" width="64" height="42">
</picture>Méthode 3 — Inline SVG (pour manipulation CSS/JS)
Injecter le code SVG directement dans le DOM permet d'accéder aux éléments internes via CSS et JavaScript. Idéal pour les animations ou la personnalisation des couleurs.
<!-- Récupération et injection via fetch() -->
<div id="flag-container"></div>
<script>
fetch('assets/images/flags/ca.svg')
.then(response => response.text())
.then(svgText => {
// Injection du SVG dans le DOM
document.getElementById('flag-container').innerHTML = svgText;
// Manipulation CSS une fois injecté
const svgEl = document.querySelector('#flag-container svg');
svgEl.setAttribute('width', '120');
svgEl.setAttribute('height', '80');
svgEl.setAttribute('aria-label', 'Drapeau du Canada');
});
</script>Méthode 4 — CSS background-image
/* Drapeau en arrière-plan CSS */
.flag-icon-fr {
display: inline-block;
width: 24px;
height: 16px;
background-image: url('assets/images/flags/fr.svg');
background-size: cover;
background-position: center;
border-radius: 2px;
vertical-align: middle;
}
/* Utilisation dans un bouton de langue */
<button class="btn btn-sm btn-outline-secondary">
<span class="flag-icon-fr" role="img" aria-label="Français"></span>
Français
</button>Créer une grille de drapeaux en CSS Grid
CSS Grid est la solution idéale pour créer des galeries de drapeaux responsives,
sans media queries complexes. La propriété auto-fill combinée à minmax()
adapte automatiquement le nombre de colonnes à la largeur disponible.
Grille auto-responsive (aucune media query)
/* Grille qui s'adapte automatiquement */
.flags-grid {
display: grid;
/* Colonnes de 110px minimum, autant que possible */
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 0.85rem;
}
/* Carte drapeau */
.flag-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem 0.5rem;
border: 1px solid #dee2e6;
border-radius: 8px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
background: #fff;
text-decoration: none;
color: inherit;
}
.flag-card:hover {
border-color: #0d6efd;
box-shadow: 0 4px 14px rgba(13, 110, 253, 0.18);
transform: translateY(-2px); /* légère élévation au survol */
}
/* Image du drapeau */
.flag-card img {
width: 64px;
height: 42px;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
margin-bottom: 0.5rem;
}
/* Nom du pays — tronqué si trop long */
.flag-name {
font-size: 0.72rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
/* Code ISO affiché en dessous */
.flag-code {
font-family: monospace;
font-size: 0.62rem;
color: #6c757d;
margin-top: 2px;
}Filtrage dynamique avec CSS uniquement
Pour masquer les cartes filtrées, une simple classe .hidden suffit —
plus performant que display: none car CSS Grid gère l'espace automatiquement.
/* Masquer les cartes filtrées */
.flag-card.hidden {
display: none; /* retire la carte de la grille */
}
/* Message "aucun résultat" */
.flags-no-results {
display: none;
grid-column: 1 / -1; /* occupe toute la largeur */
text-align: center;
padding: 3rem 1rem;
color: #6c757d;
}
/* Afficher le message quand toutes les cartes sont cachées */
.flags-no-results.visible {
display: block;
}Dark mode avec CSS custom properties
/* Variables CSS pour le thème clair */
:root {
--flag-card-bg: #ffffff;
--flag-card-border: #dee2e6;
--flag-card-hover-border: #0d6efd;
--flag-code-color: #6c757d;
}
/* Variables CSS pour le thème sombre */
[data-theme="dark"] {
--flag-card-bg: #1c2433;
--flag-card-border: #2d3748;
--flag-card-hover-border: #4d93fb;
--flag-code-color: #9ca3af;
}
/* Composants qui utilisent les variables */
.flag-card {
background: var(--flag-card-bg);
border-color: var(--flag-card-border);
}
.flag-card:hover {
border-color: var(--flag-card-hover-border);
}
.flag-code {
color: var(--flag-code-color);
}Convertir un SVG en PNG avec l'API Canvas
La conversion SVG → PNG côté navigateur utilise l'API Canvas HTML5 :
on charge le SVG comme source d'une Image, on la dessine sur un canvas,
puis on exporte le canvas en PNG. Aucune bibliothèque tierce n'est nécessaire.
Fonction de conversion complète
/**
* Convertit un SVG (URL ou contenu texte) en PNG téléchargeable.
* @param {string} svgUrl - URL vers le fichier SVG
* @param {string} filename - Nom du fichier de sortie (sans extension)
* @param {number} width - Largeur de sortie en pixels (défaut: 640)
* @param {number} height - Hauteur de sortie en pixels (défaut: 426)
*/
function downloadSvgAsPng(svgUrl, filename, width = 640, height = 426) {
// 1. Créer une image depuis le SVG
const img = new Image();
img.onload = function () {
// 2. Créer un canvas aux dimensions souhaitées
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 3. Fond blanc (les SVG avec transparence auront un fond blanc en PNG)
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, width, height);
// 4. Dessiner le SVG sur le canvas
ctx.drawImage(img, 0, 0, width, height);
// 5. Exporter en PNG et déclencher le téléchargement
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = filename + '.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
// Déclenchement du chargement du SVG
img.src = svgUrl;
}
// Utilisation
downloadSvgAsPng('assets/images/flags/fr.svg', 'drapeau-france');img.crossOrigin = 'anonymous' avant img.src = ....
Sans cela, le canvas sera "pollué" et toDataURL() lèvera une erreur de sécurité.
Conversion avec redimensionnement proportionnel
/**
* Conversion en respectant les proportions d'origine du SVG.
* @param {string} svgUrl - URL vers le fichier SVG
* @param {string} filename - Nom du fichier PNG de sortie
* @param {number} maxWidth - Largeur maximale (la hauteur s'adapte)
*/
async function downloadFlagPng(svgUrl, filename, maxWidth = 800) {
// Récupérer le SVG pour lire son viewBox
const response = await fetch(svgUrl);
const svgText = await response.text();
// Extraire le viewBox pour calculer le ratio
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
const svgEl = svgDoc.documentElement;
let svgW = parseFloat(svgEl.getAttribute('width') || '900');
let svgH = parseFloat(svgEl.getAttribute('height') || '600');
// Récupérer depuis viewBox si width/height absents
const viewBox = svgEl.getAttribute('viewBox');
if (viewBox) {
const parts = viewBox.split(/\s+/);
if (parts.length >= 4) {
svgW = parseFloat(parts[2]);
svgH = parseFloat(parts[3]);
}
}
const ratio = svgH / svgW;
const outW = maxWidth;
const outH = Math.round(outW * ratio);
// Dessiner sur canvas
const canvas = document.createElement('canvas');
canvas.width = outW;
canvas.height = outH;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, outW, outH);
const img = new Image();
img.src = svgUrl;
await new Promise(resolve => { img.onload = resolve; });
ctx.drawImage(img, 0, 0, outW, outH);
// Télécharger
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = filename + '.png';
a.click();
}
// Exemple : télécharger le drapeau US en 800px de large
downloadFlagPng('assets/images/flags/us.svg', 'drapeau-etats-unis', 800);Copier du code SVG dans le presse-papiers
L'API Clipboard moderne (navigator.clipboard.writeText()) permet de copier du texte
en une ligne, sans sélection manuelle ni commande execCommand (désormais déprécié).
Copie du code SVG avec feedback utilisateur
/**
* Récupère le contenu d'un fichier SVG et le copie dans le presse-papiers.
* @param {string} svgUrl - URL vers le fichier SVG
*/
async function copySvgCode(svgUrl) {
try {
// 1. Récupérer le contenu SVG
const response = await fetch(svgUrl);
if (!response.ok) throw new Error('Erreur réseau : ' + response.status);
const svgText = await response.text();
// 2. Copier dans le presse-papiers
await navigator.clipboard.writeText(svgText);
// 3. Confirmer à l'utilisateur
showToast('Code SVG copié dans le presse-papiers !', 'success');
} catch (err) {
// Fallback si l'API Clipboard n'est pas disponible
fallbackCopy(svgText);
console.warn('Clipboard API indisponible :', err);
}
}
/**
* Fallback pour les navigateurs sans API Clipboard.
*/
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.cssText = 'position:fixed;opacity:0;top:0;left:0;';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy'); // déprécié mais fonctionnel en fallback
showToast('Code copié (mode de secours) !', 'info');
} catch (e) {
showToast('Impossible de copier — veuillez sélectionner manuellement.', 'error');
}
document.body.removeChild(textarea);
}
// Utilisation
document.getElementById('btn-copy').addEventListener('click', () => {
copySvgCode('assets/images/flags/de.svg');
});Notification toast sans bibliothèque
/**
* Affiche une notification temporaire sans alert().
* @param {string} message - Texte du message
* @param {string} type - 'success' | 'danger' | 'warning' | 'info'
* @param {number} duration - Durée en ms (défaut: 3000)
*/
function showToast(message, type = 'success', duration = 3000) {
const toast = document.getElementById('flags-toast');
const msg = document.getElementById('flags-toast-msg');
// Mettre à jour le contenu et le type
msg.textContent = message;
toast.className = `af-alert af-alert--${type} af-alert--toast`;
// Afficher
toast.classList.remove('d-none');
// Masquage automatique
clearTimeout(toast._hideTimer);
toast._hideTimer = setTimeout(() => {
toast.classList.add('d-none');
}, duration);
}Sélecteur de pays avec drapeaux en HTML/CSS/JS
Un sélecteur de pays avec drapeaux améliore considérablement l'UX des formulaires internationaux.
Voici un exemple complet utilisant un <select> natif enrichi avec Bootstrap 5.
Version simple — select avec flag en label
<!-- HTML : sélecteur de pays -->
<div class="mb-3">
<label for="country-select" class="form-label fw-semibold">Pays</label>
<div class="input-group">
<!-- Aperçu du drapeau actif -->
<span class="input-group-text p-1" id="flag-preview">
<img id="selected-flag"
src="assets/images/flags/fr.svg"
alt="Drapeau France"
width="28" height="18"
style="border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2);">
</span>
<select class="form-select" id="country-select" aria-label="Sélectionner un pays">
<option value="fr" data-flag="fr">France</option>
<option value="de" data-flag="de">Allemagne</option>
<option value="es" data-flag="es">Espagne</option>
<option value="it" data-flag="it">Italie</option>
<option value="us" data-flag="us">États-Unis</option>
<option value="jp" data-flag="jp">Japon</option>
<option value="br" data-flag="br">Brésil</option>
<!-- ... autres pays ... -->
</select>
</div>
</div>
<!-- JS : mettre à jour le drapeau à la sélection -->
<script>
document.getElementById('country-select').addEventListener('change', function () {
const selectedOption = this.options[this.selectedIndex];
const flagCode = selectedOption.dataset.flag;
const flagImg = document.getElementById('selected-flag');
// Mise à jour de l'image et de l'alt
flagImg.src = `assets/images/flags/${flagCode}.svg`;
flagImg.alt = `Drapeau ${selectedOption.text}`;
});
</script>Version avancée — dropdown Bootstrap 5 custom
/* CSS pour le dropdown enrichi */
.country-dropdown .dropdown-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1rem;
}
.country-dropdown .dropdown-item img {
width: 24px;
height: 16px;
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
}
/* Barre de recherche dans le dropdown */
.country-search-input {
border: none;
border-bottom: 1px solid #dee2e6;
border-radius: 0;
padding: 0.6rem 1rem;
width: 100%;
outline: none;
font-size: 0.9rem;
}
/* Template HTML du bouton trigger */
<div class="dropdown country-dropdown">
<button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img id="dd-flag" src="assets/images/flags/fr.svg" alt="Drapeau" width="24" height="16"
style="border-radius: 2px;">
<span id="dd-label">France</span>
</button>
<ul class="dropdown-menu">
<!-- Recherche inline -->
<li>
<input type="search" class="country-search-input"
placeholder="Rechercher…" id="dd-search">
</li>
<li><hr class="dropdown-divider m-0"></li>
<!-- Items générés dynamiquement par JS -->
<div id="dd-items"></div>
</ul>
</div>Accessibilité des drapeaux SVG : attributs ARIA
Les drapeaux sont des éléments visuels chargés de sens : un utilisateur de lecteur d'écran doit comprendre quel pays est représenté. Voici les bonnes pratiques ARIA pour les SVG de drapeaux.
Drapeau informatif — fournit une information essentielle
<!-- SVG inline avec rôle et label explicites -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"
role="img"
aria-labelledby="flag-title-fr"
focusable="false">
<title id="flag-title-fr">Drapeau de la France</title>
<rect width="300" height="600" fill="#002395"/>
<rect x="300" width="300" height="600" fill="#FFFFFF"/>
<rect x="600" width="300" height="600" fill="#ED2939"/>
</svg>
<!-- Balise img accessible -->
<img src="assets/images/flags/fr.svg"
alt="Drapeau de la France"
width="64" height="42"
role="img">Drapeau décoratif — purement visuel
<!-- Quand le pays est déjà mentionné dans le texte adjacent -->
<span class="d-flex align-items-center gap-2">
<!-- alt="" vide = ignoré par les lecteurs d'écran -->
<img src="assets/images/flags/de.svg" alt="" width="24" height="16" aria-hidden="true">
Allemagne
</span>
<!-- Pour un bouton avec drapeau -->
<button type="button" class="btn btn-sm btn-outline-secondary"
aria-label="Passer en Allemand">
<img src="assets/images/flags/de.svg" alt="" width="20" height="14" aria-hidden="true">
DE
</button>Galerie de drapeaux accessible avec clavier
<!-- Utiliser des buttons plutôt que des divs pour la navigation clavier -->
<div class="flags-grid" role="list">
<button class="flag-card"
role="listitem"
type="button"
aria-label="Voir drapeau : France (fr)"
data-code="fr"
data-name="France">
<img src="assets/images/flags/fr.svg"
alt="Drapeau de la France"
width="64" height="42"
loading="lazy">
<span class="flag-name">France</span>
<span class="flag-code" aria-hidden="true">fr</span>
</button>
<!-- ... autres drapeaux ... -->
</div>Checklist accessibilité drapeaux
- Chaque drapeau informatif a un
altouaria-labelavec le nom du pays - Les drapeaux décoratifs ont
alt=""etaria-hidden="true" - Les éléments cliquables sont des
<button>ou<a>(navigation clavier) - Le contraste du texte sur les badges de code est ≥ 4.5:1
- Le focus visible est stylisé (outline, border colorée)
- Les SVG inline ont
focusable="false"pour IE/Edge - Les résultats du filtre de recherche sont annoncés via
aria-live="polite"
Performance et optimisation pour 200+ drapeaux
Charger 271 images simultanément sans optimisation serait catastrophique pour les performances. Voici les techniques essentielles pour maintenir un score Lighthouse élevé.
Lazy loading natif (attribut HTML)
<!-- L'attribut loading="lazy" est natif depuis Chrome 76 / Firefox 75 -->
<img
src="assets/images/flags/br.svg"
alt="Drapeau du Brésil"
width="64"
height="42"
loading="lazy" <!-- le navigateur charge uniquement quand visible -->
decoding="async" <!-- décodage en arrière-plan sans bloquer le rendu -->
>
<!-- Réserver l'espace avec width/height évite le Layout Shift (CLS) -->Intersection Observer pour le chargement différé avancé
// Chargement progressif des SVG avec IntersectionObserver
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
// Charger l'image depuis data-src
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img); // arrêter d'observer une fois chargée
}
});
}, {
rootMargin: '200px 0px', // pré-charger 200px avant apparition
threshold: 0
});
// Initialiser sur toutes les images différées
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
/* HTML : utiliser data-src au lieu de src */
<img
data-src="assets/images/flags/cn.svg"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='42'/%3E"
alt="Drapeau de la Chine"
width="64" height="42"
>Optimisation des SVG avec SVGO
# Installation de SVGO (outil de compression SVG)
npm install -g svgo
# Optimiser un seul fichier
svgo flag-fr.svg --output flag-fr.min.svg
# Optimiser tous les drapeaux d'un dossier
svgo --folder assets/images/flags/ --recursive
# Options recommandées pour les drapeaux
# (préserver les couleurs et les formes exactes)
svgo --disable=removeViewBox \
--disable=cleanupIDs \
assets/images/flags/fr.svgSpritesheet SVG pour réduire les requêtes HTTP
<!-- flags-sprite.svg : combiner plusieurs drapeaux -->
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Drapeau France -->
<symbol id="flag-fr" viewBox="0 0 900 600">
<rect width="300" height="600" fill="#002395"/>
<rect x="300" width="300" height="600" fill="#FFF"/>
<rect x="600" width="300" height="600" fill="#ED2939"/>
</symbol>
<!-- Drapeau Allemagne -->
<symbol id="flag-de" viewBox="0 0 1000 600">
<rect width="1000" height="200" fill="#000"/>
<rect y="200" width="1000" height="200" fill="#DE0000"/>
<rect y="400" width="1000" height="200" fill="#FFCE00"/>
</symbol>
</defs>
</svg>
<!-- Utilisation avec use -->
<svg width="64" height="42" aria-label="Drapeau de la France">
<use href="flags-sprite.svg#flag-fr"></use>
</svg>Cas d'usage réels en production
1. Sélecteur de langue multilingue
<!-- Barre de navigation avec sélecteur de langue -->
<nav class="navbar navbar-expand-lg">
<div class="navbar-nav ms-auto">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center gap-2"
href="#" role="button" data-bs-toggle="dropdown">
<img src="assets/images/flags/fr.svg" alt="" aria-hidden="true"
width="20" height="14" style="border-radius: 2px;">
Français
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item d-flex align-items-center gap-2"
href="/en/" hreflang="en">
<img src="assets/images/flags/gb.svg" alt="English" width="20" height="14">
English
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center gap-2"
href="/es/" hreflang="es">
<img src="assets/images/flags/es.svg" alt="Español" width="20" height="14">
Español
</a>
</li>
</ul>
</div>
</div>
</nav>2. Tableau de données avec drapeaux
<!-- Tableau de statistiques par pays -->
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Pays</th>
<th class="text-end">Utilisateurs</th>
<th class="text-end">Revenus</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<img src="assets/images/flags/us.svg"
alt="" aria-hidden="true"
width="24" height="16"
style="border-radius: 2px;">
<span>États-Unis</span>
</div>
</td>
<td class="text-end">42 580</td>
<td class="text-end">125 340 €</td>
</tr>
</tbody>
</table>
</div>3. Carte de profil utilisateur avec pays
<div class="card" style="max-width: 320px;">
<div class="card-body">
<div class="d-flex align-items-center gap-3 mb-3">
<img src="avatar.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
<div>
<h6 class="mb-0 fw-bold">Marie Dupont</h6>
<div class="d-flex align-items-center gap-1 mt-1">
<img src="assets/images/flags/fr.svg"
alt="France" width="16" height="11"
style="border-radius: 1px;">
<small class="text-muted">Paris, France</small>
</div>
</div>
</div>
</div>
</div>4. Angular — composant FlagComponent
// flag.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-flag',
standalone: true,
imports: [CommonModule],
template: `
<img
[src]="flagUrl"
[alt]="altText"
[attr.aria-hidden]="decorative ? 'true' : null"
[width]="width"
[height]="height"
loading="lazy"
style="border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.15);"
>
`
})
export class FlagComponent {
@Input() code: string = 'un'; // Code ISO du pays
@Input() name: string = ''; // Nom du pays (pour l'alt)
@Input() width: number = 64;
@Input() height: number = 42;
@Input() decorative: boolean = false; // true = aria-hidden
get flagUrl(): string {
return `assets/images/flags/${this.code.toLowerCase()}.svg`;
}
get altText(): string {
return this.decorative ? '' : `Drapeau ${this.name || this.code.toUpperCase()}`;
}
}
// Utilisation dans un template parent
// <app-flag code="fr" name="France" [width]="32" [height]="21"></app-flag>
// <app-flag code="us" [decorative]="true"></app-flag>Conclusion
Les drapeaux SVG sont une ressource précieuse pour tout projet web international. Leur nature vectorielle garantit une qualité irréprochable quelle que soit la densité d'écran, leur légèreté préserve les performances, et leur compatibilité avec CSS et JavaScript ouvre des possibilités infinies de personnalisation.
Cette galerie de 271 drapeaux couvre l'ensemble des pays reconnus, territoires, organisations internationales et régions autonomes. Vous pouvez les intégrer librement dans vos projets : sélecteurs de pays, tableaux de données, applications multilingues, cartes de profil utilisateur, ou simple référence visuelle.
Pour aller plus loin, explorez la combinaison SVG + Canvas pour des exports PNG dynamiques, et pensez toujours à l'accessibilité : un drapeau sans texte alternatif est invisible pour les 2,2 milliards d'utilisateurs qui dépendent d'un lecteur d'écran ou d'un contexte sans images.
- SVG = vectoriel, léger, personnalisable — idéal pour le web
- PNG = matriciel, universel — idéal pour les exports et emails
- Toujours ajouter
loading="lazy"sur les galeries de drapeaux - L'API Canvas permet la conversion SVG → PNG côté client sans serveur
- L'API Clipboard remplace
execCommand('copy')(déprécié) - Chaque drapeau doit avoir un
altexplicite pour l'accessibilité - Bootstrap 5 + CSS Grid = galerie responsive sans media queries
