SVG export

[Jojojojo]

Hi,

I'm trying to export a brush stroke I created in Affinity Designer because I need to use it in Figma and it's not working.

Upon importing it into Figma, it shows up in a group that is 1px by 1px and inside this group it shows an image icon. I would expect to see a vector but instead an image icon appears and we cannot see the brushstroke, the image is empty, nothing shows up. The svg is not appearing at all.

I created a brush stroke in Affinity Designer and exported it as SVG digital high quality.

Can you please advise?

Thanks

 

[v_kyr]

Without seeing how you've setup the brush stroke and how you exported it from Affinity as SVG it's hard to tell. Or at least seeing the exported SVG file code.

A 1px by 1px sized group sounds size wise strange here. - However, note that when exporting from ADe as SVG it usually tells you on it's SVG export panel if something will be rasterized or not (where rasterization means here that it will write out portions as bitmap/raster image data then instead all as plain vectors). Further when you open the by ADe generated SVG file inside an text editor, you will also see in it's SVG code if there is any base64 encoded image binary data included, which indicates then that something has been rasterized (... written out as image data).

[Jojojojo]

Hi,

I just drew a brush stroke to test it out in Affinity Designer, nothing fancy and I exported it as an svg, however it's not working, something is wrong, hope you can help clarify because when I import it into Figma it's showing up as an image. 

I'm including screenshots to clarify.

I included a screenshot of what it looks like in the Figma file. It's placed in a group frame that measures 1px by 1px and inside it has an image icon.

I tried increasing the size of the frame and the image, and finally can see the brush stroke I drew in Affinity Designer, however it's not a vector but an image. Please see the images I sent. I also sent an image how I exported this brush stroke.

Thanks,

 

[v_kyr]

First note that brushes in ADe aren't real vector brushes at all, they are all constructed out of bitmaps. - However, in your above layers panel I can see, that you selected the artboard, don't know if you exported that whole one then (?).

Instead select just your curve layer and when exporting that one as SVG format do setup the SVG export options like this ...

1. ... before exporting select just the curve layer and keep it selected
2. ... on the initial File -> Export (as SVG) panel set the "Area" for the export to "Selection only", since we don't want to export the whole artboard doc, but instead just the selected brush curve here
3. Use the "More" button in order to show up more SVG export option settings ...
   
4. ... set there on the more panel "Rasterise:" to "Nothing". So nothing should be rasterised at all and everything should be keept as vectors!
5. Now close the "More" panel and on the initial SVG export panel press "Export"!

The above shown steps should just export your selected curve as a plain vector SVG file. As a plain vector curve, since we've set it up in/via the SVG more options "to rasterize nothing (so no bitmap parts generation at all)" here.

Finally we can check inside some text editor if the by ADe generated SVG file only contains plain vector paths by opening that and looking through the SVG code ...

<?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 1136 234" 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 transform="matrix(4.16667,0,0,4.16667,-263.842,-300.183)">
        <g transform="matrix(1,0,0,1,-26,-131)">
            <path d="M101.322,236.98C108.428,236.98 114.779,234.583 121.543,232.895C123.935,232.298 126.413,232.703 128.866,232.799C132.146,232.928 135.406,232.893 138.591,232.309C143.044,231.494 149.189,230.397 153.643,231.67C170.485,236.486 183.984,247.142 200.004,253.738C213.18,259.163 229.701,259.579 243.718,258.723C251.861,258.225 260.075,257.227 267.308,253.007C269.111,251.955 270.776,250.699 272.42,249.418C273.253,248.77 273.981,247.966 274.998,247.603C280.523,245.628 286.561,244.788 292.09,242.638C298.88,239.998 304.381,234.676 311.459,232.466C324.599,228.361 336.451,227.044 349.941,227.044C356.564,227.044 361.941,221.667 361.941,215.044C361.941,208.421 356.564,203.044 349.941,203.044C333.939,203.044 319.89,204.688 304.303,209.557C296.702,211.931 290.684,217.434 283.393,220.269C278.068,222.339 272.24,223.101 266.919,225.003C262.477,226.591 259.202,229.95 255.214,232.277C251.281,234.571 246.682,234.497 242.254,234.767C231.655,235.415 219.104,235.647 209.141,231.545C192.287,224.606 177.959,213.661 160.241,208.595C152.562,206.399 141.943,207.296 134.268,208.702C131.592,209.192 128.818,208.743 126.06,208.671C122.58,208.58 119.12,208.763 115.729,209.61C110.878,210.821 106.419,212.98 101.322,212.98C94.699,212.98 89.322,218.357 89.322,224.98C89.322,231.603 94.699,236.98 101.322,236.98Z"/>
        </g>
    </g>
