Creating SVG flag

Category: Inkscape

This article describes creating SVG flag in Inkscape (version 0.46, Windows).

For creating a SVG flag you need to install:

  • Inkscape - An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

Open your Inkscape. Go to New » Default. We will make a flag with 500 x 330px size so it can be used for creating a flag with glance effect in GIMP (see this article). Go to Files » Document Properities and set the width and height of the document (Custom size: 500 x 330px). As an example we will make a czech national flag. In czech national flag the following 3 colors are used:

  • red: #d7141a (#d7141aff), RGB 215 20 25 (255 for opacity)
  • blue: #11457e (#11457eff), RGB 17 69 126 (255 for opacity)
  • white: #ffffff (#ffffffff), RGB 255 255 255 (255 for opacity).

Click on Retangles and squaresalt ) icon in Tool Box and change the values in the Tool Controls.

alt

Set:

  • W (width): 500px
  • H (height): 165px
  • Rx (horizontal radius): 0px
  • Ry:(vertical radius): 0px.

Click on Select and transform objectsalt ) in Tool Box and select the created retangle and set:

  • X (horizontal coordinate): 0px
  • Y (vertical coordinate): 0px

alt

in the Tool Controls.

At the bottom of Inkscape double click on Fill color ( alt ), so the fill tab will be open on the right side of Inkscape.

alt

Set the red color here:

  • R: 215
  • G: 20
  • B: 25
  • A: 255

Red retangle is done. Now we do white retangle, the same way as the red retangle. Click on Retangles ans squaresalt ) icon in Tool Box and change the values in the Tool Controls.

alt

Set:

  • W (width): 500px
  • H (height): 165px
  • Rx (horizontal radius): 0px
  • Ry:(vertical radius): 0px

Click on Select and transform objectsalt ) in Tool Box and select the created retangle and set:

  • X (horizontal coordinate): 0px
  • Y (vertical coordinate): 165px

alt

in the Tool Controls.

At the bottom of Inkscape page double click on Fill color ( alt ), so the fill tab will be open on the right side of Inkscape. Set the white color here:

  • R: 255
  • G: 255
  • B: 255
  • A: 255

Last we will make a blue triangle. Click on Create stars and polygonalt ). Set:

  • Corners: 3

alt

While creating the triangle hold CTRL to snap angle.

alt

After creating a triangle (any size) click on Select and transform objects alt ) in Tool Box and select the created triangle and set:

  • X (horizontal coordinate): 0px
  • Y (vertical coordinate): 0px
  • W (width): 250px
  • H (height): 330px.

alt

At the bottom of Inkscape page double click on Fill color ( alt ), so the fill tab will be open on the right side of Inkscape. Set the blue color here:

  • R: 17
  • G: 69
  • B: 126
  • A: 255

Now the flag is created and you can save it as SVG file. File » Save as. Such SVG file can be opened and edited in GIMP. See examples.

alt

The following flag is SVG image.