Jump to content

Recommended Posts

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:

dosprompt.gif

Share this post


Link to post
Share on other sites

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.


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

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.

Screen_Shot_2016_12_12_at_13_00_51.png

<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>

Share this post


Link to post
Share on other sites

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


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×