</svg>

... the above shown SVG code doesn't contain any base64 encoded raster/image portions and so is plain vector based!

• sample-brush.svg
• sample-brush.afdesign

Other than that for Figma it might be needed to set the SVG width/height values to absolute values instead as 100%. So instead of ...

Quote

<svg width="100%" height="100%" viewBox="0 0 1136 234" version="1.1" xmlns="http://www.w3.org/2000/svg"

... then setting ...

Quote

<svg width="1136" height="234" viewBox="0 0 1136 234" version="1.1" xmlns="http://www.w3.org/2000/svg"

... or leave them out and just using the viewbox setting ...

Quote

<svg viewBox="0 0 1136 234" version="1.1" xmlns="http://www.w3.org/2000/svg"

... you have to try out and see how it behaves then via Figma.

[Guest]

8 hours ago, v_kyr said:

A 1px by 1px sized group sounds size wise strange here.

The 1px x 1px SVG import from Affinity to Figma is a known issue. If you scale the entire group up to the measurements of your Affinity composition it should look as expected. However if you have raster elements/effects/etc (incl. vector brushes) keep in mind that these will be rasterized when exported to SVG.

[Jojojojo]

Hi V_kyr,

Thanks so much for the detailed instructions, I really appreciate it !!

I followed your instructions, however I did experience some issues.

- The export did come out as vector, however the brush shape, thickness etc came out different than the original. I'm including a screenshot below.

Also when importing to Figma, it has 1px by 1px for frame, I did try to resize it but the brush design and stroke is different from Affinity Designer. Please see below.

- I decided to open the svg up in Affinity designer I exported and we see that the brush stroke design is different from the original I exported. I have included a screenshot below.

- I also sent you the original AD file. If you have time, please let me know if you manage to export it as a svg and if you can manage to make it look identical.

I also want to know if I should be using Affinity Photo instead, would the results be better?

I also have affinity Designer on ipad, are the brushes vector on ipad? The only issue I have is that I don't have a nice variety of brushes on the iPad at this time.

My goal here was to design a brush stroke with a gradient colour and use it as an svg in a Figma for UI. 

Can you tell me how I can achieve this?

I would appreciate any feedback and thanks again for helping,

 

Figma file here showing that it's a vector. I resized it to 500px but the svg brush design is different.

Figma file showing the size of the svg at 1px by 1px

I uploaded the svg that I exported from Affinity Designer and the brush stroke design is different as well.

brush test June_2.afdesign Brush test no2.svg

[Jojojojo]

Hi,

I forgot to include the original test brush stroke I created so that you can see that the exported svg came out differently.

Thanks,

[v_kyr]

8 hours ago, Jojojojo said:

- The export did come out as vector, however the brush shape, thickness etc came out different than the original.

That's since we forced that brush stroke SVG export to be only plain/real vectors and no raster/bitmap here. - The original brush stroke has edge irregularities, aka transparency zickzack like portions on it's edges/contour. Those can't be exported in a plain vector manner as SVG by ADe. - That's also why I above said "... note that such brushes in ADe aren't real vector brushes at all, they are all constructed out of bitmaps."

8 hours ago, Jojojojo said:

Also when importing to Figma, it has 1px by 1px for frame, I did try to resize it but the brush design and stroke is different from Affinity Designer.

