silverpaint Posted January 23 Posted January 23 Hi, Any .svg downloaded from https://fonts.google.com/icons will not open/import in Affinity Photo 2.5.7 or Affinity Designer 2.5.7. When you either import or drag and drop it just creates an 'empty' transform box. Attached is a sample .svg, but you can download your own and it won't work. favorite_24dp_UNDEFINED_FILL0_wght400_GRAD0_opsz24.svg Quote
GarryP Posted January 23 Posted January 23 Welcome to the forums @silverpaint If you switch the Foreground Colour with the Background Colour, via the Swatches Panel or elsewhere, you will see the shape. The fill attribute for the whole SVG is “undefined” so it’s maybe an issue with how that google icon has been defined, rather than with the Affinity applications. (I can't find any documentation which definitively says what should happen in this circumstance.) silverpaint 1 Quote
Hangman Posted January 23 Posted January 23 Hi @silverpaint and another warm welcome to the forums, Just adding to @GarryP's feedback... If you wish, you can define a fill colour before downloading the SVG by using the colour picker on the Google Icon page... silverpaint 1 Quote Affinity Designer 2.5.7 | Affinity Photo 2.5.7 | Affinity Publisher 2.5.7 Affinity Designer Beta 2.6.0.3106 | Affinity Photo Beta 2.6.0.3106 | Affinity Publisher Beta 2.6.0.3106 MacBook Pro M3 Max, 36 GB Unified Memory, macOS Sonoma 14.6.1, Magic Mouse HP ENVY x360, 8 GB RAM, AMD Ryzen 5 2500U, Windows 10 Home, Logitech Mouse
silverpaint Posted January 25 Author Posted January 25 Thank you for the kind response, and helpful tips. On 1/23/2025 at 6:38 AM, GarryP said: Welcome to the forums @silverpaint If you switch the Foreground Colour with the Background Colour, via the Swatches Panel or elsewhere, you will see the shape. The fill attribute for the whole SVG is “undefined” so it’s maybe an issue with how that google icon has been defined, rather than with the Affinity applications. (I can't find any documentation which definitively says what should happen in this circumstance.) I tried that and it kind of works, when you just open the file itself - it seems to open very small, and then it's raterized at that small scale. However, I was unable to drag and drop it successfully onto another open project/file. That said, it is due to the fact that it's undefined as @Hangman mentioned. I think if Affinity encounters a svg that is 'undefined' then it should have a 'default' color that is assigned on import. That is what I would expect, if for no other reason than you would avoid users thinking that the software isn't working, or unable to open .svg files. Again, thank you for helping me! Quote
GarryP Posted January 25 Posted January 25 35 minutes ago, silverpaint said: when you just open the file itself - it seems to open very small, and then it's raterized at that small scale. Can you explain what you mean by “very small”? Do you mean that it’s displayed on the screen in a very small area or something else? The SVG definition says that the design is only 24×24 pixels so that’s what size it will be when opened. If you are opening the SVG in Photo then it will look pixelated because Photo displays everything according to the pixels of the document which is open, in this case 24×24 pixels. That's just how Photo works. Try opening it in Designer instead. 35 minutes ago, silverpaint said: I think if Affinity encounters a svg that is 'undefined' then it should have a 'default' color that is assigned on import. What about people who don’t want the colour to be arbitrarily changed by the software because they want to keep the colour as undefined so that it's preserved for later processing? Quote
Hangman Posted January 25 Posted January 25 3 hours ago, silverpaint said: I tried that and it kind of works, when you just open the file itself - it seems to open very small, and then it's raterized at that small scale. However, I was unable to drag and drop it successfully onto another open project/file. Depending on how you wish to use the icons, you could install them as a Variable Font, giving you control over physical size, optical size, colour, weight, fill, outline, etc., and then, if you want to use them as a non-font graphic, once you've made any adjustments to the icon, convert it to curves (Layer → Convert to Curves) to bake the settings in. https://github.com/google/material-design-icons/tree/master/font Google Icons.mp4 silverpaint 1 Quote Affinity Designer 2.5.7 | Affinity Photo 2.5.7 | Affinity Publisher 2.5.7 Affinity Designer Beta 2.6.0.3106 | Affinity Photo Beta 2.6.0.3106 | Affinity Publisher Beta 2.6.0.3106 MacBook Pro M3 Max, 36 GB Unified Memory, macOS Sonoma 14.6.1, Magic Mouse HP ENVY x360, 8 GB RAM, AMD Ryzen 5 2500U, Windows 10 Home, Logitech Mouse
Lunity Posted January 25 Posted January 25 The SVGs not be fully compatible with Affinity apps. One workaround is to try opening the SVG in a text editor and check for any unnecessary metadata or tags that can be removed. Try converting the SVG to a different format using an online converter. silverpaint 1 Quote
silverpaint Posted January 25 Author Posted January 25 (edited) 7 hours ago, GarryP said: Can you explain what you mean by “very small”? Do you mean that it’s displayed on the screen in a very small area or something else? The SVG definition says that the design is only 24×24 pixels so that’s what size it will be when opened. If you are opening the SVG in Photo then it will look pixelated because Photo displays everything according to the pixels of the document which is open, in this case 24×24 pixels. That's just how Photo works. Try opening it in Designer instead. What about people who don’t want the colour to be arbitrarily changed by the software because they want to keep the colour as undefined so that it's preserved for later processing? Garry, let me be more accurate, and thank you for being meticulous - let me be more precise as well. 1. Small Rasterization. You are right when you open the .svg in a text editor the dimensions are 24px. I followed your initial steps, and when I drag/drop the 'undefined' .svg onto an existing picture, it does this - (1) I drag/drop the .svg, and as you mentioned the 'undefined' causes it not to be rendered (2). When I switch color tabs (3) - nothing happens. I'm guessing it's 'user' error on my part? So I tried opening it on it's own, changing the swatch color to RED and I got this - Which is as you said rendered/rasterized at 24x24 - which is what I was referring to -- I only afterwards realized that when I press V - it's still a vector that can be resized -- so that IS my own fault. Sorry for the confusion. Now, that said - I have two more questions: 1. In the sunflower drag/drop example, why is changing the swatch color not changing the .svg icons raster color? (ie. I am assuming I am doing something wrong - as it remains 'undefined'/'invisible -- this only seems to work if I open the .svg on its own, not when I drag and drop). If this is as intended, then I would say it feels like a bug to a user. 2. I am not advocating for software to arbitrarily change things the user would prefer to keep. So I think you and I are in agreement. That said, unless I would have taken the time to post here, and @Hangman would have pointed out to me that there was a fill option that was possibly set to 'undefined' on the google site itself (which honestly, is bad UXUI design in itself) I would not have figured this out. You mentioned, "because they want to keep the colour as undefined so that it's preserved for later processing?" - which I can't think of a use case for. Not saying there might not be one, so maybe you can tell me one. From a UXUI perspective this feels like it's not working or there is a bug. Undefined seems like either - 1) you have a warning dialog pop up (with a checkbox saying don't warn again) "Your <ADSFA>.svg has undefined color property are you sure you want to import it this way?" YES > remains undefined, NO > changes to default BLACK. or 2) You change it on import, to 'fix' it, but then you're in the space you mentioned where you might have the software do something that you didn't ask it to do. That depends, if there's a use case for undefined. svg files, which I honestly can't think of one. Also, just for context. I've used Photoshop since 3.05 - work as dev in software/design/art and got fed up and recently switched to Affinity at home. I love the suite and want to support and advocate for it - there are a few things that make it still a deal breaker for me to use in a daily/fast work environment (ALT color picker behavior is one of them), and I am hoping that they will be addressed in future releases. I've designed, and worked in UXUI on games/apps for over 15 years, so I try to look at things from a base users perspective. Again, I wanted to close the loop because I VERY much appreciate the kindness you've (and @Hangman) shown in helping me - you both are awesome! Affinity Designer 2.5.7 | Affinity Photo 2.5.7 | Affinity Publisher 2.5.7 Intel Core i5-3.5GHz, 64GB RAM, Nvidia RTX 4070Ti-16GB, Windows 11, Wacom Cintiq Pro 24 touch Edited January 25 by silverpaint adding system specs Quote
Hangman Posted January 25 Posted January 25 44 minutes ago, silverpaint said: I drag/drop the .svg, and as you mentioned the 'undefined' causes it not to be rendered (2). When I switch color tabs (3) - nothing happens. I'm guessing it's 'user' error on my part? If Placing as an SVG file then to change its colour you'd need to select the Placed SVG file in the Layers panel and then select Edit in the Context toolbar which opens the file in a new tab where it can be edited... A much simpler option is just to copy it using the Copy icon directly from the Google Icons page and paste it directly into your file. That way you can edit it directly as @GarryP mentioned above by switching the Foreground Colour with the Background Colour or by selecting the foreground colour (which defaults to None) and selecting the colour you want... Sunflowers.mp4 Quote Affinity Designer 2.5.7 | Affinity Photo 2.5.7 | Affinity Publisher 2.5.7 Affinity Designer Beta 2.6.0.3106 | Affinity Photo Beta 2.6.0.3106 | Affinity Publisher Beta 2.6.0.3106 MacBook Pro M3 Max, 36 GB Unified Memory, macOS Sonoma 14.6.1, Magic Mouse HP ENVY x360, 8 GB RAM, AMD Ryzen 5 2500U, Windows 10 Home, Logitech Mouse
silverpaint Posted January 25 Author Posted January 25 @Hangman Thank you again, that makes complete sense! Hangman 1 Quote
GarryP Posted January 26 Posted January 26 (edited) silverpaint: Thanks for the extra information. 17 hours ago, silverpaint said: You mentioned, "because they want to keep the colour as undefined so that it's preserved for later processing?" - which I can't think of a use case for. Not saying there might not be one, so maybe you can tell me one. My thinking behind that was an assumption that there is an option to get the icons with an Undefined colour for some specific reason that I'm unaware of. My guess is that people can choose an Undefined colour if the icons will be re-coloured by something ‘later in the pipeline’, maybe via CSS or some other (maybe web?) rendering process where the resultant colour is defined outside of the icon itself, so changing the colour in the Affinity applications might cause that pipeline to break. In other words, if I'm right (or close to being right), the icon could have an undefined colour so that the eventual consumer decides what that colour will be. (The eventual consumer looks at the icons and recolours those which have an Undefined colour, maybe because of user preferences, while leaving the rest as they are, maybe if they have a specific colour that needs to be reproduced as defined because that colour is important, e.g. red blood, green grass, blue water, etc.) I wouldn’t have a problem if there were an option to automatically change an Undefined colour to a user-defined colour, but I don’t think the software should always assume that it knows best and changes things in the user’s designs without good reason or user-say-so. Note: In the above I am also assuming that the Affinity applications respect, and don’t modify, the Undefined colour when the SVG is exported. I haven’t done any testing for this. Edited January 26 by GarryP Added note. 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.