Inline svg bric - changes to the svg code?

Hello forum!

I have just been using the inline svg bric for the first time and have a few questions.

I copy the svg from Affinity Designer and paste the code in the bric.

Here is the code (added a blank after each < in order to display the code here):
< svg width=“100%” height=“100%” viewBox=“0 0 26 28” version=“1.1” xmlns=“SVG namespace” xmlns:xlink=“XLink namespace” xml:space=“preserve” xmlns:serif=“http://www.serif.com/” style=“fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;”>
< g transform=“matrix(1,0,0,1,-21.3999,-14.1598)”>
< g id=“report”>
< g transform=“matrix(0.48651,0,0,0.434278,21.1049,14.088)”>
< g id=“report-sheet”>
< path id=“sheet” d=“M43.538,40.086L43.538,58.474C43.419,60.393 42.49,61.392 40.936,61.683L5.251,61.687C2.978,61.544 1.859,60.468 1.791,58.544L1.828,4.654C2.492,2.927 3.645,1.766 5.567,1.493L38.538,1.617L43.538,7.823L43.538,11.824L37.257,11.789C35.659,11.439 34.69,10.467 34.35,8.873L34.417,1.601” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.5px;”>< /path>
< /g>
< /g>
< g id=“report-graph” transform=“matrix(0.363331,0,0,0.363331,21.6521,19.4622)”>
< g transform=“matrix(1.20133,0,0,1.00302,45.2429,-37.7695)”>
< ellipse cx=“13.841” cy=“47.932” rx=“4.227” ry=“5.062” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.29px;”>< /ellipse>
< /g>
< g transform=“matrix(1.20133,0,0,1.00302,27.0599,-13.6461)”>
< ellipse cx=“13.841” cy=“47.932” rx=“4.227” ry=“5.062” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.29px;”>< /ellipse>
< /g>
< g transform=“matrix(1.20133,0,0,1.00302,11.5136,-23.8013)”>
< ellipse cx=“13.841” cy=“47.932” rx=“4.227” ry=“5.062” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.29px;”>< /ellipse>
< /g>
< g transform=“matrix(1.20133,0,0,1.00302,-4.56513,-0.861717)”>
< ellipse cx=“13.841” cy=“47.932” rx=“4.227” ry=“5.062” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.29px;”>< /ellipse>
< /g>
< g transform=“matrix(1.01552,0,0,1.01552,-0.526303,-0.356352)”>
< path d=“M15.651,41.844L24.761,29.255” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.5px;”>< /path>
< /g>
< g transform=“matrix(0.714581,0,0,1.10742,10.3541,-2.85143)”>
< path d=“M31.997,27.779L39.542,31.545” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.5px;”>< /path>
< /g>
< g transform=“matrix(1.01552,0,0,1.01552,-0.526303,-0.356352)”>
< path d=“M46.777,29.662L58.293,15.5” style=“fill:none;stroke:rgb(249,178,52);stroke-width:2.5px;”>< /path>
< /g>
< /g>
< /g>
< /g>
< /svg>

I can change the size of the svg in Blocs using the Width and Height field in the Scale section. However changing the values in the Fill or Stroke section does not affect the svg at all.

Sure, I could change the values in the svg code but I was wondering if there isn’t a quicker way of doing it. Do I need to delete some lines of code maybe?

Hi @area49
You do your own SVG in affinity designer ? And this is the code ?
How you get the code ? What app you use to open the svg and copy the code ?
tom

You can export as svg in Affinity Designer. SVG is just a text file with a .svg on the end. You can open them with a text editing app

1 Like

Yes, I do my own SVG in Affinity Designer and then simply select all layers, copy these and paste it in the inline SVG bric. No need to export them from Affinity Designer first.

1 Like

Have a look at Nucleoit’s a very handy free app for svg icon management.

You can change icon colours in it then right click to copy the code (with options for things like removing sizes, quite handy), rather having to open a file and copy the correct portion of the code.

Wow! That is the missing piece, indeed!
I love the functionality to remove inline colours and stroke width values.

Thank you so much!

Hi @PeteSharp and @area49
what I don’t understand:
When I use the code for example from a font awesome svg it works … I can change the values for example stroke …
But When I use the Code when I do a svg in affinity designer it is not working …
why ? :thinking:

That is unfortunately true. When you look at the code from my example above, which is taken from Affinity Designer, you will see that the width of the stroke is defined in the code, same for the colour values.

Apparently the inline SVG bric does not override this code.

I am currently playing around with Nucleo to see whether it can remove the code from my selfmade SVGs.

After a couple of hours playing around with it, my best guess is that this behaviour is due to Affinity Designer using different layers. While I can group layers I cannot merge vector layers (at least I have not found a way to do this). When copying or exporting the resulting SVG is keeping these layers together with the values for stroke width and colour.

Nucleo can remove the values for the uppermost layer but not for those below.
However when I imported a SVG from Affinity Designer I could at least change the colours within Nucleo.

Hello,
I also just tried changing a custom SVG file from Affinty Designer into using the Inline SVG Bric. I merged all the layers into one in Affinity Designer and expanded the outlines.