See related above what @Bryan Rieger posted and referenced about that theme -> "The 1px x 1px SVG import from Affinity to Figma is a known issue.". Follow his referenced link to see how to deal with that in/for Figma!

8 hours ago, Jojojojo said:

I also sent you the original AD file. If you have time, please let me know if you manage to export it as a svg and if you can manage to make it look identical.

That's then how you initially exported it as SVG, the result will be rasterized (set under the more button options the default "Rasterize: Unsupported properties", which in turn then means, that a base64 bitmap/image is then include inside the generated SVG file instead of plain/real vectors!

• brush test June_3.svg

Now the SVG file code will contain an image ...

<?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="4058" height="919" viewBox="0 0 4058 919" 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 transform="matrix(1,0,0,1,-182.199,-1201.92)">
        <g transform="matrix(0.979396,0,0,1,-121.99,-1753.6)">
            <g transform="matrix(1.02104,-0,-0,1,310.588,2955.51)">
                <use xlink:href="#_Image1" x="33" y="54" width="3886.62px" height="812.95px" transform="matrix(0.999902,0,0,0.999938,0,0)"/>
            </g>
        </g>
    </g>
    <defs>
        <image id="_Image1" width="3887px" height="813px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAADy8AAAMtCAYAAACc/9z8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nOzdWXOc+ZWg9yczsS8kuLNYq6pUi7ZWS+p900zPjDwT3XbE+MLj8Lfzja995QuvYY+nuz1u9/QqTUsttUqqncXiCmLLBHxxzun/i2QCSIAAl+Lzi8gAkMh890xGkHzygCRJkiRJkiRJkp6U3tPeAEmSJEmSJEmSJEmSJOksDZ72BkiSJEmSJEmSJL0gekD/aW+EJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS9MIYPO0NkCRJkiRJkiRJeo4M8rb3tDdEkiRJkiRJkiRJkiRJehYZL0uSJEmSJEmSpC+DHjCT359FWDwA5oGXgOvAItAHRrnu3hmt97j6wCxxLCqyfha2S5IkSZIkSZIkSZIkSS8I42VJkiRJkiRJkvRlMAus5PfDU152D1gGrgDfz9srxL+z3M6vPSJkPksDYA5YAM4T+zsgQuW5/Plc/m6ZOCbbT2C7JEmSJEmSJEmSJEmSpH/Se9obIEmSJEmSJEmSvjSWiYD2DrD1BNf7EvBy3j4Hfgl8mtvwuBORB8Q+fYOIlt/N9Qw667oD3APuAz8B/oGImmeAS0TofDG3Z5S3W8Bd4AGwQwTXW8RE57Xc5t28jfLnCpcXgVeBJeCjfP4s8B4RWM/kbQf4GPgx8CNgI++TJEmSJEmSJEmSJEmSzszM094ASZIkSZIkSZL03OsR/+ZwA/gq8FdEPLzL44XDh61viYh8rwFvA28Q4e7HwHUiKB7k4+4S4e4wv98iQuBhbuN5YB7oA5tEUHwvfz+Ty/0u8F/nOpfz8Q+JqHkrbxvA/wP8KfABET2/B7yZy6jHbQI/I8LnDzvPvQ28luvqd/Z3N/
...
...
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvtJOJ3khyfxBLwQAANjbzEEvAAAAAAAAAAAAAAAAYJ+OJDmfZPGgFwIAAAAAAAAAAAAAAAAAADzaZpOMDnoRAADAvf0f4clK0P6Q+TwAAAAASUVORK5CYII="/>
    </defs>
</svg>

 

8 hours ago, Jojojojo said:

I also want to know if I should be using Affinity Photo instead, would the results be better?

Nope, Affinity Designer (ADe) is the best tool for vector based drawing work"

8 hours ago, Jojojojo said:

I also have affinity Designer on ipad, are the brushes vector on ipad? The only issue I have is that I don't have a nice variety of brushes on the iPad at this time.

