5 #Country Flag Country Flag

A circle of radius 1.5em encosing an SVG representing a flag.

Note: The CSS rule targets svg.country-flag to enforce that the flag be an SVG.

Note: For the flag to fully cover the circle, preserveAspectRatio="none" should be set in the <svg> tag.

Note: The flag is actually distorted to fit the square in which the circle is inscribed.

Example

Markup

<svg preserveAspectRatio="none" class="country-flag" xmlns="http://www.w3.org/2000/svg" width="1500" height="1000" viewBox="0 0 3 2">
  <rect width="3" height="2" fill="#009246"/>
  <rect width="2" height="2" x="1" fill="#fff"/>
  <rect width="1" height="2" x="2" fill="#ce2b37"/>
</svg>

Source: css/modules/language.css, line 9