Search for '{{search_term}}'

Flag of Switzerland in SVG

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

This is part of the SVG Tutorial and exercises drawing the Swiss flag in SVG.

Flag of Switzerland

According to the Wikipedia entry, to the Wikimedia svg example and to the CD Bund V7.0 the red colour of the flags is #FF0000, the width of the middle part of the cross is 1/5 of the full width, the width of the sides is 1/5 of the full width + 1/6 of the middle width. Which seems to be 0.2 + 0.2 / 6 = 1.4/6 of the full width.

The total width (or hight) of the cross = 2* 1.4/6+ 1/5 = 20 / 30 = 2/3 of the total width.

The both start at (total width - width of cross)/2 = 1/6 width.

function flag_of_switzerland() {
    var draw = SVG('flag_of_switzerland');
    var width = 150;
    draw.size(width, width);
    var red   = draw.rect(width, width).fill({ color: '#FF0000' });

    var horizontal = draw.rect(2*width/3, width/5).dx(width/6).dy(2*width/5);
    horizontal.fill({ color: '#FFFFFF' });
    var vertical = draw.rect(width/5, 2*width/3).dx(2*width/5).dy(width/6);
    vertical.fill({ color: '#FFFFFF' });



In the comments, please wrap your code snippets within <pre> </pre> tags and use spaces for indentation.
comments powered by Disqus