problem exporting svg for the web with react

[11597392]

hello I want to create and modify icons
but when I export them in svg to use them in react I have a problem either I have the icon displayed well but I can't use the fill css to change the color or I don't see the curves and I can change the color

and I have to edit the svg to remove this from the file otherwise I have compilation errors in react

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" >

and
xmlns:serif="http://www.serif.com/"

here are some examples
a digital svg export no curve but takes the color
and one in flatten with the curves but fill css doesn't work

I tried full export option but still same result

did i forget to do something i am new to affinity publisher and designer

logo.afpub

[11597392]

I just found a lead

apparently react doesn't like styling like this
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;fill:current;"

but if I delete the style and in the path I put
  fill="current" fillRule='evenodd'
it works

already how to do not have a fillRule='evenodd'

and is it possible not to put style and just put fill in the path

[v_kyr]

Well, it all depends here, namely if you mean when Affinity then generates the SVG output format on export, or if you mean instead if you can generally modify the SVG code manually accordingly (via XML text editing) here?

However, for by Affinity on export generated SVG you can't much influence the SVG element head part, other than the bounding box settings. So you would have to modify this always accordingly afterwards, either manually via text editing, or by some automated find/replace/delete-scripting. - The SVG path element is pretty flexible, you can add or omit a bunch of options here on demand.

See also related:

• Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• the SVG element
• the 'path' element
• SVG basics
• Learn SVG
• ... and so on ...

Tutorials:

• W3 Schools SVG-Tutorial - simplyfied easy intro
• SVG-Tutorial from Peter Collingrige
• SVG Tutorial from Jakob Jenkov
• SVG-Basics-Tutorials
• ... and so on ...

[11597392]

1 hour ago, 11597392 said:

Thanks for your feedback

I partially succeeded but I have a problem that I don't understand
I have two curves I want to subtract 1 but as a result it puts the curve back in alternate fill mode instead of windding which makes my curve disappear here is the file and examples

 

logo.afpub

[v_kyr]

41 minutes ago, 11597392 said:

I partially succeeded but I have a problem that I don't understand
I have two curves I want to subtract 1 but as a result it puts the curve back in alternate fill mode instead of windding which makes my curve disappear here is the file and examples

See the SVG fill-rule property description here! -- A common way to subtract shapes/paths in SVG is to do it either via masks or clip-paths (fill-rules), Affinity uses the later here when generating SVG code.

Below are two examples (handcrafted, aka by editing the Affinity generated SVG code inside an text editor), one via a mask and the other one via a clip-path (fill-rule). Open these via a common webbrowser (Firefox, Chrome ...) in order to see the rendered results and inspect their SVG code changes inside an editor.

NOTE: Affinity doesn't know to deal with masks here, since it's SVG parsing & generating capabilities are pretty much limited!

 

