GripsholmLion

The first implementation of the export preview feature wasn't as good as (Serif team) would have liked, so they provided a toggle button and everything was fine.
In version 2, the export preview is no better. It's slow, there are no buttons to control the zoom size, only keyboard shortcuts, there's no need to always use it and it's a waste of resources, users want a toggle button and yet Serif decided to keep it on permanently, leaving users in control. Where is the logic here?

A post that tries to criticize absolutely everything, including the consistency and meaningfulness of the interface, while failing to include a proper link to the cited article, doesn't sound very credible. Just such a rant without providing any concrete facts and evidence for said inconsistencies - which could be corrected.

The link goes back to the other page of this thread, not the cited article.

In general, the export dialog came off the assembly line incredibly poorly for v2.0, so if anything, it could use a thorough redesign. The preview section of this dialog is extraordinarily challenged in terms of code and user interface.

The entire interface of version 2.0 is a degradation from V1. A thorough redesign is no longer an option but a necessity. 
Incredibly poor contrast (shades of gray used to build panels, buttons, category backgrounds). Lack of consistency when it comes to the design of elements such as drop-down lists, text fields (size, padding, alignment, text line heights, appearance)  Different shapes of tabs in panel groups for active states, hovering states. Blending of the background color of the text box with the panel itself. Lack of consistency when it comes to the quality of icons (some look sharp, pixel aligned and pixel perfect others are blurry) Visual noise. (to much bad previews, icons) ... It would take a long time to list. It is simply unpleasant to work with such an interface.
When I read the following article on Affinity Spotlight it gave me a good laugh.
Specifically, I am referring to the beginning of the article which reads:
EDIT: link to article corrected.

Hi everybody and thanx for all your replies
I appreciate all the tips on how to "fix" the svg code manually though I really don't need them as I've worked professionally as a frontend developer and graphic designer for two decades now and of course I know how to strip the svg code for styles in a text editor and then style them in my .scss file.
I also know how Affinity Suite works as I've been a beta tester of Affinity Publisher since before the first public release and well aware of how the software and generated file formats work. And - I love all affinity products and use them every day 🙂
The point of the matter is that I work as a frontend dev at a large company in Sweden which has an inhouse marketing department of about 25 people that have used Adobes products for a really long time and I have finally convinced them of trying Affinitys software out to see if they can replace Adobes products with Affinitys.
And yes, for all of us in the Affinity community the advantages of switching to Affininty Suite are obvious and many but for a large company, there are risks attached as they have produced many Indesign and Illustrator files over the years.
Now, the problem isn't that I can't solve using svg files in our CMS possible but that I do not control the creation of these files as I'm not the one creating them. As we have a CMS setup with content editors in 26 different countries this is not possible and all of them as well as the members of our marketing team have NO knowledge of css or html as it is not their job.
There are several hundreds of icons made in svg formate for print already and instead of me and all of the others opening up the svg files in a text editor, stripping them of the styles and then upload into the CMS for the CSS to work it's magic it would be nice if they, as they already can in illustrator, could just open the files in Affinity and export the svg "For Web" and the work would be done further convincing all of the excellence of Affinity and move forwards to make the software switch.
I apologize for making a bug report about this, though I really was hoping it was one, and agree with v_kyr that it should have been a feature request instead.
Final thought..
Wouldn't it be nice though, if one could open all these svg-files up in Affinity and batch export them "For Web" in one nice sweep?

