How to export SVG from Affinity Designer V2 where the fill is dynamic

[nickburnsap]

Hi, I'm currently working on a new site for my business using Wix, and they have a feature that let's you change the fill color of an SVG. This is great because it means I don't need to color match everything and upload dozens of assets of the same thing.

I was working in Illustrator on a different computer that exported the files with the correct code (I guess) to allow the SVG color to be changed - but when I got home and started using Affinity, the exports were locked to their export color. I've opened both in a text editor and it looks like chalk and cheese, and I don't really know how to make the Affinity exports include the "dynamic fill" code. Both exports are considered "default" for each app.

Does anyone know how to make this happen?

Example of affinity and illustrator exports attached.

Thanks,

IllustratorExport.svg AffinityExport.svg

[v_kyr]

Well they are not the same curve objects and both the Illustrator and Affinity SVGs contain unnecessary layers here when exported as SVG. Though the Affinity SVG one is a mess of unneeded layers and nested groupings for just one curve, due to relative matrix based transforms.

- IllustratorExport.svg ...

<?xml version="1.0" encoding="UTF-8"?>
<svg data-bbox="0.001 -0.001 369.972 362.293" viewBox="0 0 369.98 362.28" xmlns="http://www.w3.org/2000/svg" data-type="color">
    <g>
        <path d="M68.74 345.68.47 25.35C-2.42 11.78 8.43-.81 22.28.04l264.8 16.34c9.27.57 17.06 7.17 19.15 16.22l63.2 273.89c2.81 12.19-5.6 24.12-18.03 25.56l-259.74 30.1c-10.75 1.25-20.68-5.89-22.93-16.47Z" fill="#2d2d2d" data-color="1"/>
    </g>
</svg>

- AffinityExport.svg ...

<?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 500 500" 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,-18871.2,-1401.7)">
        <g transform="matrix(1.002,0,0,1.18483,18863.2,2556.92)">
            <rect id="Icon_Steam" x="8" y="-975" width="499" height="422" style="fill:none;"/>
            <clipPath id="_clip1">
                <rect id="Icon_Steam1" serif:id="Icon_Steam" x="8" y="-975" width="499" height="422"/>
            </clipPath>
            <g clip-path="url(#_clip1)">
                <g id="Icon-Steam.svg" transform="matrix(0.498501,0,0,0.421578,257.001,-764)">
                    <g transform="matrix(1,0,0,1,-500.5,-500.5)">
                        <rect id="Icon-Steam" x="0.822" y="0.111" width="1000" height="1000" style="fill:none;"/>
                        <g id="Icon-Steam1" serif:id="Icon-Steam">
                        </g>
                    </g>
                </g>
                <g transform="matrix(0.577968,0,0,0.488783,-32.6757,-1014.1)">
                    <path d="M70.377,481.887C85.704,257.511 272.809,80 501.047,80C739.3,80 932.731,273.431 932.731,511.684C932.731,749.938 739.3,943.369 501.047,943.369C306.401,943.369 141.672,814.265 87.891,637.091L252.205,704.055C264.076,757.501 311.803,797.515 368.801,797.515C434.718,797.515 488.234,743.999 488.234,678.082C488.234,676.889 488.217,675.7 488.182,674.516L638.034,566.838C639.348,566.869 640.666,566.885 641.987,566.885C731.897,566.885 804.893,493.89 804.893,403.98C804.893,314.07 731.897,241.075 641.987,241.075C552.078,241.075 479.082,314.07 479.082,403.98C479.082,405.018 479.092,406.053 479.111,407.086L373.835,558.648L374.075,558.763C372.326,558.687 370.568,558.648 368.801,558.648C344.717,558.648 322.289,565.792 303.521,578.075L70.377,481.887ZM641.987,295.071C702.096,295.071 750.896,343.872 750.896,403.98C750.896,464.088 702.096,512.888 641.987,512.888C581.879,512.888 533.079,464.088 533.079,403.98C533.079,343.872 581.879,295.071 641.987,295.071ZM641.987,322.018C596.752,322.018 560.026,358.744 560.026,403.98C560.026,449.216 596.752,485.942 641.987,485.942C687.223,485.942 723.949,449.216 723.949,403.98C723.949,358.744 687.223,322.018 641.987,322.018ZM286.129,717.88L344.548,741.688C371.063,750.365 398.297,741.364 414.103,724.299L414.126,724.187C426.061,712.452 433.467,696.125 433.467,678.082C433.467,669.16 431.656,660.658 428.383,652.923C421.256,636.003 410.102,623.169 393.969,615.391L337.155,591.951C347.022,588.321 357.682,586.338 368.801,586.338C419.436,586.338 460.544,627.447 460.544,678.082C460.544,728.716 419.436,769.825 368.801,769.825C332.423,769.825 300.961,748.606 286.129,717.88Z"/>
                </g>
            </g>
        </g>
    </g>
</svg>

 

