Snapping with AD in a very simple case

[gergelysuto]

Hello,

I have an animated GIF that I would like to recreate with an SVG instead. It seems like the easiest academic case for practicing snapping to me: everything is black and white and there are only horizontal and vertical lines. The snap points are easy to find automatically.

 

However after quite some unsuccessful trial and error and reading in the forums it seems like there could be some slightly tricky behaviour about this... So please indulge if I ask now before digging further!  ;)

 

Thank you in advance for all hints,

gergely

 

 

FWIW here is the object:

[Aammppaa]

Snapping works on vector objects.

 

This is a bitmap which Designer sees only as a rectangle shape.

 

You can snap to the four corners or even the center with ease, but Designer will not interpret the content and allow you to snap to the corners of the flashing cursor for example.

 

You will either have to eyeball or use a bitmap tracer to recreate this.

 

Eyeballing may not be too bad, if you set up a grid of 1 pixel size, and make sure align to whole pixels is enabled, plus snap to grid.

[gergelysuto]

Thank you for the answer. Ok so bitmap tracing is the term I was after:) And I see it exists in other programs so it isn't such a crazy idea after all.

 

...but like you said, Aammppaa, once the grid is visible and "snap to grid" on, it is a relatively painless task to recreate the shapes for an image of this complexity. 

 

Unfortunately I still have the problem of the integer number pixel sizes. I have used the automatic grid and although it seemed to perfectly match my image, the resulting <svg> has all its values ending with .25 or .75, so the unit on my grid is presumably .25. Which is probably the reason why my SVG is blurred as I reduce the size. I went to the manual grid settings in the manager but the first attempt was a quite scary experience.

 

I try to solve this but an extra little hint would be welcome. The whole topic does not seem to be over-documented :unsure:

 

...not sure whether it is useful but I post my <svg> here. My guess is if the coordinate values were integers it would solve my problem. But again, maybe the problem is somewhere else..

<svg width="100%" height="100%" viewBox="0 0 77 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><rect x="3.75" y="2.25" width="6.75" height="0.75" style="fill:#fff;"/><rect x="2.25" y="3.75" width="9.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="5.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="8.25" y="5.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="0.75" y="6.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="9.75" y="6.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="8.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="9.75" y="8.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="9.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="11.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="12.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="14.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="15.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="17.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="9.75" y="17.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="18.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="9.75" y="18.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="20.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="8.25" y="20.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="2.25" y="21.75" width="9.75" height="0.75" style="fill:#fff;"/><rect x="3.75" y="23.25" width="6.75" height="0.75" style="fill:#fff;"/><rect x="20.25" y="9.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="20.25" y="11.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="20.25" y="12.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="20.25" y="20.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="20.25" y="21.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="20.25" y="23.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="30" y="2.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="30" y="3.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="30" y="5.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="44.25" y="5.25" width="3.75" height="0.75" style="fill:#fff;"/><rect x="31.5" y="6.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="44.25" y="6.75" width="5.25" height="0.75" style="fill:#fff;"/><rect x="31.5" y="8.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="45.75" y="8.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="33" y="9.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="47.25" y="9.75" width="5.25" height="0.75" style="fill:#fff;"/><rect x="33" y="11.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="48.75" y="11.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="34.5" y="12.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="50.25" y="12.75" width="5.25" height="0.75" style="fill:#fff;"/><rect x="34.5" y="14.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="50.25" y="14.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="36" y="15.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="48.75" y="15.75" width="5.25" height="0.75" style="fill:#fff;"/><rect x="36" y="17.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="47.25" y="17.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="37.5" y="18.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="45.75" y="18.75" width="5.25" height="0.75" style="fill:#fff;"/><rect x="37.5" y="20.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="44.25" y="20.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="39" y="21.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="44.25" y="21.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="39" y="23.25" width="3.75" height="0.75" style="fill:#fff;"/></g><g><rect x="57.75" y="0.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="2.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="3.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="5.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="6.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="8.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="9.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="11.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="12.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="14.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="15.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="17.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="18.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="20.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="21.75" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="23.25" width="18" height="0.75" style="fill:#fff;"/><rect x="57.75" y="24.75" width="18" height="0.75" style="fill:#fff;"/></g></svg>

[Aammppaa]

Have you enabled Force Pixel Alignment and Move by Whole Pixels?

 

These two options live next to the Snapping Magnet on the AD main toolbar.

[gergelysuto]

I am not sure if I have last time, but I certainly have now. The result is the same unfortunately. Here is a snapshot of my settings and the beginning of the code.

<svg width="100%" height="100%" viewBox="0 0 77 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><rect x="3.75" y="2.25" width="6.75" height="0.75" style="fill:#fff;"/><rect x="2.25" y="3.75" width="9.75" height="0.75" style="fill:#fff;"/><rect x="0.75" y="5.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="8.25" y="5.25" width="5.25" height="0.75" style="fill:#fff;"/><rect x="0.75" y="6.75" width="3.75" height="0.75" style="fill:#fff;"/><rect x="9.75" y="6.75" width="3.75" height="0.75" style="fill:#fff;"/></g></svg>

[Aammppaa]

Perhaps post your file and someone might be able to see what is going on?