1. Mask usage SVG example ...
    

   <?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 800 600" 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/">
       <defs>
         <mask id="euro">
           <rect width="100%" height="100%" fill="white"/>
           <g transform="matrix(1.5375,0,0,1.5375,238.084,-67.0639)">
               <path d="M282.268,104.908C283.612,113.98 288.844,119.452 296.956,119.452C303.772,119.452 307.18,116.668 309.148,111.964C309.292,111.676 309.34,111.436 309.34,111.148C309.34,110.236 308.524,109.468 307.612,109.228C307.324,109.132 307.036,109.084 306.796,109.084C305.932,109.084 305.212,109.564 304.78,110.572C303.436,113.932 301.324,115.18 296.956,115.18C291.676,115.18 287.884,111.436 286.732,104.908L299.404,104.908C300.412,104.908 301.036,104.38 301.036,103.276C301.036,102.124 300.508,101.644 299.404,101.644L286.348,101.644C286.3,101.068 286.3,100.492 286.3,99.916C286.3,99.1 286.348,98.332 286.396,97.708L301.9,97.708C302.908,97.708 303.532,97.18 303.532,96.028C303.532,94.924 302.956,94.444 301.9,94.444L286.876,94.444C288.22,88.252 291.964,84.7 296.956,84.7C301.372,84.7 303.388,86.332 304.828,89.74C305.212,90.652 305.932,91.036 306.7,91.036C307.036,91.036 307.42,90.94 307.756,90.844C308.572,90.508 309.196,89.884 309.196,88.972C309.196,88.636 309.148,88.3 308.956,87.916C307.228,83.692 303.916,80.524 296.956,80.524C289.42,80.524 283.996,85.9 282.412,94.444L279.244,94.444C278.188,94.444 277.612,94.972 277.612,96.076C277.612,97.18 278.188,97.708 279.244,97.708L282.028,97.708C281.98,98.428 281.932,99.196 281.932,99.916C281.932,100.492 281.932,101.068 281.98,101.644L279.244,101.644C278.14,101.644 277.612,102.172 277.612,103.276C277.612,104.38 278.188,104.908 279.244,104.908L282.268,104.908Z" fill="black"/>
           </g>
         </mask>
       </defs>
       <path d="M626.316,0L482.366,0C445.355,0 415.307,30.048 415.307,67.059L415.307,444.941C415.307,481.952 445.355,512 482.366,512L732.248,512C769.259,512 799.307,481.952 799.307,444.941L799.307,156.156L665.355,156.156C643.809,156.156 626.316,138.663 626.316,117.117L626.316,0Z"/>
       <path d="M455.883,154.491C455.63,154.503 455.376,154.509 455.12,154.509C446.71,154.509 439.883,147.788 439.883,139.509C439.883,131.23 446.71,124.509 455.12,124.509C455.376,124.509 455.63,124.515 455.883,124.528L455.883,124.509L593.307,124.509L593.307,124.558C601.139,125.178 607.307,131.64 607.307,139.509C607.307,147.378 601.139,153.84 593.307,154.46L593.307,154.509L455.883,154.509L455.883,154.491Z"/>
   
       <path d="M799.307,127.656L656.868,0L656.868,127.656L799.307,127.656Z" mask="url(#euro)"/>
   
       <path d="M455.883,107.236C455.63,107.248 455.376,107.255 455.12,107.255C446.71,107.255 439.883,100.533 439.883,92.255C439.883,83.976 446.71,77.255 455.12,77.255C455.376,77.255 455.63,77.261 455.883,77.273L455.883,77.255L593.307,77.255L593.307,77.303C601.139,77.924 607.307,84.386 607.307,92.255C607.307,100.123 601.139,106.585 593.307,107.206L593.307,107.255L455.883,107.255L455.883,107.236Z"/>
       <path d="M455.883,59.981C455.63,59.994 455.376,60 455.12,60C446.71,60 439.883,53.279 439.883,45C439.883,36.721 446.71,30 455.12,30C455.376,30 455.63,30.006 455.883,30.019L455.883,30L593.307,30L593.307,30.049C601.139,30.669 607.307,37.131 607.307,45C607.307,52.869 601.139,59.331 593.307,59.951L593.307,60L455.883,60L455.883,59.981Z"/>
   </svg>

   
   -->  logo-mask.svg
   
    