Yes, that was what I was getting at in my first response, but I didn't want to give the forum a lecture on excellence and aesthetics in algorithms if you could do with less. Thank you for your detailed response, I completely agree with you.
Smart Mode is the layman's aid for tracing, but it is certainly not the tool for aesthetes or professionals. I prefer to draw curves myself, as I am trained now, and thus also know that the fewer nodes, the better. Actually, creating perfect aesthetic curves quickly and effortlessly is not straightforward, and that is precisely what the curvature tool assists with.
Smart Mode is for one specific need, I hope Serif does not think it also covers the other(s).
Smart Nodes in Affinity Designer: The use of Smart Nodes tends to create curves that are smooth and require less tweaking, which can be particularly useful for designers who prefer a more streamlined workflow. The automatic adjustments of curves can lead to a more efficient design process but might sometimes offer less control for intricate curve manipulation. Affinity Designer uses an algorithm for its Smart Nodes, which are designed to simplify the process of creating and editing curves. When you manipulate a Smart Node, the software automatically adjusts the adjoining curves to maintain a smooth and natural transition. The algorithm prioritizes ease of use and efficiency, aiming to reduce the need for manual adjustments of Bezier handles.
Curvature Tool in Illustrator: With the Curvature Tool, the aesthetic outcome is often characterized by very smooth and flowing lines. This tool is particularly adept at creating organic shapes and smooth transitions in paths. The Curvature Tool provides a balance between simplicity and control, allowing for the creation of complex curves with fewer adjustments. Adobe Illustrator's Curvature Tool algorithm is centered around intuitively creating and adjusting curves with minimal control points. It automatically generates and adjusts Bezier curves as you add points to a path, focusing on creating smooth, flowing curves that naturally progress through each point. The tool is designed to predict and implement the most aesthetically pleasing curve through the points you define, reducing the complexity of traditional Bezier curve manipulation.

Hi,
There is a bug that I've been waiting for to be solved by the Affinity Team but as of yet - no luck.
I'm using the version 2.3.1 of the Affinity Suite for MacOS.
When implementing a svg-file exported from any of the software in the suite into a HTML document I want to be able to control the svg file with CSS - eg stroke widths, colors, fills and so on. With svg files exported from any of the software form Affinity Suite this is not possible. The only thing I can control with CSS is the size.
The only "solution" I've found as of yet is to open the svg file in Adobe Illustrator and export it again with the box "Presentation mode" ticked and only THEN I'm finally able to control the svg file as intended.
I've attached 2 files exported from both Affinity Pulbisher and Adobe Illustrator Also attached are screen shots with export settings from both softwares. Just to be clear, a svg file exported from affinity software works on a web page but is not controllable with CSS.
Please fix this bug asap as I don't want to be forced to keep Illustrator just to be able to produce svg files that can be controlled with CSS.


affinity.svg illustrator.svg

This is happening SO OFTEN!

When moving one object apart/to the other up/down using arrow keys in my case, the top rotation handle happens to often (with the zoom level I am often using) block the digit of distance the studio is trying to show you (currently in Designer).
Can you please ideally render this number IN FRONT of the handle instead of behind it? Or nudge it to the side or allow user to make the numbers larger. Or even removing the handle? (Users can rotate objects using corners anyway).
Thanks for consideration!

I don't know if this is how affinity works or it is a bug, or I may miss something. When working with tools such as flood selection tool, brush tool, select brush tool, and some other tools, there is no custom cursor for the mode we enter. For example, in flood selection tool, by holding ctrl, we enter the "Add mode", and by holding Alt, we enter the "subtract mode". However, the cursor does not change according to the mode we are working on. Something like having a little plus sign or minus sign on the cursor of the tool to let us realize which mode we are on. Thank you.

Your channel deserves more than its current number of subs and views, Trent; and your video is more interesting than the Affinity Revolution equivalent. I don't use a Google account, but I added you to my RSS feeds a while back (it's old school, but so am I).

I very rarely ask for anything, but this issue is a long time itch which I cannot scratch.
Would Serif consider adding a preference to re-enable LUT thumbnail previews in the adjustment panel?
Because I really miss them. I often use LUTs as a quick and effective way of finally unifying photos for websites, but that has become so needlessly awkward since the thumbnails were removed quite some time ago (late version 1, I think?). As a consequence, I trimmed the list to an absolute minimum and renamed some, but it is hardly ideal.
If there was a performance problem, then I can empathise with that (although my old Intel Macs never struggled with the previews – they run Affinity pretty well).
But please provide the option to enable the previews for those of us who use LUTs.
Apologies if this has been requested before, but I searched and found nothing here.

In that case, my fix would have been to discourage those people from importing such a crazy and unnecessary quantity of LUTs.

