SVG Size Coding Gallery

A HTML5 sandbox created by Thiemo Mättig in March 2012.

I'm sorry, but this experimental HTML5 playground requires JavaScript.

In 2002 I hold a 256 bytes size coding competition. All web browser technologies were allowed including SVG. There was an “oneliner” on the website were we started little competitions about creating flags in as less bytes as possible. Most people used HTML but I fell in love with SVG that time.

An important byte saving technique is to remove all size and ratio constraints and rely on the width and height attributes of the <img> tag or scale inline <svg> with CSS. The xmlns could not be ommited unfortunately (this was possible in older versions of the Adobe plug-in). General hints are to rely on default values (like stroke-width being 1 by default) and to use short elements like the very short path syntax. A new trick I learned a few months ago is to use style attributes on SVG elements. I avoid the short color name red because it looks unnatural.

Email or tweet me if you are able to golf one of the following examples down.