Unfortunately the Inline SVG Bric only changes the stroke and not the fill color. Have also used the icon without color, but unfortunately that did nothing either.

So far I have pasted the SVG as a photo and I was hopeful that the Inline SVG Bric would offer more options and flexibility.

Glad if there is a solution to this.

Here the Code of my Icon:

<?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 42 50" 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,-650,-650)">
        <g id="checkliste">
            <path d="M677.5,650L677.622,650.009L677.769,650.046L677.879,650.095L677.977,650.157L678.069,650.236C678.069,650.236 688.928,661.098 690.621,662.791C691.269,663.439 691.332,663.863 691.332,664.286L691.332,698.389C691.332,699.303 690.687,700 689.721,700C688.916,700 690.526,700 652.026,700C651.22,700 650.415,699.195 650.415,698.389C650.415,650.805 650.415,652.416 650.415,651.611C650.415,650.561 650.898,650 652.026,650C677.5,650 677.5,650 677.5,650ZM676.759,658.358L676.701,651.611L652.026,651.611L652.026,698.389L689.721,698.389L689.721,664.63L677.603,664.527C677.164,664.523 676.809,664.168 676.805,663.728L676.783,661.216L669.202,661.216C668.395,661.216 667.741,660.576 667.741,659.787C667.741,658.999 668.395,658.358 669.202,658.358L676.759,658.358ZM658.971,690.603L662.488,687.086C663.045,686.529 663.951,686.529 664.508,687.086C665.066,687.644 665.066,688.549 664.508,689.107L660.27,693.345C660.206,693.464 660.124,693.576 660.023,693.676C659.734,693.966 659.351,694.105 658.971,694.094C658.591,694.105 658.208,693.966 657.919,693.676C657.818,693.576 657.736,693.464 657.672,693.345L655.739,691.412C655.181,690.855 655.181,689.949 655.739,689.392C656.297,688.834 657.202,688.834 657.76,689.392L658.971,690.603ZM686.367,690.381C686.367,689.593 685.726,688.952 684.938,688.952L669.169,688.952C668.381,688.952 667.741,689.593 667.741,690.381C667.741,691.17 668.381,691.81 669.169,691.81L684.938,691.81C685.726,691.81 686.367,691.17 686.367,690.381ZM658.971,680.469L662.488,676.952C663.045,676.394 663.951,676.394 664.508,676.952C665.066,677.509 665.066,678.415 664.508,678.972L660.27,683.211C660.206,683.33 660.124,683.441 660.023,683.542C659.734,683.831 659.351,683.97 658.971,683.959C658.591,683.97 658.208,683.831 657.919,683.542C657.818,683.441 657.736,683.33 657.672,683.211L655.739,681.278C655.181,680.72 655.181,679.815 655.739,679.257C656.297,678.7 657.202,678.7 657.76,679.257L658.971,680.469ZM686.367,680.247C686.367,679.458 685.726,678.818 684.938,678.818L669.169,678.818C668.381,678.818 667.741,679.458 667.741,680.247C667.741,681.035 668.381,681.676 669.169,681.676L684.938,681.676C685.726,681.676 686.367,681.035 686.367,680.247ZM658.971,670.302L662.488,666.785C663.045,666.228 663.951,666.228 664.508,666.785C665.066,667.343 665.066,668.248 664.508,668.806L660.27,673.044C660.206,673.163 660.124,673.275 660.023,673.375C659.734,673.665 659.351,673.804 658.971,673.793C658.591,673.804 658.208,673.665 657.919,673.375C657.818,673.275 657.736,673.163 657.672,673.044L655.739,671.111C655.181,670.554 655.181,669.648 655.739,669.091C656.297,668.533 657.202,668.533 657.76,669.091L658.971,670.302ZM686.367,670.101C686.367,669.313 685.726,668.672 684.938,668.672L669.169,668.672C668.381,668.672 667.741,669.313 667.741,670.101C667.741,670.89 668.381,671.53 669.169,671.53L684.938,671.53C685.726,671.53 686.367,670.89 686.367,670.101ZM658.971,659.988L662.488,656.471C663.045,655.914 663.951,655.914 664.508,656.471C665.066,657.029 665.066,657.934 664.508,658.492L660.27,662.73C660.206,662.849 660.124,662.961 660.023,663.061C659.734,663.351 659.351,663.49 658.971,663.479C658.591,663.49 658.208,663.351 657.919,663.061C657.818,662.961 657.736,662.849 657.672,662.73L655.739,660.798C655.181,660.24 655.181,659.335 655.739,658.777C656.297,658.219 657.202,658.219 657.76,658.777L658.971,659.988ZM678.409,662.923L688.565,663.01L678.322,652.766L678.409,662.923Z" style="fill:rgb(0,183,229);"/>
        </g>
    </g>
</svg>

Hi @Speedy-Alex
Remove:

style="fill:rgb(0,183,229);"

and you’re good to go.

1 Like

@Jerry thank you very much. Now it works. You have certainly saved me several hours of trying :slight_smile: Thank you very much.

2 Likes