2. Clip-path (fill-rule) usage SVG example ...
    

   <?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 800 600" 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/">
       <path d="M626.316,0L482.366,0C445.355,0 415.307,30.048 415.307,67.059L415.307,444.941C415.307,481.952 445.355,512 482.366,512L732.248,512C769.259,512 799.307,481.952 799.307,444.941L799.307,156.156L665.355,156.156C643.809,156.156 626.316,138.663 626.316,117.117L626.316,0Z"/>
       <path d="M455.883,154.491C455.63,154.503 455.376,154.509 455.12,154.509C446.71,154.509 439.883,147.788 439.883,139.509C439.883,131.23 446.71,124.509 455.12,124.509C455.376,124.509 455.63,124.515 455.883,124.528L455.883,124.509L593.307,124.509L593.307,124.558C601.139,125.178 607.307,131.64 607.307,139.509C607.307,147.378 601.139,153.84 593.307,154.46L593.307,154.509L455.883,154.509L455.883,154.491Z"/>
       <path d="M455.883,107.236C455.63,107.248 455.376,107.255 455.12,107.255C446.71,107.255 439.883,100.533 439.883,92.255C439.883,83.976 446.71,77.255 455.12,77.255C455.376,77.255 455.63,77.261 455.883,77.273L455.883,77.255L593.307,77.255L593.307,77.303C601.139,77.924 607.307,84.386 607.307,92.255C607.307,100.123 601.139,106.585 593.307,107.206L593.307,107.255L455.883,107.255L455.883,107.236Z"/>
       <path d="M455.883,59.981C455.63,59.994 455.376,60 455.12,60C446.71,60 439.883,53.279 439.883,45C439.883,36.721 446.71,30 455.12,30C455.376,30 455.63,30.006 455.883,30.019L455.883,30L593.307,30L593.307,30.049C601.139,30.669 607.307,37.131 607.307,45C607.307,52.869 601.139,59.331 593.307,59.951L593.307,60L455.883,60L455.883,59.981Z"/>
       
       <path id="euro-curve" d="M799.307,127.656L656.868,0L656.868,127.656L799.307,127.656ZM672.071,94.232C674.137,108.18 682.182,116.594 694.654,116.594C705.133,116.594 710.373,112.313 713.399,105.081C713.62,104.638 713.694,104.269 713.694,103.826C713.694,102.424 712.44,101.243 711.037,100.874C710.595,100.727 710.152,100.653 709.783,100.653C708.454,100.653 707.347,101.391 706.683,102.941C704.617,108.107 701.37,110.025 694.654,110.025C686.536,110.025 680.706,104.269 678.934,94.232L698.418,94.232C699.967,94.232 700.927,93.42 700.927,91.723C700.927,89.952 700.115,89.214 698.418,89.214L678.344,89.214C678.27,88.328 678.27,87.443 678.27,86.557C678.27,85.302 678.344,84.122 678.418,83.162L702.255,83.162C703.805,83.162 704.764,82.35 704.764,80.579C704.764,78.882 703.879,78.144 702.255,78.144L679.156,78.144C681.222,68.624 686.979,63.162 694.654,63.162C701.443,63.162 704.543,65.672 706.757,70.911C707.347,72.314 708.454,72.904 709.635,72.904C710.152,72.904 710.742,72.756 711.259,72.609C712.513,72.092 713.473,71.133 713.473,69.731C713.473,69.214 713.399,68.697 713.104,68.107C710.447,61.613 705.355,56.742 694.654,56.742C683.067,56.742 674.728,65.007 672.292,78.144L667.422,78.144C665.798,78.144 664.912,78.956 664.912,80.653C664.912,82.35 665.798,83.162 667.422,83.162L671.702,83.162C671.628,84.269 671.554,85.45 671.554,86.557C671.554,87.443 671.554,88.328 671.628,89.214L667.422,89.214C665.724,89.214 664.912,90.026 664.912,91.723C664.912,93.42 665.798,94.232 667.422,94.232L672.071,94.232Z" fill-rule="evenodd"/>
   </svg>

   
   --> logo-fillrule.svg

 

[11597392]

thank you for your comeback
I have another question

here is an icon that I just made but when I want to add all the curves together the hole in the loop disappears

or so how to delete the curve that makes the hole in my loop definitively

 

[NathanC]

1 hour ago, 11597392 said:

here is an icon that I just made but when I want to add all the curves together the hole in the loop disappears

You could try changing the fill mode of the Curves layer after performing the add by going to Layer > Fill Mode > Alternate (Even - Odd) if it isn't set to this already.

[v_kyr]

4 hours ago, 11597392 said:

...but when I want to add all the curves together the hole in the loop disappears

or so how to delete the curve that makes the hole in my loop definitively

It's pretty much the same thing as I've already explained and shown above, no matter if you combine all curves then. - You can combine all curves and apply the fill-rule, or combine all curves except the hole first and then at last mask/clip-out that hole then.

[11597392]

very well thank you
I still have trouble with the masks

if you have a tutorial to advise me for that or an example file

thanks again

[v_kyr]

8 minutes ago, 11597392 said:

if you have a tutorial to advise me for that or an example file

See:

• SVG mask  (MDN web docs)
• SVG masks (tutorial)
• SVG Masking Examples
• A Comprehensive Guide to Clipping and Masking in SVG
• ... and so on, do a Google search after that theme ...