Boppa Posted April 28 Posted April 28 I am working on an animation project that makes better use of SVG files. However, I prefer the look of the PNG file that matches what I have created in Designer 2. Can someone explain what is happening here... or suggest how to fix this issue? Please see the pic comparisons. You can see that the PNG file shows the darker and thicker lines. Thanks Quote
sfriedberg Posted April 28 Posted April 28 My guess is that exporting as PNG is rendering the strokes as antialiased curves, while exporting as SVG is simply recording the stroke width in the output file for the display device to render later. So, if you want the thicker lines in the SVG, try increasing the width of strokes in the Designer file. This is a really excellent example of why Designer should have graphic styles that behave like text styles, instead of like presets. Retroactively changing the stroke width on dozen, hundreds, thousands of curves is a painful exercise that is unnecessary in many other vector editing programs. Just change the stroke width property in the graphic style and all the curves with that style applied get updated automatically. Quote
Pšenda Posted April 28 Posted April 28 2 hours ago, Boppa said: You can see that the PNG file shows the darker and thicker lines. Try display vector shape in Pixel view mode. Quote Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.7.2948 (Retail) Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 24H2, Build 26100.2605. Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 24H2, Build 26100.2605. Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.
Boppa Posted April 28 Author Posted April 28 32 minutes ago, sfriedberg said: My guess is that exporting as PNG is rendering the strokes as antialiased curves, while exporting as SVG is simply recording the stroke width in the output file for the display device to render later. So, if you want the thicker lines in the SVG, try increasing the width of strokes in the Designer file. This is a really excellent example of why Designer should have graphic styles that behave like text styles, instead of like presets. Retroactively changing the stroke width on dozen, hundreds, thousands of curves is a painful exercise that is unnecessary in many other vector editing programs. Just change the stroke width property in the graphic style and all the curves with that style applied get updated automatically. Thanks for your reply. So, you're suggesting to "select all the strokes and resize them"... (kind of trial and error) > exporting to SVG until I figure out the thickness that looks best as an SVG file? If so, Yah... I was already thinking I would give that try, but was hoping there was just some setting while exporting that would fix this... Awkward and time-consuming! Maybe Affinity dev teams could fix this in future updates!...??? Quote
NotMyFault Posted April 28 Posted April 28 I can’t reproduce. When exporting and re-opening the files in Photo it is 100% identical. which parameters do you use for document? size units dpi stroke width incl. units stroke setting e.g. under/over fill side note: the new Affinity default parameters for png are totally different from what is used in all other formats. For better compatibility to sRGB (which is normally assumed for svg), use BT.709 for primaries and transfer function. Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
Boppa Posted April 28 Author Posted April 28 11 minutes ago, NotMyFault said: I can’t reproduce. When exporting and re-opening the files in Photo it is 100% identical. which parameters do you use for document? size units dpi stroke width incl. units stroke setting e.g. under/over fill side note: the new Affinity default parameters for png are totally different from what is used in all other formats. For better compatibility to sRGB (which is normally assumed for svg), use BT.709 for primaries and transfer function. Thank you for your reply! Size = 1080 x 1080 Units = Pixels dpi = 144 Stroke = 2.4 pt Stroke setting = Stroke in Front I do not understand what BT.709 would have to do with exporting to SVG. When I export to PNG it looks the same as what I created. When I export to SVG, the stroke is changed to a thinner stroke. Quote
Boppa Posted April 28 Author Posted April 28 23 minutes ago, NotMyFault said: I can’t reproduce. When exporting and re-opening the files in Photo it is 100% identical. I'm not sure what you are exporting to Photo... Could you explain? I'm using Designer2. I copied and pasted my images from above into Photo 2 ... see below. Quote
Boppa Posted April 28 Author Posted April 28 39 minutes ago, Pšenda said: Try display vector shape in Pixel view mode. Thanks for your reply. I'm not sure what you are suggesting. When in Pixel mode, what do you mean by display vector shape? Quote
NotMyFault Posted April 28 Posted April 28 Is it possible for you to upload the actual afdesign file, or at least some of the relevant curves layers? Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
Boppa Posted April 28 Author Posted April 28 21 minutes ago, NotMyFault said: Is it possible for you to upload the actual afdesign file, or at least some of the relevant curves layers? Here you go.... Mummy Head.afdesign Quote
NotMyFault Posted April 28 Posted April 28 Seems the svg always gets exported in double size, and stroke keeps its width so effectively getting 1/2. Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
NotMyFault Posted April 28 Posted April 28 By default Affinity opens svg always in 72 dpi. Your choice of 144 may contribute to the issue. I remember older reports about dpi not treated correctly for svg files. can you test if the problem occurs in 72 dpi? Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
NotMyFault Posted April 28 Posted April 28 Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
NotMyFault Posted April 28 Posted April 28 Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
NotMyFault Posted April 28 Posted April 28 Issues going all back to 2018. there you find some additional workarounds Quote Mac mini M1 A2348 | MBP M3 Windows 11 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080 LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5 | Dell 27“ 4K iPad Air Gen 5 (2022) A2589 Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps. I use iPad screenshots and videos even in the Desktop section of the forum when I expect no relevant difference.
Boppa Posted April 28 Author Posted April 28 34 minutes ago, NotMyFault said: Issues going all back to 2018. there you find some additional workarounds Thank you so much for working with me on this. I created a new project at 72dpi resolution. Copy and pasted the mummy head and it still had stroke thickness issues. So I tried creating a different image and exported to PNG and SVG... This works! I don't understand why the mummy head still has issues but from now on, I will go with 72 dpi for future SVG drawings. I then tried changing the Rasterize setting to "Everything"... essentially "SVG (flatten)" and it made it look correct! Hmmmf! I will read through the links you provided ... thanks again. NotMyFault 1 Quote
Boppa Posted April 28 Author Posted April 28 2 minutes ago, Boppa said: Thank you so much for working with me on this. I created a new project at 72dpi resolution. Copy and pasted the mummy head and it still had stroke thickness issues. So I tried creating a different image and exported to PNG and SVG... This works! I don't understand why the mummy head still has issues but from now on, I will go with 72 dpi for future SVG drawings. I then tried changing the Rasterize setting to "Everything"... essentially "SVG (flatten)" and it made it look correct! Hmmmf! I will read through the links you provided ... thanks again. Flattened or rasterized SVG won't load into the animation program. Quote
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.