100% agree. Live trace is needed for brand designers. I use this feature often in Illustrator when I am trying out new fonts BEFORE I buy them. It gives me enough knowledge to know whether a font will work for my intended purpose. It's not as crisp however it still allows me to work out branding problems before refining the final version for the client. This is a huge Illustrator benefit. I'm honestly shocked it wasn't included in V1 let alone we're still waiting with it not in V2. 

You may dispense with the arrogance and online know-it-all attitude, which is predictable, tedious, and disconnected from my reality.
I have had professional developers quality-check and evaluate the changes before they were incorporated into the product, and the output was indeed satisfactory. I simply couldn't deliver the messy output from Affinity. My instructions are not developer instructions, but rather the purpose of the current SVG, so I get SVGs from Affinity that I can hand over to developers, who won't need to spend costly consulting time cleaning it up. Moreover, it's only on rare occasions that SVGs come from the client, but we do provide some illustrations.
The same professional supplier, with handpicked developers and talent scouts at universities, is actively integrating AI in development, optimization, and testing, and I'm talking about a supplier with billion-dollar revenue, so their considerations are far from Mickey Mouse level.
They're streamlining, I'm streamlining. It's clear to me that you can't fathom such a daily routine, workplace, and working conditions. Consequently, you can't even imagine what the standard, daily life, and job market will look like in 5 and 10 years.

Hello everyone,
v2.4.0.222
With the arrival of version 2.4 of Affinity Designer, it is crucial to pay more attention to the needs of web designers. Exporting AFDESIGN files in SVG format reveals a major issue: the excessive presence of superfluous elements in the source code. This can cause problems when SVGs are used on websites.

