File talk:0767 Zirn-Conrad de Zirn.svg
Jump to navigation
Jump to search
More possibilities to draw this file
[edit]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>
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>
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>
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