Ammar Posted February 13, 2017 Share Posted February 13, 2017 Hi I created new assets panel in affinity designer I try to drag and I use application called nucleo for my icons, i drag icons on my design art board and its fine, but when dragging them to the assets panel it gives me an error message that it can't add embedded document, so why I get this and how to solve such problem ? Kindest Regards Quote Link to comment Share on other sites More sharing options...
R C-R Posted February 13, 2017 Share Posted February 13, 2017 You get the error because as it says you can't add embedded documents to Assets. I don't know anything about nucleo but assuming AD can open one of its icon files, do that & then add it to the Assets panel. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Ammar Posted February 16, 2017 Author Share Posted February 16, 2017 but what that means ? I drag an icon which is .svg file to my canvas, then from canvas to assets, and I get same message ? so what file format should the icons be ? Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted February 16, 2017 Staff Share Posted February 16, 2017 Hi Ammar, If you drag an SVG to the canvas of an existing document it is placed as an embedded document - an embedded document can't be dragged to the assets panel thus the message you are receiving. If you use File ▸ Open instead and select the same SVG, it is opened/imported as a group of objects - it is this that can be dragged to the Assets panel. Uncle Mez and Ammar 2 Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
Baron Posted April 20, 2018 Share Posted April 20, 2018 I consider this a design flaw in the software. If I drag and drop an SVG file into my current Affinity Designer document from the Windows Explorer, or by using File ▸ Place, I would expect it to be added to my document as a group shape, not as an embedded document. I am trying to do the same thing as Ammar: creating an asset package with hundreds of SVG files. I should be able to do this with 100 SVG files: File▸New to create a new document. Drag and drop 100 SVG files into document. Select ▸ Select All. Assets ▸Create New Category... From my new asset category, click Add From Selection. But instead I need to do this: File▸New to create a new document. File▸Open 1 SVG file. Select▸Select All from opened SVG file. Edit▸Copy from opened SVG file. File▸Close to close opened SVG file. Edit▸Paste to add shape to current document. Repeat steps 2-6 99 more times. Select▸Select All from current document. Assets▸Create New Category... From my new asset category, click Add From Selection. The requirement to open each SVG file as a separate document before importing them as assets is unbelievably time consuming. Why did Affinity do this? This is like shooting one's self in the foot. It's an easy flaw to fix. Because of this design flaw, it's an extremely time consuming thing to create asset packages from existing SVG files. This is going to drastically limit the number of available asset packages created by users for Affinity Designer. Some potential customers will not purchase Affinity Designer because of this flaw. You can see this is the case by searching this forum. As an example of this design flaw, Affinity should try converting the entire set of free Android SVG icons into an asset package for Affinity Designer. Because of this flaw, this will take many hours to complete. Why cripple asset creation like this? Is Affinity working on fixing this? Quote Link to comment Share on other sites More sharing options...
firstdefence Posted April 20, 2018 Share Posted April 20, 2018 Drag icon to the Canvas. Click on the icon and then click Edit Document Embedded icon document opens, while the icon is still selected, click on the 3bar icon to get the Asset Category Dropdown Menu. Click Add from Selection. Icon added to Assets, either close the embedded icon document or do some work on it. \\ Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
Wosven Posted April 20, 2018 Share Posted April 20, 2018 A fastest solution is to use Inkscape and import a bunch of svg files in a single new document. You save this file as (in exemple, the one I choose) "simple svg" format and open it in AD. (I did this in few secondes in Inscape (opening the app, creating a new document, importing the files, saving the file), while AD was choking to place the same 7 files). Then, you open the multi-icons file in AD, and each one is a separate group you can select and add to Assets. (You can do the same with AD, exporting multi-placed svg files as a single file and reopening it, but AD is ok to import a max of 3 files… 4, 7 take toooooo much time). Quote Link to comment Share on other sites More sharing options...
Baron Posted April 20, 2018 Share Posted April 20, 2018 Hi Wosven, The other method of using Inkscape is to drag and drop the SVG files directly into an Inkscape document, then Select All from Inkscape and Copy them, then Paste them into an Affinity Designer document. That works just as well. Same results. Using Inkscape is a workaround for this, but not in my case. My problem is that the SVG icons I'm trying to use have meaningful filenames, but within the SVG data there are no names, so Inkscape creates a non-meaningful name like g1651 for the shape name instead of using the filename for the shape name. So I lose all the unique filenames for the icons. I can see in your example that the Apple Pay icon suffered that fate, losing it's meaningful name. I have hundreds of these kinds of icons, and they are all losing their names in this Inkscape process. Having to edit all the names 1 by 1 for hundreds of icons will take forever. If I don't care about the name loss, this would be a viable workaround, but I care about the names being preserved. Quote Link to comment Share on other sites More sharing options...
R C-R Posted April 20, 2018 Share Posted April 20, 2018 2 hours ago, Baron said: Why did Affinity do this? I am just guessing but perhaps it is because SVG is a complex & flexible graphics format that besides resolution-independent vector objects can also include fixed resolution bitmap ("<image>") objects plus both absolute & relative coordinate references. So in general, day-to-day use, editing embedded svg files separately in their own 'document space' (so to speak) allows users to edit them independently of the 'parent' document's parameters. In this respect, maybe it is sort of like how "(Image)" layers maintain their own pixel resolution independently of the document resolution? Regarding the 'all Affinity Designer' workflow to get your SVG icon files into AD assets, it is much simpler to do as @MEB suggested: open each SVG file directly in AD, select all & group them -- there is a keyboard shortcut for each of those steps that will speed things up considerably. Then do any adjustments necessary & (optionally) give the group an appropriate name & add that to the desired Assets category. It isn't ideal but it should not take more than 30-45 seconds per icon once you get into the rhythm of performing the steps required. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Baron Posted April 20, 2018 Share Posted April 20, 2018 12 minutes ago, R C-R said: It isn't ideal but it should not take more than 30-45 seconds That's the problem with that approach. 30 seconds x 1000 icons = 30,000 seconds. That's 8 hours and 20 minutes. The method I outlined above using the paste from Inkscape workaround only takes about 20 seconds for 200 files. The only problem being the loss of the filenames. Maybe I can find a tool that can rename the shape group within the SVG files to match their filenames. If I can do that, then I can use the Inkscape workaround without losing the filenames. I tested that by manually editing the SVG files, adding a meaningful group name and it works. So all I need is a tool that does that. Or I can program my own tool if I can't find one. Quote Link to comment Share on other sites More sharing options...
Wosven Posted April 20, 2018 Share Posted April 20, 2018 Since SVG is only text, another simple solution would be to use an application able to open and modify multiple files from a folder, and add tags with some regular expression. Or a script (seems easier to do on Linux or OS X than Windows), since I'm not sure an app can retrieve and use the filename as a variable for replacement. The script only need to add 2 group tags (<g></g>) after the first one and before the last one : <svg …> <g id="file_name"> … </g> </svg> I'm a little rusty with bash scripting to do this, but it shouldn't be difficult for someone who do/did it less than a decade ago ! Quote Link to comment Share on other sites More sharing options...
R C-R Posted April 20, 2018 Share Posted April 20, 2018 22 minutes ago, Baron said: That's the problem with that approach. 30 seconds x 1000 icons = 30,000 seconds. That's 8 hours and 20 minutes. Well, I did say it was not ideal. Anyway, if you want an option to add Assets like with your 5 step procedure, the place to request that is the Feature Requests, Suggestions and Feedback forum. However, keep in mind what I said about the complexity of SVG file contents, so maybe include in your feature request a suggestion about how to handle files with resolution-dependent <image> objects & such. (Because of that, it isn't as simple as it might seem.) Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Baron Posted April 21, 2018 Share Posted April 21, 2018 18 minutes ago, R C-R said: However, keep in mind what I said about the complexity of SVG file contents R C-R, Affinity Designer is already able to cope with the SVG file format complexity quite well when it comes to pasting text containing SVG file data. I've tried all sorts of SVG data pasted into Affinity Designer, and it has no problems decoding the SVGs directly if they are pasted as text data. Inkscape uses the clipboard format "image/x-inkscape-svg" when it pastes shapes to the clipboard in Windows (don't know about the other OS's). This format contains SVG text data, and can have embedded bitmaps in it. Everything you paste into Affinity Designer from Inkscape pastes as SVG data, even if the shapes contain bitmaps. I tested this with all sorts of documents. The application is fully capable of bypassing the embedded document step for all such SVG data, but does so only for pasted SVG data. So without a doubt it can support this via drag and drop and place operations, but it simply doesn't give us an option to do so. It's a limitation based on a design decision someone made at affinity. 27 minutes ago, R C-R said: the place to request that is the Feature Requests, Suggestions and Feedback forum Thanks. I'll make a request if there isn't already one there. 50 minutes ago, Wosven said: The script only need to add 2 group tags (<g></g>) after the first one and before the last one : <svg …> <g id="file_name"> … </g> </svg> Something along that line is what I'm looking at. I did a test with 2 simple separate SVG icons files. I opened them in a text editor and combined them. I wrapped them withing a single <g> tag (this creates 1 layer) containing 2 separate <g> tags (this creates 2 groups) with id values matching the filenames. See below. I can open this file directly in Affinity Designer. Then select all, and it selects the 2 different shapes. Then I can add them as assets. So all I need to do is get my SVGs into a multi shape SVG file formated like this and I'm good to go. <svg xmlns="http://www.w3.org/2000/svg"> <g> <g id="home"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> <path d="M0 0h24v24H0z" fill="none"/> </g> <g id="accessibility"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/> </g> </g> </svg> Quote Link to comment Share on other sites More sharing options...
firstdefence Posted April 21, 2018 Share Posted April 21, 2018 Some excellent creative thinking going on here How would having +1000 Assets affect Affinity re load times etc, is that a concern? Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
Wosven Posted April 21, 2018 Share Posted April 21, 2018 7 hours ago, Baron said: Something along that line is what I'm looking at. I did a test with 2 simple separate SVG icons files. I opened them in a text editor and combined them. I wrapped them withing a single <g> tag (this creates 1 layer) containing 2 separate <g> tags (this creates 2 groups) with id values matching the filenames. See below. I did a test too. Since svg is a text file and begin and end with specific tag, it's easy to use app like TextPad/WildEdit (Win) or TextWrangler (Mac, it was able to modify files from a selected folder too), and with a regular expression add those <g> tags. Once all your file have an id, you do the trick with Inkscape (dragging a lot of icons in a file and copy/open them in AD). The trick is about retrieving the file name (apps can give the path — need another regExp to select only the file name) and using it in the replacement expression (not possible with the app I use). Another way would be to use a list with the file names and the files, etc. PHP, Bash, Powershell can do this, we only need time to write the script. Perhaps it would be easy to do in Inkscape with Script-Fu or Python, it would be the more logical way to do this (multi-OS solution, command line). PS. You're on Windows, and me too, at least, a powershell script is possible. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted April 21, 2018 Staff Share Posted April 21, 2018 Hi Baron, Welcome to Affinity Forums Thank you for you feedback/support. Currently Affinity Designer/Photo does the same (embeds the file) for several types of documents (PDF, PSD, SVG etc) except plain images which are inserted as Image layers. This is - as far as i know - the default behaviour introduced with the first release and it's not yet more flexible because there's wasn't time to implement/derive additional settings/options to cover more use cases as the example you gave with multiple icons/assets/whatever. It was just a question of setting a limit somewhere on what to include in the app on launch rather than an intentional design decision. I do expect/believe that with time we will end up being able to convert embedded documents in layers/objects inside the original document and eventually placing these types of documents without necessarily embedding them. The best i can suggest for now is to create a thread in the Feature Requests section to raise awareness/bring more attention to this (missing) functionality. Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
Wosven Posted April 21, 2018 Share Posted April 21, 2018 I found a workaround with Notepad++ and macros. You need to create a macro and save it (with a shortcut, you'll find its code in "C:\Users\user_name\AppData\Roaming\Notepad++\shortcuts.xml" Here the code you can put in this file between <Macros></Macros> tags : <Macro name="SVG_add_gp_filename_save_close" Ctrl="yes" Alt="no" Shift="yes" Key="97"> <Action type="2" message="0" wParam="42030" lParam="0" sParam="" /> <Action type="0" message="2179" wParam="0" lParam="0" sParam="" /> <Action type="3" message="1700" wParam="0" lParam="0" sParam="" /> <Action type="3" message="1601" wParam="0" lParam="0" sParam="^([a-zA-Z0-9_-]+)\.svg(<.+)?(<svg[^>]+>)(.+)(</svg>)" /> <Action type="3" message="1625" wParam="0" lParam="2" sParam="" /> <Action type="3" message="1602" wParam="0" lParam="0" sParam='$2$3<g id="$1">$4</g>$5' /> <Action type="3" message="1702" wParam="0" lParam="1794" sParam="" /> <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" /> <Action type="3" message="1700" wParam="0" lParam="0" sParam="" /> <Action type="3" message="1601" wParam="0" lParam="0" sParam='(<g id="[^"]+">)(.+)?(<title>[^<]+</title>)' /> <Action type="3" message="1625" wParam="0" lParam="2" sParam="" /> <Action type="3" message="1602" wParam="0" lParam="0" sParam="$2$3$1" /> <Action type="3" message="1702" wParam="0" lParam="1794" sParam="" /> <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" /> <Action type="2" message="0" wParam="41006" lParam="0" sParam="" /> <Action type="0" message="2025" wParam="0" lParam="0" sParam="" /> <Action type="0" message="2422" wParam="0" lParam="0" sParam="" /> <Action type="0" message="2325" wParam="0" lParam="0" sParam="" /> <Action type="2" message="0" wParam="41003" lParam="0" sParam="" /> </Macro> The steps to do the macro : (I did it using the Menu) Open one of the svg files (the cursor is at the beginning of the file) Clic on the red dot "record macro" Edit > Copy to clipboard > Current Filename to Clipboard Edit > Paste Search > Replace Options :x Match casex Wrap aroundx Regular expression // To add the tag <g id="filename"></g> //====================================== Find what : ^([a-zA-Z0-9_-]+)\.svg(<.+)?(<svg[^>]+>)(.+)(</svg>) Replace with : $2$3<g id="$1">$4</g>$5 // To correct if there's a tag <title> //==================================== Find what : (<g id="[^"]+">)(.+)?(<title>[^<]+</title>) Replace with : $2$3$1 6. Do the 2 [Replace all] and close the pannel 7. Save the file 8. Close the file 9. Save the macro Next time, you begin with a blank Notepad++, you open x svg files and : Macro > Run a Macro Multiple Times… Select the macro, and run it x times. It's fast, you only need to have correct filenames without spaces or other characters than A-Za-z0-9 or _- [edit] Adding the Notepad++ "shortcuts.xml" file containing the 2 needed macros to add group depending of file's name shortcuts.zip The 2 macros to copy-paste in your file "C:\Users\user_name\AppData\Roaming\Notepad++\shortcuts.xml" (since I'm not sure the code displayed in this post is accurate due to HTML display, it's better to take it from the original file from this archive): Steps to use the macro: The code before and after: Depending of the original code, it's enough or you need a little more work. [/edit] Quote Link to comment Share on other sites More sharing options...
Pevara Posted June 19, 2018 Share Posted June 19, 2018 There is in fact a very easy way to resolve this whit-in Affinity Designer. The real issue here is that the "placed" icons are treated as "Embedded Document", but that can be easily resolved by exporting the document to svg, and re-opening that new svg. This forces the embedded documents to become ordinary layers, with their names preserved, that can be converted to assets in the usual way. It may not be ideal, but at least it scales well and requires zero scripts or regexes. Quote Link to comment Share on other sites More sharing options...
Wosven Posted June 20, 2018 Share Posted June 20, 2018 It's not so easy since it can take time, depending of your system. My AD chocked on trying to drag/place more than 3 icons. It would have take forever to process 100+ icons. The faster trick is using Notepad++ and using the macro to add a group with a name corresponding to the file name, but you need to recreate the macro following the how-to or correcting the code since the forum keep on displaying "" ;" instead of " and ">" "<" instead of "<" and ">" Once the macro is recorded, you can use it on a lot of icon files you'll drop in Inkscape to create you main file, before opening this file in AD to add your assets. Quote Link to comment Share on other sites More sharing options...
lukepighetti Posted March 14, 2019 Share Posted March 14, 2019 Hi @MEB, try downloading this icon pack and making it an assets collection. https://feathericons.com If you find any UX improvements perhaps you can add that to the backlog. Cheers. MEB 1 Quote Link to comment Share on other sites More sharing options...
Wosven Posted June 6, 2020 Share Posted June 6, 2020 I missed the post above, but for those who want to add those icons as asset, here there's a step by step explanation: Quote Link to comment Share on other sites More sharing options...
v_kyr Posted June 6, 2020 Share Posted June 6, 2020 2 hours ago, Wosven said: ...but for those who want to add those icons as asset... They can also directly drag'n'drop such SVG icons from the Finder/Explorer into an assets panel category in order to have them as assets. - So there is usually no need for first opening them as a doc from the SVG file and then using "Add from selection" etc. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Wosven Posted June 6, 2020 Share Posted June 6, 2020 10 minutes ago, v_kyr said: They can also directly drag'n'drop such SVG icons from the Finder/Explorer into an assets panel category in order to have them as assets. - So there is usually no need for first opening them as a doc from the SVG file and then using "Add from selection" etc. If I do this, they are un-named, only "grouper" as tooltip for each one (it means "to group" in French), so you won't be able to search the 900+ icons but visually. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted June 6, 2020 Share Posted June 6, 2020 33 minutes ago, Wosven said: If I do this, they are un-named, only "grouper" as tooltip for each one (it means "to group" in French), so you won't be able to search the 900+ icons but visually. Ah Ok, you want to have them all titled/named then. - That's then also a matter of how the author of those SVG icons created them, aka if he used defined IDs then for grouping of objects with the <g ID=xxx> or <symbol ID=xxxx> definitions. Of course it's further also dependent on if and how the Affinity SVG parser interprets these then. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 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.