Issues
test-text-rectangle.afdesign
Current export vs. ideal export:
Here is a concrete example to illustrate the problem, based on a very simplified situation:
Current SVG source (Exported by Affinity Designer 2.4.0.2222): 3184 bytes
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 889 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g id="SVG-export" serif:id="SVG export" transform="matrix(1.05833,0,0,1.1,0,0)"> <rect x="0" y="0" width="840" height="140" style="fill:none;"/> <clipPath id="_clip1"> <rect x="0" y="0" width="840" height="140"/> </clipPath> <g clip-path="url(#_clip1)"> <g id="Hide-maroon-rgb-115-72-72--tear" serif:id="Hide maroon rgb(115,72,72) tear" transform="matrix(0.944882,0,0,0.909091,76.9626,-7.27273)"> <path d="M774.428,41.82C774.428,41.82 807.548,60.083 807.548,67.91C807.548,82.31 792.708,94 774.428,94C756.149,94 741.309,82.31 741.309,67.91C741.309,60.083 774.428,41.82 774.428,41.82Z" style="fill:rgb(115,72,72);"/> </g> <g id="Purple-rgb-115-72-242--circle" serif:id="Purple rgb(115,72,242) circle" transform="matrix(1.19876,0,0,1.31455,-195.447,-62.4413)"> <ellipse cx="828.307" cy="100.75" rx="60.693" ry="53.25" style="fill:rgb(115,72,242);"/> </g> <g id="Pink-rgb-204-44-255--visible-heart" serif:id="Pink rgb(204,44,255) visible heart" transform="matrix(0.944309,0,0,0.908621,-17.4437,0.166044)"> <path d="M853.979,109.074C861.352,98.868 876.097,98.868 883.47,103.971C890.844,109.074 890.844,119.279 883.47,129.484C878.309,137.138 865.038,144.792 853.979,149.895C842.919,144.792 829.648,137.138 824.487,129.484C817.114,119.279 817.114,109.074 824.487,103.971C831.86,98.868 846.606,98.868 853.979,109.074Z" style="fill:rgb(204,44,255);"/> </g> <g id="Yellow-rgb-255-255-63--Artistic-text" serif:id="Yellow rgb(255,255,63) Artistic text" transform="matrix(0.944882,0,0,0.909091,21.9758,16.3877)"> <g transform="matrix(37.5,0,0,37.5,698.358,103.622)"> </g> <text x="95.08px" y="103.622px" style="font-family:'SimplySans-Book', 'Simply Sans', sans-serif;font-size:37.5px;fill:rgb(255,255,63);">Unnecessary objects and elements</text> </g> <g id="Blue--rgb-0-255-255--Artistic-text" serif:id="Blue #rgb(0,255,255) Artistic text" transform="matrix(0.944882,0,0,0.909091,14.1732,1.81818)"> <g transform="matrix(58.3333,0,0,58.3333,607.818,50.0094)"> </g> <text x="107px" y="50.009px" style="font-family:'SimplySans-Book', 'Simply Sans', sans-serif;font-size:58.333px;fill:rgb(0,255,255);">A plethoric source</text> </g> <g id="Green-rgb-51-193-33--rectangle" serif:id="Green rgb(51,193,33) rectangle" transform="matrix(0.220472,0,0,0.233333,0,0)"> <rect x="0" y="0" width="300" height="600" style="fill:rgb(51,193,33);"/> </g> </g> </g> </svg> Ideal SVG Source: 1555 bytes (1493 without spaces)
<svg viewBox="0 0 889 154" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"> <g transform="scale(1.05833 1.1)"> <clipPath id="a"> <path d="M0 0h840v140H0z"/> </clipPath> <g clip-path="url(#a)"> <path d="M774.428 41.82s33.12 18.263 33.12 26.09c0 14.4-14.84 26.09-33.12 26.09-18.279 0-33.119-11.69-33.119-26.09 0-7.827 33.119-26.09 33.119-26.09Z" style="fill:#734848" transform="matrix(.94488 0 0 .9091 76.963 -7.273)"/> <ellipse cx="828.307" cy="100.75" rx="60.693" ry="53.25" style="fill:#7348f2" transform="matrix(1.19876 0 0 1.31455 -195.447 -62.441)"/> <path d="M853.979 109.074c7.373-10.206 22.118-10.206 29.491-5.103 7.374 5.103 7.374 15.308 0 25.513-5.161 7.654-18.432 15.308-29.491 20.411-11.06-5.103-24.331-12.757-29.492-20.411-7.373-10.205-7.373-20.41 0-25.513 7.373-5.103 22.119-5.103 29.492 5.103Z" style="fill:#cc2cff" transform="matrix(.9443 0 0 .90862 -17.444 .166)"/> <text x="95.08" y="103.622" style="font-family:'SimplySans-Book','Simply Sans',sans-serif;font-size:37.5px;fill:#ffff3f" transform="matrix(.94488 0 0 .9091 21.976 16.388)">Unnecessary objects and elements</text> <text x="107" y="50.009" style="font-family:'SimplySans-Book','Simply Sans',sans-serif;font-size:58.333px;fill:#0ff" transform="matrix(.94488 0 0 .9091 14.173 1.818)">A plethoric source</text> <path style="fill:#33c121" d="M0 0h300v600H0z" transform="scale(.22047 .23333)"/> </g> </g> </svg> A comparison of the two versions highlights the overabundance of unnecessary information in the current export.
Suggested improvements
Automatic code clean-up:
Implement an automatic clean-up function during export to eliminate superfluous elements. Export in Two Formats. Offer the option of exporting the SVG in two versions: Standard SVG file. SVG source optimized for integration into a web source. <g id="" viewBox="0 0 889 154" transform="scale(1.05833 1.1)"> <clipPath id="a"> <path d="M0 0h840v140H0z"/> </clipPath> <g clip-path="url(#a)"> <path id="Hide-maroon-rgb-115-72-72--tear" d="M774.428 41.82s33.12 18.263 33.12 26.09c0 14.4-14.84 26.09-33.12 26.09-18.279 0-33.119-11.69-33.119-26.09 0-7.827 33.119-26.09 33.119-26.09Z" style="fill:#734848" transform="matrix(.94488 0 0 .9091 76.963 -7.273)"/> <ellipse id="Purple-rgb-115-72-242--circle" cx="828.307" cy="100.75" rx="60.693" ry="53.25" style="fill:#7348f2" transform="matrix(1.19876 0 0 1.31455 -195.447 -62.441)"/> <path id="Pink-rgb-204-44-255--visible-heart" d="M853.979 109.074c7.373-10.206 22.118-10.206 29.491-5.103 7.374 5.103 7.374 15.308 0 25.513-5.161 7.654-18.432 15.308-29.491 20.411-11.06-5.103-24.331-12.757-29.492-20.411-7.373-10.205-7.373-20.41 0-25.513 7.373-5.103 22.119-5.103 29.492 5.103Z" style="fill:#cc2cff" transform="matrix(.9443 0 0 .90862 -17.444 .166)"/> <text id="Yellow-rgb-255-255-63--Artistic-text" x="95.08" y="103.622" style="font-family:'SimplySans-Book','Simply Sans',sans-serif;font-size:37.5px;fill:#ffff3f" transform="matrix(.94488 0 0 .9091 21.976 16.388)">Unnecessary objects and elements</text> <text id="Blue--rgb-0-255-255--Artistic-text" x="107" y="50.009" style="font-family:'SimplySans-Book','Simply Sans',sans-serif;font-size:58.333px;fill:#0ff" transform="matrix(.94488 0 0 .9091 14.173 1.818)">A plethoric source</text> <path id="Green-rgb-51-193-33--rectangle" style="fill:#33c121" d="M0 0h300v600H0z" transform="scale(.22047 .23333)"/> </g> </g>
Conclusion
Implementing these improvements in Affinity Designer would enable greater compatibility with current web practices and significant performance optimization for sites incorporating SVGs. This would represent a considerable advantage for web designers using Affinity Designer.
See also:
Iconify: https://iconly.io/tools/svg-cleaner SVGom: https://svgomg.net/ SVG Minify: https://www.svgminify.com/

Quite agree. Illustrator curves are beautiful and flowing, while Affinity makes odd lumpy looking things! I'd love to see an improvement to Smart Nodes, or inclusion of other drawing modes such as BSpline or Spiro from Inkscape.

Thank you for the kind and thoughtful responses. I would still like to push back that the smart mode (or smart nodes) are not the same thing—the curvature tool in Illustrator produces curves that have perfect curvature continuity. You can see this if you analyze the continuity of the curves that are created with the curvature tool. There is only one solvable position of handles for a given position of path points on a given curve. The smart nodes does not work in this fashion—I'm not entirely sure how it determines where to place handles for a given set of path points, but the result ends up being less aesthetically pleasing and requires more manual positioning, IMO. Thank you for the discussion and consideration. 

It would also be nice to have a topic title that was meaningful, and at least a basic description in the first post of what was wanted.
(Or maybe I'm just grumpy today...)

Your channel deserves more than its current number of subs and views, Trent; and your video is more interesting than the Affinity Revolution equivalent. I don't use a Google account, but I added you to my RSS feeds a while back (it's old school, but so am I).

The Black & White adjustment for Affinity Photo looks simple, but there are some concepts you should know before using it. In this video, we’ll look at how knowledge of RGB colors can help you get better B&W conversions for your photos.
 

True, there are a variety of ways to do it. I wanted to give the viewer some background information on RGB and B&W theory to help them make their own decision. 
BTW, Affinity Designer doesn't have Presets for adjustments layers the way Affinity Photo does. I'm not sure why that was never included. 

In that case, my fix would have been to discourage those people from importing such a crazy and unnecessary quantity of LUTs.

Hello out there!
As much as I welcome and support the whole Affinity Suite, I sometimes swear and shout at the search for a consistent user interface and logical connections in the menus and panels.
I have an urgent job - and have now been searching for 1 1/2 hours for the point where I can import presets for black&white adjustment downloaded from the internet! This is unbelievable!
If I *would* have LUT presets, I would have a cogwheel in the line of LUT presets in the "adjustments" panel to load additional presets.
This cogwheel is missing in the "Black & White..." adjustment and I can't get these presets imported into Affinity Photo. Bruahhhhh.
 
I would appreciate a hint and help!
Johannes
 

This could be you - and a few others in this thread with black and white opinions - in a not so distant future:

Usually this is just a canvas redraw issue/bug. Just briefly zoom in and out to make the canvas redraw, and you'll see the actual crop.