Jump to content
Sign in to follow this  
Tong

Import Assets from SVG

Recommended Posts

It would be really cool to have ablity import assest from svg files with multiply selection, assuming one svg - one asset when importing, and also title of asset taken from svg file name.

 

 

Clip2net_170916011209.png

Clip2net_170916011931.png

Share this post


Link to post
Share on other sites

This was actually muc easier than I though. Just open the the SVG containing the icons (group icons if needed), select all and then drag them into the desired assets panel. Done.

Share this post


Link to post
Share on other sites
Posted (edited)

You have to do it to make it easier =>

(only Mac OS X) if (on Windows) install "bash to get it without problems"

1. Collect all your SVG files into one folder

2. Open your terminal =>

  • go in your folder path with "cd /your/folder/path"
  • copy all SVG files in only one file width "cat *.svg > index.svg"

       !!! Now your SVG coped as "index.svg" !!!

3. Open the index.svg file with a editor =>

  • change all <svg xmlns="http://www.w3.org/2000/svg"  ... > to <g> and </svg> to </g>
  • write a SVG tag on start <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ... > and the end of Tag to close the file
  • open your file on the Browser and check all error and fix it.
  • It should be look like that =>
    • <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
             <defs>
                    <path id="a" d="M48 48H0V0h48v48z"/>
             </defs>
             <clipPath id="b">
                    <use xlink:href="#a" overflow="visible"/>
             </clipPath>
             <path clip-path="url(#b)" d="M6 8V2h4v6h6v4h-6v6H6v-6H0V8h6zm6 12v-6h6Vh..."/>
       
             <g>
                    <path fill="black" d="M8 12H4v28c0 2.21 1.79 4 4 4h28v-4H8V12zm32-8H16c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h..."/>
             </g>
       
             <g>
                    <path fill="black" d="M24 4C12.97 4 4 12.97 4 24s8.97 20 20 20 20-8.97 20-20S35.03 4 h..."/>
             </g>
       
             <g>
                    <path fill="black" d="M38 4H10C7.79 4 6 5.79 6 8v28c0 2.21 1.79 4 4 4h8l6 6 6-6h8c2.21 0 h..."/>
             </g>
      </svg>
  • Drag your file in the AffinityDesigner App
  • Then double click on the layer =>
    • select all SVGs in the layer =>

Drag it of the assets window in your app

1701504916_Bildschirmfoto2019-03-08um12_46_26.png.7b5eba7a6e6e83b5c9956c0d53d9d173.png

good luck :)

Edited by UserKHK
Image edited

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×