Category talk:SVG simplified orders

It is quite easy to draw a simple ribbon bar edit

Example: ½ KB

Example: 15 KB

Simple ribbon bars consist of vertical strokes of different colors and stroke-widths, more complicated ribbon bars contain also other items.
A reasonable size for ribbon bars is 218 × 60, this is neither too small not too large.

This example is drawn by this code:

1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg xmlns="http://www.w3.org/2000/svg" width="218" height="60">
3 <rect fill="#9CCEFF" width="218" height="60"/>
4 <path stroke="#00009C" stroke-width="36" d="m43,0v60m132,0V0"/>
5 <path stroke="#FE3" stroke-width="10" d="m76,0v60m66,0V0"/>
6 <path stroke="#F00" stroke-width="36" d="m109,0v60"/>
7 <path stroke="#FFF" stroke-width="12" d="m43,0v60m132,0V0"/>
8 <path stroke="#222" stroke-width="218" opacity=".3" stroke-dasharray="2.07" d="m109,0v60"/>
9 </svg>

Explanation

Lines 1,2 and 8,9 are the same for all simple ribbon bars. Line 8 may vary in some cases.

Line 3 draws the background, i.e. the most used color. In some cases also a border may be drawn, like <rect fill="#F00" stroke="#000" stroke-width="2" stroke-opacity=".2" width="218" height="60"/> or similar; when no border is needed, the equivalent coding <path d="M0,0H218V60H0" fill="9CCEFF"/> with a path instead of a rect is shorter.

Then the different other colors are drawn, in this example the four colors blue, yellow, red, white by line 4 to 7. Dark-blue occurs 4 times, but it is drawn only twice and then overlaid by the white stroke.

Sometimes it may be advised to draw also vertikal strokes by dasharrays, see for an examle Air Force Overseas Long Tour Service Ribbon.svg: .

Remarks

The stroke-width 36 occurs twice (for blue and red), at line 4 and line 6. It can be declared once by a group command, saving some bytes. Between the colors 00009C and 000099 is no visible difference, so it can be specified by 009. The same is with 9CCEFF and 99CCFF, allowing shorter 9CF:

1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg xmlns="http://www.w3.org/2000/svg" width="218" height="60">
3 <path d="M0,0H218V60H0" fill="9CF"/>
  <g stroke-width="36">
4 <path stroke="#009" d="m43,0v60m132,0V0"/>
5 <path stroke="#FE3" stroke-width="10" d="m76,0v60m66,0V0"/>
6 <path stroke="red" d="m109,0v60"/>
7 <path stroke="#FFF" stroke-width="12" d="m43,0v60m132,0V0"/>
8 <path stroke="#222" stroke-width="218" opacity=".3" stroke-dasharray="2.07" d="m109,0v60"/>
9 </g></svg>

This results in a file size of 472 after 495 bytes for that example. More possibilities exist.

The other example (from IB) shows the opposite view, how to draw simple files with most complicated coding.

Add topic