- After cleaning up the AffinityExport one and exporting with "Flatten Transform" option enabled ...

<?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 500 500" 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;">
    <path d="M0.016,232.757C8.892,102.815 117.249,0.014 249.427,0.014C387.405,0.014 499.426,112.035 499.426,250.013C499.426,387.992 387.405,500.012 249.427,500.012C136.703,500.012 41.305,425.245 10.159,322.639L105.317,361.42C112.192,392.371 139.832,415.545 172.84,415.545C211.015,415.545 242.007,384.552 242.007,346.378C242.007,345.687 241.997,344.998 241.977,344.313L328.76,281.954C329.521,281.972 330.284,281.981 331.049,281.981C383.118,281.981 425.392,239.708 425.392,187.639C425.392,135.57 383.118,93.296 331.049,93.296C278.981,93.296 236.707,135.57 236.707,187.639C236.707,188.24 236.713,188.839 236.724,189.437L175.756,277.211L175.895,277.277C174.882,277.233 173.864,277.211 172.84,277.211C158.893,277.211 145.904,281.348 135.035,288.461L0.016,232.757ZM331.049,124.567C365.86,124.567 394.121,152.829 394.121,187.639C394.121,222.449 365.86,250.71 331.049,250.71C296.239,250.71 267.978,222.449 267.978,187.639C267.978,152.829 296.239,124.567 331.049,124.567ZM331.049,140.172C304.852,140.172 283.583,161.441 283.583,187.639C283.583,213.836 304.852,235.105 331.049,235.105C357.246,235.105 378.515,213.836 378.515,187.639C378.515,161.441 357.246,140.172 331.049,140.172ZM124.963,369.426L158.795,383.214C174.15,388.239 189.922,383.026 199.076,373.143L199.089,373.079C206.001,366.282 210.29,356.827 210.29,346.378C210.29,341.211 209.241,336.287 207.346,331.808C203.218,322.009 196.759,314.576 187.416,310.072L154.513,296.497C160.228,294.395 166.401,293.247 172.84,293.247C202.164,293.247 225.971,317.054 225.971,346.378C225.971,375.701 202.164,399.509 172.84,399.509C151.773,399.509 133.553,387.22 124.963,369.426Z"/>
</svg>

... now manually adding some SVG fill color at the end of the SVG <path ...> definition, aka fill="#621400" , will set the fill color of that curves object.

Quote

...
331.049,140.172ZM124.963,369.426L158.795,383.214C174.15,388.239 189.922,383.026 199.076,373.143L199.089,373.079C206.001,366.282 210.29,356.827 210.29,346.378C210.29,341.211 209.241,336.287 207.346,331.808C203.218,322.009 196.759,314.576 187.416,310.072L154.513,296.497C160.228,294.395 166.401,293.247 172.84,293.247C202.164,293.247 225.971,317.054 225.971,346.378C225.971,375.701 202.164,399.509 172.84,399.509C151.773,399.509 133.553,387.22 124.963,369.426Z" fill="#621400"/>
</svg>

... though you can set that easier up inside ADe, if you set/change some fill color there for the curve/object layer ...

... which will add the the SVG generated path output then style="fill:rgb(5,249,64);".

Further adding/renaming in ADe the name for the curve layer, for example setting the layer name to "YourIcon (curves)" will give the object an ID when exporting it as SVG ...

Quote

<?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 500 500" 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;">
    <path id="YourIcon" d="M0.016,232.757C8.892,102.815 117.249,0.014 249.427,0.014C387.405,0.014 499.426,112.035 499.426,250.013C499.426,387.992 387.405,500.012 249.427,500.012C136.703,500.012 41.305,425.245 ...
...
187.416,310.072L154.513,296.497C160.228,294.395 166.401,293.247 172.84,293.247C202.164,293.247 225.971,317.054 225.971,346.378C225.971,375.701 202.164,399.509 172.84,399.509C151.773,399.509 133.553,387.22 124.963,369.426Z" style="fill:rgb(5,249,64);"/>
</svg>

... so you can reference that via it's ID name in HTML/CSS.

However, for what you want just setup some fill color accordingly and export the SVG then as "Flatten transform"!

 

[nickburnsap]

@v_kyr thanks for the reply! I tried to follow it the best I could but I still ended up with the same result.

 

^ in Affinity Designer (2) this is what my artboard is, just the artboard with the icon as a single curve. This is what it was before.

^ these were the exports, I ticked Flatten transforms as you suggested

^then injected the fill="#000000" at the end.

But it still only offers the opacity:

whereas the illustrator vector offers color and opacity.

I know part of this is that I don't know what Wix uses to grant the SVG "color" but my theory is that it just has to do with the SVG code right? At the end of the day that's all an SVG is right?

[nickburnsap]

WAIT I got it!

So I can't use the artboard, it has to be the curve itself.

I also have to remove the code about settings the style.

Add the fill like you suggested, and bingo, it works!