Strange Artifacts when zooming in

Discuss SVG code, accessible via the XML Editor.
Littleth
Posts: 1
Joined: Fri Mar 06, 2015 7:30 am

Strange Artifacts when zooming in

Postby Littleth » Fri Mar 06, 2015 7:32 am

Hey guys,
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?

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Strange Artifacts when zooming in

Postby tylerdurden » Fri Mar 06, 2015 8:26 am

Likely has to do with pixel fitting... placement must be precise.

The file below was made by adding a 16x16 transparent rectangle, grouping it to the original group and scaling to 32x32 using a grid.

SVG Image
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/


Return to “SVG / XML Code”