How to export Affinity Designer svg icons for use by Visual Studio resource editors

[rtischer8277]

I am learning how to create svg icons using AD, but am having trouble exporting them to my Visual Studio (VS) Microsoft Foundation Class project's editor. The VS help text prescribes the following. Notice the Help text recommends Inkscape. I would like to use Affinity which is why I am writing this how-to-export question. Here are their instructions:

Quote

 

"We strongly recommend to use a simplified ("optimized") SVG only: all elements such as texts or shapes should be converted to paths and all paths should be combined. The simplified SVG is small and fast-drawing. In addition, in this case, it will be very hard to make a "reverse engineering" for your media.

How to create SVG icons:

...

The following free tools allow you to create new SVG images:

• Microsoft Expression Design 4: very simple in use. If you're familiar with Microsoft Office products, you may immediately start creating your own SVG files!
• Inkscape : very powerful tool, but some time is needed for learning it.

Or, you may use any commercial applications such as CorelDraw or Adobe Illustrator. In addition, there are a lot of 3-rd party freeware/commercial SVG icon collections.

How to prepare SVG image lists:

When the framework is loading image list resource, first it's looking for SVG resource and trying to parse an SVG. We assume that SVG image list has the following format:

<?xml version="1.0" encoding="utf-8"?>
<svg>
    <svg>
        1-st icon
    </svg>
    <svg>
        2-nd icon
    </svg>
    <svg>
        3-rd icon
    </svg>
    .....
</svg>

 

 

 

[Dan C]

Hi @rtischer8277,

Unfortunately I don't have any experience with VS personally, however I can certainly recommend the best methods for creating this file in Affinity!

23 hours ago, rtischer8277 said:

all elements such as texts or shapes should be converted to paths and all paths should be combined

You can convert any object to a 'Curves' object in your document by simply selecting the layer and navigating to Layer > Convert to Curves.

To combine Paths, please select multiple and then use the 'Add' boolean operation found under Layer > Geometry > Add.

You can also force your text to convert to curves when exporting, open File > Export and select the SVG format. Now select the More... options and you should see a tickbox to export Text as Curves.

23 hours ago, rtischer8277 said:

How to prepare SVG image lists:

When the framework is loading image list resource, first it's looking for SVG resource and trying to parse an SVG. We assume that SVG image list has the following format:

<?xml version="1.0" encoding="utf-8"?>
<svg>
    <svg>
        1-st icon
    </svg>
    <svg>
        2-nd icon
    </svg>
    <svg>
        3-rd icon
    </svg>
    .....
</svg>

This isn't something I've heard of previously, so I test exported an SVG from Affinity with multiple images placed in the document - the SVG looks as follows in a text editor:
 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 2481 3508" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="DSC_0469.jpg" transform="matrix(0.0749059,0,0,0.0749059,138.286,118.877)">
        <use xlink:href="#_Image1" x="0" y="0" width="6000px" height="4000px"/>
    </g>
    <g id="DSC_0470.jpg" transform="matrix(0.116837,0,0,0.116837,1011.46,244.158)">
        <use xlink:href="#_Image2" x="0" y="0" width="5961px" height="3353px"/>
    </g>
    <g id="DSC_0489.jpg" transform="matrix(0.166115,0,0,0.166115,363.003,1060.38)">
        <use xlink:href="#_Image3" x="0" y="0" width="6000px" height="4000px"/>
    </g>
    <g id="DSC_0500.jpg" transform="matrix(0.154046,0,0,0.154046,1359.69,2034.89)">
        <use xlink:href="#_Image4" x="0" y="0" width="6000px" height="4000px"/>
    </g>
    <g id="DSC_0522.jpg" transform="matrix(0.108197,0,0,0.108197,328.106,2434.68)">
        <use xlink:href="#_Image5" x="0" y="0" width="6000px" height="4000px"/>
    </g>
    <defs>
        <image id="_Image1" width="6000px" height="4000px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/ (...cont...)

Unfortunately I'm not sure if this means the exported SVG will be compatible with VS, however if you are not using image objects then you should be fine from what I can tell.
I hope this helps

[rtischer8277]

Yes, this is helpful regarding multiple objects (image lists). I'll try it out. Thanks.