SVG Flags Demo

HTML demo page for the SVG Flags WordPress plugin.

The examples below show how to add flags to your content directly via HTML. The plugin now also supports a [svg-flags] shortcode to make it easier to add SVG flags to the new block editor in WordPress 5.0 and above. See plugin settings page for more details.

Aspect Ratio

All flags are SVG files, and each one is available in 4:3 or 1:1 (i.e. square) aspect ratios.

  (4:3)

  (1:1)

Headings

h1 (4:3) (1:1)

h2 (4:3) (1:1)

h3 (4:3) (1:1)

h4 (4:3) (1:1)

h5 (4:3) (1:1)

Span Elements

This is just some text inside a span tag with the flag to the left.

Here is another span with the flag to the right and sized to be slightly smaller.

Paragraphs

It’s easy to add flags to <p> tags too!

Change the dimensions of the flag to better fit in with the paragraph text.

We can also use vertical alignment inside block level elements. This paragraph is middle aligned.

Div Elements

Div tags are no problem either.
Vertical alignment works just the same too making formatting flags alongside text very easy.

Tables

Adding flags to a table is very simple. Just add HTML markup for an individual flag to each table cell.

Sizing

(20×15)

(40×30)

(60×45)

(80×60)

(100×75)

(160×120)

(320×240)

Because the flags are SVG images then they look great at any size. Go as big as you like! Just make sure to keep the width/height equal for 1×1 SVG flags, and at a 4×3 aspect ratio for the 4×3 SVG flags. e.g. 20×15, 40×30, 60×45, 80×60 are all valid sizes for any 4×3 flag to display at the best possible size.

Example Usage

This is a heading

Code:  

(4:3)

Code:  

(1:1)

Code:  

(160×120)

Code: