Friksel

Thanks for your reaction @MEB. I saw the viewBox-setting and that unticking the viewbox-checkbox indeed sets the width and height to exact dimensions, but viewbox and width/height attributes are two different things. Viewbox is meant to set the window which defines which part of the image will be shown on the viewport/output, while width/height (basically the viewPORT) set the dimensions of the output. One has nothing to do with the other. For example for animations I control the viewbox to pan, tilt and zoom (or even stretch) the image with Javascript, while the width/height of the output stay the same. What's happening right now is that the output of the image always gets renderered to 100% of the window size when viewBox is ticked and if the viewBox is unticked there is indeed a fixed image size, but there suddenly is no viewbox anymore. That's not right. To illustrate this a little more I just created an illustration. (Don't look at the awful design, it's just to get the point accross). Here you can see the SVG with all its graphical elements, in this case 2 circles. The viewbox defines the region of the svg it would show on the output. On the bottom right you see the viewPORT, which is defined in the SVG output by 'width' and 'height' attributes. It's important to know that the width and height of the output(viewPORT) doesn't have to be the same as the width and height of the viewBOX. And that's important, because of this: - sizing the viewPORT (so the bottom right rectangle in the illustration) will change the size of the output - sizing the viewBOX (so the top left rectangle in the illustration) will change the visible area-position and scaling of the image. If the viewBOX is set smaller the image gets scaled up (zoomed in), if the viewBOX is set larger the image gets scaled down (zoomed out), while the viewPORT remains the same and keeps the same output-size Hopefully this helps to get my point accross. Both attributes are very important attributes to have in the SVG-output and can't be left out for responsive and interactive use on websites. Right now we have to enter these values in a text editor for all SVGs and each and every time again after a change in designer. That's not a very efficient workflow. Especially because Designer has all data it needs, it only needs to output in the export.

@R C-R Guess we're having a different opinion on this.

Hi @Yorkshire Lad I had something like that in Adobe Character Animator in the past and I believe I fixed that in Windows itself per application. So maybe you could find for a (workaround) solution for now in Windows. Don't know the details anymore but I know that fixed my problem back then

Wow, that's clever. Thanks for this info!

It happens to me a lot that I click right next to an anchor point when I want to move it with the node-tool. That shouldn't be a problem, but in designer it adds a new anchor point to the curve everytime this happens. Although I understand adding anchor points to a curve-region this way is a quick way to do it, it is annoying when this constantly happens when trying to move existing anchor points or bend a curve-region. I might be missing something, but I can't find any setting to turn this click-to-add-anchor behaviour off in the node tool. This is even more problematic when a lot of anchor points are very closely together and you can't see them all in the current zoom. Then you don't even know that you accidentally added anchor points. Which is causing unintended changes in the graphic without me knowing it. I like it to be able to add anchor points with the node tool, but I think it would be better when we have to press a control-key with it like alt, ctr, shift to prevent accidentally adding anchors. Thanks!

If what you mean is a round-curve, then you can just draw a circle and click on 'Convert to Pie' in the topbar. You then have 3 handles to define where the pie-curve should start and finish. If you defined those angles you convert the circle to curves (from the layer menu: 'convert to curves') to be able to edit the curves to remove the two stright lines from the pie. When it's a curve you activate the node tool (A), select the center anchor point and click on 'Break curve'-action from the toolbuttons in the topbar. And with the Node tool (N) you can then select both lose center anchors and delete them. Leaving a perfect round curve. 1) If you draw a circle you can edit the width and height properties in the Transform toolbar and set those to 200cm so you have a circle with a radius of 100cm. 2) you can select the outer circle, copy and paste it, set a width/height of 10cm less or more then the outer circle and repeat this process for the amount of curves you want Hope this helps

Working 8 hours a day on Designer for making illustrations last weeks, I noticed a thing I run into a lot of times which is disturbing the workflow a bit and seems easy to fix. I've setup Designer and Photo to have a 2-column toolspanel (look at attachment). That way I'm having the fill- and border-color-circles visible inside the toolbar at all times to quickly change colors, like I was used to in Adobe software. So I click on a fill- or border-circle to bring it to the actual color selection or doubleclick on it to change its color. Very handy and used a lot. But if I work fast making illustrations in Designer all day long, a lot of times it happens that I accidentely doubleclick just outside these small color-circle-rings. Normally that wouldn't be a problem, but in Designer and Photo doubleclicking just outside these circles (or a tool) is causing the toolspanel to undock/float or dock again everytime this happens, 'cause the doubleclick-handler is set to the full toolspanel. So I have to re-dock the panel a lot of times during the day which is distracting and gets really annoying after a while. I think the solution wouldn't be that hard to implement and would make Desiger and Photo an even better product: solution 1 Add an option to lock the docking of the toolspanel. When this setting is set to locked the panel cannot be undocked. I'd say the the 'Customize Tools'-panel would be a nice place for this setting. solution 2 No doubleclick at all. Adding the same way of undocking to the toolspanel like being used inside other panels: drag and drop the toolspanels titlebar outside of its dockregion. solution 3 (my choice) Adding a 'Tools'-titlebar to the toolspanel (like it is visible already when undocked) and move the doubleclick-handler of the full toolspanel to this titlebar instead. That way the intended behaviour remains but now the toolspanel only toggles docking/undocking when a user doubleclicks on the titlebar. And that only happens when a user really wants it. In my opinion that would be an intuitive place to doubleclick. Thanks!

Thanks for your reaction @R C-R. I'm a developer myself, so I know about namespaces. This is my point: serif-attributes don't have any meaning in a webbrowser and so they are redundant data making the SVG larger and because of that loadtimes longer. With all kind of compression-technics we are trying to minimize svgs to the bare minimum, but these serif-attributes aren't filtered out by minimizers, so they stay inside the file even though they don't have any meaning online. They just stick around and making the files larger then needed. Using those serif-attributes inside svg's for importing in other serif software could make sense though to add additional data wich is Serif-specific for Affinity software and all. But when we export svgs for use on the web we don't want them inside our files. Next to this, if we would like to export our layouts to be used inside another Serif product, why not import the original Designer- (or Photo-)files instead? There's no use in importing svg's than I'd say. It would be very much appreciated if there would at least be some option in the exporter-dialog to leave serif-specific attributes/namespaces out of the svg! And if it is about promoting Affinity products, I'll do that anyway Thanks!

Just found out these days BlackMagic DaVinci Resolve 15 beta came out and it now has Fusion (their VFX program) included! That product really is getting better and better every release! Trying it out now and it is becoming a real After Effects / Premiere competitor now if not already past them! And the product is free... It's really a great package and very professional with editor, colorgrading, audio editor and now vfx. The only thing I don't like about it is that its projects don't save to a file (like Aftereffects), but have some kind of databasestructure (either written to disk or to postgre database), but next to that: I found my After Effects alternative and it even feels much better, 'cause it's working with nodes with a very fast workflow with keyboard shortcuts, a fully dual monitor setup, AND has the timeline integrated!!! It's also much faster than After Effects... I made my choice! Maybe this helps other people here too.

Damn, I thought with 'join' you meant 'add' (the boolean operator), good reading @Alfred. Indeed, add should normally work on this. So far I didn't find issues with add. Anyway, glad it works now with gradients on outlines; nice trick to know, I'll try that too.

@Dylan SJ Perez Looking at your work (wich looks promising btw nice colors), I am trying to help you, but can't really tell anything from the screenshots alone. So I can only throw some things I normally check if strange things happen; are you sure there are no strokes that needs to be converted into paths before you start adding/joining? Are all paths closed? Do you still have the problem when you don't use smart nodes?

Rightnow exporting to SVG has all styles inline on all seperate svg-elements. And elements don't have classes or IDs. Using SVGs on web and making interactive animations on a daily basis this way it's impossible to animate elements and use external stylesheets without having to manually add classes and IDs to each element and remlve all inline styling in a text-editor after each export. I don't like to say it, but that makes this workflow impossible to use. Having to stick to inline styling inside the SVGs is another problem: - These days inline-styling is a big nono and validators throw penalties if inline styline is being used. The preferred way is internal style department, or use with external stylesheets. - A lot of layouts use the same styling on multiple elements. With inline styling all these styles got copied for all elements, resulting in a way larger SVG file then needed because of a lot of repetitive redundant data. This can easely be avoided by adding classes to the SVG elements and having one style-rule inside the general section for each different style. That makes the export a lot more efficient and makes it easier for developers like me to just copy the generated styles and move them to an external stylesheet if needed. - When styling is in the general <style> tag inside the SVG, a developer only have to change 1 stylerule if something needs to be changed instead of having to change all objects having all the same inline-styles - Because there are no classes nor IDs added to elements, we are unable to animate the elements with javascript, or again, we have to add IDs to all elements we want to animate each time after an export... A little bit like the Adobe Illustrator advanced settings offer, but that could even be improved to keep the SVG output as small as possible: My suggestion would be to add this to the SVG exporter settings: - A checkbox to add IDs to SVG elements where the layer-name starts with an asterix ('#'), followed by the name of the layer/curve. That way we can decide wich elements get IDs so we can address these elements later with Javascript to animate and so on. And with this we also prevent adding IDs to all elements in the SVG (resulting in a large SVG file with a lot of unused, redundant IDs). And when no # is add to any layer, no IDs are being written to the SVG. So full control here I'd say. - An option to choose one of the following for the SVG Export: - Use inline styles - Put styling inside <style> tag (recommended - mostly resulting in smaller files and less redundancy) (Perhaps to be complete even a: - Put styling inside svg attributes (but not my taste ) ) When a user picks 'Put styling inside <style> tag' the elements get a class attached with the styling in the general <style> tag inside the svg. Long story short: for real / advanced usage of SVG on the web for web development, interactivity and animations (by css and javascript), these options are indespensable! It would be very much appreciated if Affinity developers could look into this! Thanks a lot!

Looking at the SVG output at the moment SVG's always get a 100% width and 100% height, meaning they always scale up or down to a parent-window (in a browser). But there are a lot of usecases we don't want SVGs to scale on websites and if we do it would be nice if we could set how the responsiveness would behave, so to wich windowborder the image would stick and if we want to keep the aspect ratio while scaling. These are all very simple SVG attributes that only have to be added to the svg when we need it. Browsers are doing the rest. At the moment there is no setting in the SVG settings to turn the auto scaling (100% width/height) behaviour off in the SVG, meaning we have to manually take these attributes out of the SVGs each time we export an SVG if we don't want autoscale. It would be a lot easier, faster and less time consuming if we could just set these settings once inside the SVG export options to save it with our own preset. So what I ask for in the SVG export settings dialog is: - A switch to choose between using document width/height (keep size) or 100% width/height (auto scale) - A listbox to choose the 'preserveAspectRatio' attribute in the SVG so we can set this to: - none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid (the default), xMaxYMid, xMinYMax, xMidYMax, xMaxYMax (as described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) These are important settings for exporting SVGs for Web and not very difficult to add to the dialog cause they only change 3 attributes in the svg tag. But they speed up the process of SVG exports a lot because these changes don't need to be made by hand in a texteditor after each export! Thanks!

Good to read your problem is solved now! @stokerg I was just looking into the svg too and I keep asking myself: why is there a xmlns:serif inside the SVG-tag?? Does this actually has a purpose or is this just to promote the company website?

Not sure where you need the artboards for, but if you use the artboards to define regions for exports, you could use slices in the export persona (see attachment) and export the slices.

Learn HTML and CSS.

@HVDB Photography that 'new from clipboard' option is a great way to already do this before this feature is implemented. thanks!

@AndyB1972 Like @toltec; If you're creating vectorgraphics for professional print you don't need snapping at all for quality output, 'cause you're not dealing with conversion into pixels during the process. Snapping to pixels would only matter if you create bitmap graphics (so graphics with pixels instead of vectors), like png's or jpgs. But even for web you could also choose to export into svg and use that svg inside a website (so it stays vector and doesn't get translated into pixels during the process), so even then you don't need snapping. So: when there will be conversion into pixels: using snapping to pixels could result in a better sharpness, otherwise snapping doesn't matter. Hope this helps

After looking at your svg-file that just looks like a normal SVG to me (and loads in the browser just fine here), except for the fact you don't export the vectors, but all flattened to a bitmap. When you need a flattened image (so no clean vector-graphic), why not export to a jpg instead? That would normally result into a much smaller file size as well. But my advise would be to change the SVG export preset to 'SVG (for Web)' and make sure you're exporting vectors only.

I agree. Applescript would be a very bad choice. Either Javascript (wich is really becoming bigger and bigger, because there are so many developers working on it everyday and the language is becoming better really fast now) or Python (less people are using it, but clean language and being used in other graphics software like Blender), although I prefer Javascript

@Arnaud Mez Natron is free software wich has active development and is made purely for creating video-effects like keying, blurring, motion tracking and so on. You can also use (open source) effects plugins in it. But an important difference with After Effects is that it's based on nodes you have to connect to each other. Wich is really handy, because you can see directly what you're doing and how your setup of effects, inputs and outputs looks. It also has a curve editor and a dope sheet to handle animations over time. You could make text animations with it, but you need to know it's not the same type of editor like Adobe Animate/Flash or Adobe After Effects. If you're looking for more information there's a lot to find on google and youtube. Here is a beginnerstutorial: https://www.youtube.com/watch?v=saEENGQbn6c so you can find out for yourself if this suits your need.

Ah okay

@Fatih19 I was just looking for importing the Affinity designer files into Resolve, but so far it doesn't load it in. Perhaps I have to dive deeper into this.

Thanks @Arnaud Mez, because of your post I finally have a great workflow with Spine wich I bought years ago but never really used. That software together with Designer are briljant indeed! That JSON output generator in Designer is really making me smile and makes exporting for use in Spine so much more fun! So thanks again for your tip. I'm gonna dive into Spine more now! It's indeed even better software then Adobe Animator/Flash once was in optmized animating for webgraphics and games. For the other use; video-effects, I still miss a decent alternative to After Effects though. I use Natron now for effects and some other mwha mwha programs for video editing, but I'm really missing a real competitor wich has both great effects and a keyframable timeline with layers and stuff. A real replacement for After Effects is something I'm looking for for a while and it seems like a lot of other people do too. If Affinity decides to fill that gap too that would make my day and I would buy it without a blink!

@MEB Love you guys! Looking forward to it!