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.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 134"> <path d="M20 0v6h-6V0h-6v18h6v-6h6v6h6V0h3v6h5v12h6V6h5V0h17l-4 6-4-6h-6v18h6V9l4 7 4-7v9h6V0h3v18h15v-6h-9V0"/> <path d="M0 26h94L86 123 47 134 8 123" fill="#E44D26"/> <path d="M79 117L47 126V34h39" fill="#F16529"/> <path d="M17 46h30v12H30l1 12h16v12H20m1 6h12l1 10 13 3v12l-24-6" fill="#EBEBEB"/> <path d="M71 107l-24 6v-12l13-3 2-16H47V70h28M76 58H47V46h30" fill="#FFF"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.74 -10.81 10.81 10.81"> <circle r="99" fill="#193311"/> <text font-family="Georgia" fill="#FFF"> m </text> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"> <g fill="#08F" stroke="#000"> <path d="M7 3s1 1 0 2L5 7S4 8 3 7L1 5S0 4 1 3l2-2s1-1 2 0z" stroke-width=".3"/> <path d="M4 4h.5c1 0 1 1.6 0 1.6h-.9c-1.5 0-1.5-3.2 0-3.2h1.9"/> </g> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7 -7 14 14"> <circle r="6.5" fill="#005DAC"/> <ellipse cx="-.1" rx="4.82" ry="4.97" fill="#FFF"/> <path d="M4.32-4.8v9.6" stroke="#FFF" stroke-width="1.2"/> <circle cx=".05" r="3.8" fill="#1810D0"/> <circle r="6.5" fill="none" stroke="#2AA5FF"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19"> <path d="M0 0v14h1V0h1v14h2V0h1v14h2V0" fill="#900"/> <path d="M8.5 0v14m2 0V0m10 0v14m2 0V0" stroke="#396"/> <path d="M12 0v14h2V0h1v14h1V0h1v14h2V0" fill="#069"/> <text y="19" style="fill:#444;font:4.8px sans-serif">WIKIDATA</text> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 25.5"> <g fill="none" stroke="#9B4" stroke-linecap="round"> <path d="M7 .5l3 5h2l3-5"/> <path d="M1.5 10v6m7 0v8m5 0v-8m7 0V10" stroke-width="3"/> </g> <path d="M4 7c0-8 14-8 14 0m0 1v11q0 2-2 2H6q-2 0-2-2V8" fill="#9B4"/> <g fill="#FFF"> <circle cx="8" cy="4.5" r=".8"/> <circle cx="14" cy="4.5" r=".8"/> </g> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 32"> <path d="M3 2q7 8 16 8c-1.6-9 9-12 13-7q3-.5 5-2-1 3-3.4 4.3 2 0 4.3-1Q36 7 34 8c1 17-17 29-33.4 19.6q6 .7 11.3-3.2Q6 24 5 19q1 .4 3 0-6-2-6-7.8 2 1 3.5 1Q.3 8 3 2" fill="#52ADE5"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 56"> <path d="M26 0c36 0 33 56 0 56-33 0-36-56 0-56m0 5c-7 0-10 8-10 22 0 15 3 23 10 23 7 0 10-7 10-23 0-14-3-22-10-22" fill="#C11"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background:#9CD" viewBox="0 0 46 18"> <path d="M6 6c4 0 4 0 4 6m9-6c0 5 6 5 6 0m0 0v6 M37 6c-4 0-4 6 0 6 4 0 4-6 0-6" id="0" stroke-linecap="round" fill="none"/> <use xlink:href="#0" stroke-width="8" stroke="#FFF"/> <use xlink:href="#0" stroke-width="3" stroke="#9CD"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" style="background:#F7DF1E"> <path d="m5.5 5v3.5c0 1.3-1.6 1.5-2.2.4m3.6-.1 C7.7 10.1 9.6 9.9 9.6 8.7 9.6 7.2 7.4 7.8 7.4 6.4 7.3 5.3 8.9 5.1 9.5 6.1" fill="none" stroke="#000"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" style="background:#FD2"> <text x="5" y="23" font-family="Arial"> JS </text> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"> <path d="M3 6L0 5V2h6v3" fill="#753"/> <path d="M3 3.3l3-1v-1H0v1" fill="#543"/> <path d="M0 2V1L3 0 6 1v1L3 3" fill="#6A3"/> <path d="M6 5V1L3 2v4" fill="rgba(0,0,0,.4)"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 6 6"> <circle r="2" fill="#B03"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 0 1 1"> <path d="M0 1h9" stroke="#C24"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 8 1 3" style="background:gold"> <path d="M.5.5v9h9" stroke="#D00"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 8 1 3" style="background:#B23"> <path d="M.5.5v9h9" fill="#FB1" stroke="#064"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 4 1.5 1"> <path d="M0 1.6V8L3.8 5H8V8" fill="#147" stroke="#D12"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox=".5 4 3 1"> <path d="M1 0v9" stroke="#029"/> <path d="M3 0v9" stroke="#E23"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 .5 8 5"> <path d="M0 9h9V0H0m0 3h9M3 0v9" fill="#059" stroke="#FC0"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.5 9"> <path d="M2.5 5V0M0-.5h14v10H0m0-7h5m0 1h9v2H0m5-4h9v6H0" fill="#16A" stroke="#FFF"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 8 4"> <path d="M.5.5h9v5h-9v-5l9 5M1 5L9 1" stroke="#FFF" fill="#027"/> <path d="M1 1L9 5M1 5L9 1" stroke-width=".3" stroke="#C13"/> <path d="M1 3h8M5 1v4" stroke-width="1.5" stroke="#FFF"/> <path d="M1 3h8M5 1v4" stroke="#C13"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 175 91"> <rect width="175" height="7" id="1" fill="#A23"/> <use xlink:href="#1" y="14"/> <use xlink:href="#1" y="28"/> <use xlink:href="#1" y="42"/> <use xlink:href="#1" y="56"/> <use xlink:href="#1" y="70"/> <use xlink:href="#1" y="84"/> <rect width="70" height="49" fill="#336"/> <g id="3"> <g id="4"> <path d="M5 2l2 5l-5 -3h6l-5 3" id="2" fill="#FFF"/> <use xlink:href="#2" x="12"/> <use xlink:href="#2" x="24"/> <use xlink:href="#2" x="36"/> <use xlink:href="#2" x="48"/> </g> <use xlink:href="#2" x="60"/> </g> <g id="5"> <use xlink:href="#4" x="6" y="5"/> <use xlink:href="#3" y="10"/> </g> <use xlink:href="#5" y="10"/> <use xlink:href="#5" y="20"/> <use xlink:href="#5" y="30"/> </svg>