Jump to content
Sign in to follow this  

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.





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">
                    <path id="a" d="M48 48H0V0h48v48z"/>
             <clipPath id="b">
                    <use xlink:href="#a" overflow="visible"/>
             <path clip-path="url(#b)" d="M6 8V2h4v6h6v4h-6v6H6v-6H0V8h6zm6 12v-6h6Vh..."/>
                    <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..."/>
                    <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..."/>
                    <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..."/>
  • 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


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  


Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.