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=“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-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

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 @Malachiman 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.