I'm relativly new to svg and have encountered a strange problem. I have a rather simple svg file, consisting of only a few boxes:
Code: Select all
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<defs>
<linearGradient id="movieGradient" x1="5" y1="2" x2="11" y2="13" gradientUnits="userSpaceOnUse">
<stop style="stop-color:#c2f0ff;stop-opacity:1" offset="0"/>
<stop style="stop-color:#3a7deb;stop-opacity:1" offset="1"/>
</linearGradient>
</defs>
<g>
<rect style="fill:url(#movieGradient);stroke:#000000;stroke-width:1;" width="7" height="4" x="4.5" y="1.499"/>
<rect style="fill:url(#movieGradient);stroke:#000000;stroke-width:1;" width="7" height="4" x="4.5" y="5.5"/>
<rect style="fill:url(#movieGradient);stroke:#000000;stroke-width:1;" width="7" height="4" x="4.5" y="9.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="2.5" y="1.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="2.5" y="3.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="2.5" y="5.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="2.5" y="7.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="2.5" y="9.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="2.5" y="11.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="11.5" y="1.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="11.5" y="3.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="11.5" y="5.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="11.5" y="7.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="11.5" y="9.5"/>
<rect style="fill:#c2f0ff;stroke:#000000;stroke-width:1;" width="2" height="2" x="11.5" y="11.5"/>
<path style="stroke:#000000;stroke-width:2;" d="m 2 14 12 0"/>
</g>
</svg>
It was made with inkscape at an "initial resolution" of 16*16px. Now I needed it a bit bigger and noticed a strange effect when scaling up (I needed it with about 32*32px). Its hard to describe, here a picture: http://i.imgur.com/6kW4G6K.png
Why do these overlapps appear? And, more important, how to prevent them?