I doubt that it will make a difference in terms for brushes here, since it's implementation wise usually all based on the same shared code base here.

 

8 hours ago, Jojojojo said:

My goal here was to design a brush stroke with a gradient colour and use it as an svg in a Figma for UI. 

Can you tell me how I can achieve this?

Select the curve layer and apply a FX gradient overlay to that curve!

Note that this (applying a FX gradient overlay) will also result/yield to a rasterised SVG file with an included image then!

 

[Jojojojo]

Hi,

Thanks for all the info, it has been very helpful !

From what I understand, ADe cannot export a brush svg with or without a gradient, it will have to be exported as a png. 

I'm just disappointed that there isn't a way to vectorise a brush stroke, I have seen a brush stroke before in svg format but I'm surprised it cannot be done in ADe.

Thanks again for all your help !

[v_kyr]

24 minutes ago, Jojojojo said:

From what I understand, ADe cannot export a brush svg with or without a gradient, it will have to be exported as a png. 

I'm just disappointed that there isn't a way to vectorise a brush stroke, I have seen a brush stroke before in svg format but I'm surprised it cannot be done in ADe.

AFAIK there are only few real plain vector brushes available for Affinity, most of them will probably look like what we initially have exported as plain vectors here. Meaning without such contour characteristics like the one you've choosen above. - However I'm no expert for Affinity based vector brushes, but our forum friend @StuartRcis, he has done a bunch of different brush sets, which you can find under the forums Resources section. Some other people too shared their created brush sets in the forums resources sections.

See for example ...

• Crazy Brush and Assets Library
• Pattern Brush Packs
• Project Brush 28 Ink Stipple
• ... and so on ...

So Stuart for example can for sure tell you much more about vector based brushes as I can here!

 

[NotMyFault]

2 hours ago, v_kyr said:

AFAIK there are only few real plain vector brushes available for Affinity, most of them will probably look like what we initially have exported as plain vectors here. Meaning without such contour characteristics like the one you've choosen above. - However I'm no expert for Affinity based vector brushes, but our forum friend @StuartRcis, he has done a bunch of different brush sets, which you can find under the forums Resources section. Some other people too shared their created brush sets in the forums resources sections.

See for example ...

• Crazy Brush and Assets Library
• Pattern Brush Packs
• Project Brush 28 Ink Stipple
• ... and so on ...

So Stuart for example can for sure tell you much more about vector based brushes as I can here!

 

I tried to export different vector brushes as SVG, and only the basic round brush can be exported unchanged. All others will be either converted via “expand stroke” (useless, as the shape is still only basic round, not following the actual brush curvature), or rasterized.

And as joke, Affinity removed the basic brush categorie from Designer somewhere in the past, so you need to create one on your own (which is easy, but an extra step and hurdle for new users), or find the asset file burried deep in the forum.

 

[StuartRc]

Hi

As discussed really! the 'vector' Brushes are just images stretched along a path. I tend to use them for quick sketches (rasterize afterwards and shading!).Useful but not 100% ideal when you need a pure vector version. When working on brushes Sometimes I need to extract a vector shape of the path.

To extract a 'pure' sample of a drawn path I tend to go to Inkscape but there are other apps you could use!.

You can copy and paste a selected vector path into the app (There is an option in Prefs to copy as SVG!) and then easily trace the outline...pasting the result back into AD.

Also If you view the XML Editor it displays the SVG object data. Includes an image layer (with defined name) and SVG ID with collected vector paths.

For construction of Vector Brushes I put together a tutorial some time ago now to help create the brushes

IF you are looking for brush Vector Brush Sets you could try these (The linear set may be your best option!):

Using Dynamics to enhance inking vector Brushes is here

For raster inking: Try this sample set:
The full set is described here

 Hope this helps!

[Jojojojo]

Wow, thanks so much for the valuable information & resources v_kyrm, NotMyFault & StuartRc!

I will definitely be looking into them & hopefully find a solution ! 

Cheers!