gergelysuto Posted December 10, 2016 Share Posted December 10, 2016 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: Quote Link to comment Share on other sites More sharing options...
Aammppaa Posted December 10, 2016 Share Posted December 10, 2016 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. Quote Win10 Home x64 | AMD Ryzen 7 2700X @ 3.7GHz | 48 GB RAM | 1TB SSD | nVidia GTX 1660 | Wacom Intuos Pro Link to comment Share on other sites More sharing options...
gergelysuto Posted December 11, 2016 Author Share Posted December 11, 2016 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> Quote Link to comment Share on other sites More sharing options...
Aammppaa Posted December 11, 2016 Share Posted December 11, 2016 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. Quote Win10 Home x64 | AMD Ryzen 7 2700X @ 3.7GHz | 48 GB RAM | 1TB SSD | nVidia GTX 1660 | Wacom Intuos Pro Link to comment Share on other sites More sharing options...
gergelysuto Posted December 12, 2016 Author Share Posted December 12, 2016 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> Quote Link to comment Share on other sites More sharing options...
Aammppaa Posted December 12, 2016 Share Posted December 12, 2016 Perhaps post your file and someone might be able to see what is going on? Quote Win10 Home x64 | AMD Ryzen 7 2700X @ 3.7GHz | 48 GB RAM | 1TB SSD | nVidia GTX 1660 | Wacom Intuos Pro Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.