Drawing the flag PRC and ROC with Inkscape

Inkscape is a fantastic vector drawing program. In many ways, it's as good or better than Illustrator. It produces file in SVG format and can export to any bitmap files. This article shows how to draw the flag of the Republic of China and People's Republic of China with Inkscape. This gives a good introduction to drawing with this program. As I'm more familiar with Illustrator for vector drawing, will contract the two program. Using information from Wikipedia.org: ROC flag and PRC flag.
  1. Create a new document, hit ctrl-shift-D to set document width = 720px and height = 480px.
  2. Rename "layer 1" to "red background".

    Draw a rectangle in the middle of the page, select it with the pointer tool and set its properties: x = 0, y = 0, w = 720, h = 480, ctrl-shift-F set fill color CMYK=0-90-75-5, stroke to none.

    Lock the layer "red background".

  3. Create a new layer, name it "blue"

    Create a rectangle in the middle of the page, select it with the pointer tool and set its properties: x = 0, y = 240, w = 360, h = 240, set fill color CMYK = 100-45-0-10, stroke none.

    Lock the layer "blue"

  4. Create a new layer, name it "guides"

    Add a horizontal guide, y = 360, add a vertical guide, x = 180.

    Draw a circle, set its properties: fill color: none, stroke color: black, stroke width: 0.5, x = 90, y = 270, w = 180, y = 180.

    Ctrl-D duplicate the last circle, set dimension properties: x = 130, y = 310, w = 100, h = 100.

    Ctrl-D dupliate the last circle, set dimension x = 135, y = 315, w = 90, h = 90.

    Lock the layer "guides"

  5. Create a new layer "white"

    Draw a triangle with the star tool, hold the ctrl key to make sure the bottom edge is perfectly horizontal:

    Select the triangle with the pointer tool, set property to: fill color: white, stroke color: none, stroke width: 0, dimension properties: w = 53.5898 (2*100/tan(75) see Wikipedia.org for a refresher course on triangle calculation), h = 100. These dimensions give a isosceles trangle of 30° at the top.

    Position the triangle with the tip just touch the outer circle and horizontally center with the circles. This can be done by setting y = 350 and move the triangle horizontally and let the guide snap to the center:

  6. Click on the triangle to get the rotate handles, move the rotate reference point to the middle of the circle where the two guides cross.

    Ctrl-D to duplicate, shift-ctrl-M Transform, select Rotate tab and set angle: 30, hit apply:

    Ctrl-D and hit apply transform, repeat 10 times:

  7. Select all the triangles and do Path:Union.

    Turn of Layer visibility on "white"

    Unlock layer "guides" and cut the middle circle, turn layer "white" back on and paste-in-place.

    Shift click the triangles together with the circle, Path:Difference:

  8. Go back to the "guides" layer and bring the middle circle to the "white" layer.

    Set the circle fill color: white, stroke: none:

  9. Turn off layer visibility "guides", and we are done:

For the flag of the PRC, I can't find precise specification. So I just do a close approximation going by the sample from Wikipedia.org.
  1. Create a document w = 1200px, h = 800px
  2. Rename "layer 1" to "red background"

    create a rectangle, set x = 0, y = 0, w = 1200px, h = 800px, fill color = rgb(222,21,16), stroke color: none, stroke width: 0

    Lock the layer

  3. Add a layer "stars"

    Select star tool, set corners: 5, ratio: 0.382, fill color: rgb(255,222,0), stroke: none, strok width: 0, draw a star out and adjust so it's pointing straight up.

    Lock aspect ratio and set w = 220

    Set x = 90, y = 510

  4. Duplicate the big star and set w = 80 while keeping the aspect ratio locked:

    move it to x = 440, y = 484

  5. Now this part I'm going to fudge because where exactly the other three stars should be and their rotation is not specified. So I am going to just rotate them around the center of the big star eye balls their placement.

    place vertical and horizontal guides at the middle of the two star draw a straight line betweeen:

  6. Group the little star and the line, click to get rotate handles and set reference point to the middle of the big star.

    Ctrl-D and Shift-ctrl-M Transform, set rotate angle -22, 26, 22 and place the tree copies in their places:

  7. Remove construction lines and complete
Inkscape is an amazing program. It can handle huge document dimension size, very large text. This is better than both Illustrator and InDesign, which are more limit in the dimension of document and text size only up to 995pt. I am very used to the Adobe apps. Here are a few things I'm not getting yet from Inkscape:
  1. Move document origin so (0,0) is in so other spot other than lower left corner.
  2. I keep wanting for the "Dimension include stroke weight" and "Transformations are totals" options like InDesign. Inkscape does indeed has this "Affects" toggle "When scaling object, scale the stroke width by the same proportion". The UI mislead me at first: when I turned it off, the stroke width still scale when drag resize. But the old stroke width is set when I release the mouse.
  3. Set the object reference point to "pin" object down for transformation like InDesign:

    Inkscape is only relative to the lower left corner.

  4. I learned lots of new stuff from this Inkscape quick guide. One of them is the layer menu and moving thing between layer. So I could hve move the stuffs from the "guides" layer to the "white" layer using shift-page up.
  5. Chinese fonts do not work.
  6. Input control focus sometimes is lost when tab to the next field. For example, I set the x position, then tab to the next field, y position, sometimes input focus is not at the y position text field, it's with the document. I cannot start typing to enter the y position value. If I hit delete, I would delete the selected object instead of clearing out the y position field.
  7. Do calculation in input field, e.g. "2345/3" in the field and get the computed value.
  8. Alt-Drag to duplicate object
  9. These icons should light up correspond to the type of node selected.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Syntax highlight code surrounded by the {syntaxhighlighter OPTIONS}...{/syntaxhighlighter} tags.
  • Allowed HTML tags: <a> <p> <span> <div> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption>
  • Insert Google Map macro.
  • Use [toc list: ol; title: Table of Contents; minlevel: 2; maxlevel: 3; attachments: yes;] to insert a mediawiki style collapsible table of contents. All the arguments are optional.

More information about formatting options