Jump to content
You must now use your email address to sign in [click for more info] ×

Adding Icons to new Assets Panel


Recommended Posts

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

Link to comment
Share on other sites

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.

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

  • Staff

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.

Link to comment
Share on other sites

  • 1 year later...

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:
 

  1. File▸New to create a new document.
  2. Drag and drop 100 SVG files into document.
  3. Select ▸ Select All.
  4. Assets Create New Category...
  5. From my new asset category, click Add From Selection.

 

But instead I need to do this:

 

  1. File▸New to create a new document.
  2. File▸Open 1 SVG file.
  3. SelectSelect All from opened SVG file.
  4. Edit▸Copy from opened SVG file.
  5. File▸Close to close opened SVG file.
  6. Edit▸Paste to add shape to current document.
  7. Repeat steps 2-6 99 more times.
  8. SelectSelect All from current document.
  9. AssetsCreate New Category...
  10. 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?

Link to comment
Share on other sites

Drag icon to the Canvas.

  1. Click on the icon and then click Edit Document
  2. Embedded icon document opens, while the icon is still selected, click on the 3bar icon to get the Asset Category Dropdown Menu.
  3. Click Add from Selection.
  4. Icon added to Assets, either close the embedded icon document or do some work on it.

5ada4c340a4ab_ScreenShot2018-04-20at21_19_28.png.6a5f6bc9cc69d48e9eda08449351c62b.png

 

5ada4c3db8ec9_ScreenShot2018-04-20at21_20_31.thumb.png.32a54034abf9e07cbda26d47e8e8e6aa.png\\

 

5ada4c414da9a_ScreenShot2018-04-20at21_21_25.png.188e24297a629b3aeaaac56d83bf221e.png

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  
B| (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

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).

 

2018-04-20_225406.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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

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.

Link to comment
Share on other sites

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 ! :)

Link to comment
Share on other sites

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. :D

 

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.)

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

 

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>

 

 

 

 

 

 

Link to comment
Share on other sites

Some excellent creative thinking going on here :D

 

How would having +1000 Assets affect Affinity re load times etc, is that a concern?

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  
B| (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

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.

Link to comment
Share on other sites

  • Staff

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.

Link to comment
Share on other sites

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(&lt;.+)?(&lt;svg[^&gt;]+&gt;)(.+)(&lt;/svg&gt;)" />
            <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
            <Action type="3" message="1602" wParam="0" lParam="0" sParam='$2$3&lt;g id=&quot;$1&quot;&gt;$4&lt;/g&gt;$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='(&lt;g id=&quot;[^&quot;]+&quot;&gt;)(.+)?(&lt;title&gt;[^&lt;]+&lt;/title&gt;)' />
            <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)

  1. Open one of the svg files (the cursor is at the beginning of the file)
  2. Clic on the red dot "record macro"
     
  3. Edit > Copy to clipboard > Current Filename to Clipboard
  4. Edit > Paste
  5. Search > Replace
    Options :
    Match case
    Wrap around
    x  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 :

  1. Macro > Run a Macro Multiple Times
  2. 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):

2020-06-06_105221.thumb.png.08dbdc2fe249c03638f6b6b7df717c73.png

Steps to use the macro:

2020-06-06_110840.png.bdcd0629ad3d8999f0e5f3546150b3a9.png

2020-06-06_110855.png.62be175ff8fcfed2c971a7c76110ac62.png

The code before and after:

2020-06-06_111752.png.82206854c3167f73a5a79191f7b409ca.png

2020-06-06_111802.png.ec647ee8ff815cd27d7d43257be3e675.png

Depending of the original code, it's enough or you need a little more work.

[/edit]

 

2020-06-06_110112.png

Link to comment
Share on other sites

  • 1 month later...

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.

 

Link to comment
Share on other sites

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 "&quot ;" instead of " and "&gt;" "&lt;" instead of "<" and ">" :S

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.

Link to comment
Share on other sites

  • 8 months later...
  • 1 year later...
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. 

☛ 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

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.

Link to comment
Share on other sites

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.

☛ 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

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.