Category:SVG simplified flags

Category diffusion
Category diffusion

This hidden category contains flags consisting mainly of very simple elements, easy to draw manually.

3 rectangles

To draw the stripes of a flag, it is a useful strategy to draw all rectangles starting at the (implied) origin point x="0" y="0". To avoid (the librsvg bug) showing hairline cracks, try fields to overlap. 

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
<rect width="600" height="400" fill="#ED2939"/>
<rect width="400" height="400" fill="#FFF"/>
<rect width="200" height="400" fill="#002395"/>
</svg>


See also SVG simplification by elimination.

This example:  consists of 11 rectangles, all of them starting at x="0" and y="0".


3 strokes

Another strategy is to use paths instead of rectangles, this can even save a few bytes
(A wider stroke-width used for overlapping avoids any hairline cracks) 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" 
     stroke-width="202">
<path stroke="#F2A800" d="m0,500h1200"/>
<path stroke="#0033A0" d="m0,299h1200"/>
<path stroke="#D90012" d="m0,99h1200"/>
</svg>
3 pathes

or the smallest version with path-drawn rectangles

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="990" height="630">
<path fill="#FFF" d="m0,0h990v630H0"/>
<path d="m0,0h990v420H0"/>
<path fill="#4891D9" d="m0,0h990v210H0"/>
</svg>
just one path

Even a bit smaller a flag with just two colors can be drawn, e.g. 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
<path fill="red" stroke="#FD0" stroke-width="200" d="m0,0h700v300H0"/>
</svg>

Recommended sizes: The document size (width and height) causes how an image is displayed when viewed by itself.

While a size too small may hide essential details, a size too large requires scrolling to see the entire image.

A good choice are values not exceeding a width of 600 and a height of 400
Colors of above Flag of France.svg
     blue rendered as RGB 000 035 149
     white rendered as RGB 255 255 255
     red rendered as RGB 237 041 057

It seems a good idea to let the file description always display the used colors : e.g. #008800#FF0000   or

Category:SVG Simplified#+ Category:SVG flags by subject#S Category:Valid SVG created with Text Editor:Flags

Pages in category "Category:SVG simplified flags"

Category:Hidden categories Category:SVG Simplified Category:SVG flags by subject Category:Valid SVG created with Text Editor:Flags