File talk:0767 Zirn-Conrad de Zirn.svg

More possibilities to draw this file

This simple shape had first been drawn with furious Inkscape (222375 bytes), the last version shows how to have the same picture simplified (359 bytes}.

Simplified code example

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="260" stroke="#000">
<path d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6" fill="#C83232"/>
<path d="m130,150v143c10-5 41-24 70-60v-83h-140V6h70z" fill="#F5F5F5"/>
<path d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6z" stroke-width="3" fill="none"/>
</svg>

Simplified version (359 bytes)

Of the countless possibilities to use different code to get always the same picture, three variations of clipping are shown.

Code clipping example with pathes

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="260" stroke="#000">
<clipPath id="x"><path d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6"/></clipPath>
<g clip-path="url(#x)"> 
<path fill="#C83232" d="m0,0v300h260V0"/>
<path fill="#F5F5F5" d="m130 150v143.5c9.9119-5.3186 41.327-24.583 70-60.5v-83h-140V6h70z"/>
</g>
<path fill="none" stroke-width="3"
d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6z"/>
</svg>

Clipping with 2 pathes (465 bytes)

More complex can it be drawm with rectangles, three are needed

Code clipping example with rect

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="260" stroke="#000">
<clipPath id="x"><path d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6"/></clipPath>
<g clip-path="url(#x)"> 
<rect fill="#C83232" height="300" width="260"/>
<rect fill="#F5F5F5" height="150" width="70" x="60"/> 
<rect fill="#F5F5F5" height="150" width="70" x="130" y="150"/> 
</g>
<path fill="none" stroke-width="3"
d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6z"/>
</svg>

Clipping with 3 rectangles (497 bytes)

Even more complex is the variation with strokes, again three are needed

Code clipping example with strokes

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="260" stroke="#000">
<clipPath id="x"><path d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6"/></clipPath>
<g clip-path="url(#x)"> 
<path stroke="#C83232" stroke-width="260" d="m130,0v300"/>
<path stroke="#000" stroke-width="71" d="m95,0v150.5m70-1v150"/> 
<path stroke="#F5F5F5" stroke-width="69" d="m95,0v149.5m70,1v150"/> 
</g>
<path fill="none" stroke-width="3"
d="m6,6v70C6,218 110,283 130,293 150,283 254,218 254,76V6z"/>
</svg

Clipping with 3 strokes (524 bytes)