User Decals - A Tutorial On How To Make .SVG (Request in separate thread)

  • Thread starter daan
  • 1,494 comments
  • 386,611 views
huff
Learning Affinity Designer, why will this svg not work in game, and vecta.nano will not even upload it to see if that would fix it. Can someone look at it and advise a beginner. It is a fill panel for the arrows on the Manthey/EMA 911 Le Mans 2024, and I need to make a bunch of them.
Click to expand...
At a guess... Matrix transform on the gradient, and the <defs> come after they're used.
 
MatskiMonk
At a guess... Matrix transform on the gradient, and the <defs> come after they're used.
Click to expand...
Ok, so it seems the setting I use to export writes the gradient in a way that is useless for gt7, but it shows up in svgomg etc. since I know almost zero about the text box for gradients, I started playing with output settings and found a few that output a decal I can use in vecta.nano to get them gt7 ready. Thanks, your comment pointed me in the direction of looking into the output quality.
 

Attachments

  • front arrow fill 3.svg
    809 bytes · Views: 10
huff
Ok, so it seems the setting I use to export writes the gradient in a way that is useless for gt7, but it shows up in svgomg etc. since I know almost zero about the text box for gradients, I started playing with output settings and found a few that output a decal I can use in vecta.nano to get them gt7 ready. Thanks, your comment pointed me in the direction of looking into the output quality.
Click to expand...
So this is the original code.

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 141 85" 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>
        <path d="M7.682,52.609C7.784,55.13 4.801,66.433 9.566,67.321C23.396,69.9 42.716,61.334 42.716,61.334L41.602,59.123L46.545,59.793C46.545,59.793 70.864,49.674 99.292,23.805C108.435,15.485 97.125,8.551 94.29,7.919C86.957,6.285 87.396,6.268 77.743,16.615C66.37,28.804 57.1,34.25 50.992,38.407C44.274,42.979 35.973,46.652 35.973,46.652L30.925,45.916L31.741,47.937C31.741,47.937 14.016,52.925 8.958,52.193C8.596,52.141 7.664,52.162 7.682,52.609Z" style="fill:url(#_Linear1);"/>
    </g>
    <defs>
        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(171.225,-97.0174,97.0174,171.225,-88.6142,121.047)"><stop offset="0" style="stop-color:black;stop-opacity:1"/><stop offset="1" style="stop-color:black;stop-opacity:0"/></linearGradient>
    </defs>
</svg>

The main offender will be this bit...

SVG: 
gradientTransform="matrix(171.225,-97.0174,97.0174,171.225,-88.6142,121.047)"

Matrix transforms don't work in gradients, so it's whatever you did to get rid of that, that worked.
 
huff
Learning Affinity Designer, why will this svg not work in game, and vecta.nano will not even upload it to see if that would fix it. Can someone look at it and advise a beginner. It is a fill panel for the arrows on the Manthey/EMA 911 Le Mans 2024, and I need to make a bunch of them.
Click to expand...
It uploaded for me.

IMG_0119.jpeg
 

Attachments

  • FrontArrowFill.svg
    1.3 KB · Views: 10
huff
Did you apply it to a car? In one version I made it looked good at this step but applied as a black shape. I thought I had it and replied here, but after work I found it was not fixed. I ended up doing the livery using transparencies and game supplied gradients.
Click to expand...
I’ve not been on GT7 today. I’ll let you know if or when I get on.

Edit…

Just got on and while it looks to upload ok on the site. In game it’s just one flat shape rather than a gradient!

IMG_0473.png
 
Last edited:
Gingerale
Might be interesting for some here:
affinity.serif.com

Affinity Free Trial | 7-Days, No Obligation

Subscription-free photo editing, page layout, graphic design and illustration apps for professionals. Try for free or buy for one low payment.
affinity.serif.com affinity.serif.com

Affinity has a 6 month free trial. I'm looking for Adobe alternatives and gonna try this one.
Click to expand...
I started using affinity Design 1 after vectornator scummed out and started limiting free access. It is quite good, but no auto trace. The ui takes a minute to get used to, but it’s manageable.
 
Yeah same for vectorizer.io which has an amazing autotrace function which outperforms Illustrator. I'm gonna use it for 6 months and then I'll decide.
 
How do you slice a path?

I am using Inkscape and I'm trying drawing a rectangle over the path I want to slice. Than I select both the path and the rectangle, click in Path / Division (I guess that's how it translates to English, using it in Portuguese here). In the end, nothing happens: the original svg I am trying to cut is intact.

Could somebody give me some input?
 
wowbaggerBR
How do you slice a path?

I am using Inkscape and I'm trying drawing a rectangle over the path I want to slice. Than I select both the path and the rectangle, click in Path / Division (I guess that's how it translates to English, using it in Portuguese here). In the end, nothing happens: the original svg I am trying to cut is intact.

Could somebody give me some input?
Click to expand...
Is the path you want to cut a single path and not a group?, I think division only like 2 paths.


Would be easier to see the file that refusing to be cut tbh.
 
I never touched gradients but now I know the struggle.
I tried everything in Illustrator:
JnB5Xus.png


but somehow only 1 part shows the gradient:

OAxdO1Q.jpeg


Who knows what I'm doing wrong??
 

Attachments

  • Sequential Gold 2 v3.svg
    11.4 KB · Views: 6
  • Sequential Gold 2 nano.svg
    9.8 KB · Views: 8
Gingerale
Who knows what I'm doing wrong??
Click to expand...
Try combining each of the letters into a single path (something like 'combine' I guess), then apply the gradient.

In the v3 file, the gradient is defined once, and used directly for the first letter, every other letter is assigned a different fill, but those fills just 'x-link' back to the first one - just with different co-ordinates - and I don't think 'x-link' works in GT.

edit: Also...

This is the gradient:

SVG: 
     <stop offset="0" stop-color="#876226"/>
      <stop offset="0" stop-color="#8a6527"/>
      <stop offset="0" stop-color="#b59441"/>
      <stop offset=".1" stop-color="#d4b754"/>
      <stop offset=".2" stop-color="#e8cc5f"/>
      <stop offset=".2" stop-color="#efd464"/>
      <stop offset=".2" stop-color="#f1d96c"/>
      <stop offset=".3" stop-color="#f7e781"/>
      <stop offset=".3" stop-color="#fbf08d"/>
      <stop offset=".4" stop-color="#fdf392"/>
      <stop offset=".5" stop-color="#fcf18f"/>
      <stop offset=".5" stop-color="#f9ec88"/>
      <stop offset=".5" stop-color="#f5e37c"/>
      <stop offset=".6" stop-color="#efd76a"/>
      <stop offset=".6" stop-color="#e8c754"/>
      <stop offset=".6" stop-color="#e8c753"/>
      <stop offset=".6" stop-color="#e3c251"/>
      <stop offset=".7" stop-color="#a17d32"/>
      <stop offset=".7" stop-color="#876226"/>
      <stop offset=".8" stop-color="#906b29"/>
      <stop offset=".9" stop-color="#95702b"/>
      <stop offset=".9" stop-color="#a37f32"/>
      <stop offset=".9" stop-color="#bb983d"/>
      <stop offset="1" stop-color="#dcbb4d"/>
      <stop offset="1" stop-color="#e8c753"/>

There are multiple colours at the same point (e.g. four at ".6" - I'm guessing that's happened when you've optimised it down to one decimal place accuracy, but it'll create harder 'lines' across the gradient.
 
Last edited:
Ok I have found a foolproof Illustrator way of creating working gradients.
Select all the shapes for the gradient
Apply the gradient
Go to Object -> Make Compound Path
Save as SVG with extra settings
CSS setings: Style attributes


This will work in GT7!
Im using Adobe in Dutch so might be slight language differences.
 
Last edited:
As mentioned above, I too am struggling with gradients in Affinity.
How can I create a simple linear gradient decal with this tool and upload it properly to GT7?
This is really frustrating as all the gradient fix methods available in Inkscape are not available in Affinity.

I don't have any knowledge of html etc so I'd like to find a way other than directly editing the svg file in wordpad if possible...
 
WanganDream
As mentioned above, I too am struggling with gradients in Affinity.
How can I create a simple linear gradient decal with this tool and upload it properly to GT7?
This is really frustrating as all the gradient fix methods available in Inkscape are not available in Affinity.

I don't have any knowledge of html etc so I'd like to find a way other than directly editing the svg file in wordpad if possible...
Click to expand...
Is there any way to create a compound path in Affinity?
 
Gingerale
Is there any way to create a compound path in Affinity?
Click to expand...
Do I understand you correctly, you want to make a hole in something(roughly said)?

Say you want to cut out this small brown one in the gray one.
Skjermbilde 2024-11-19 kl. 20.21.00.png


Select both layers, make sure the smallest is the top layer.
Skjermbilde 2024-11-19 kl. 20.21.15.png



These buttons will be your friend.
I'm not sure of all the terminology here, but I use those to either cut something out, add something, or merge shapes.
Skjermbilde 2024-11-19 kl. 20.22.48.png


Skjermbilde 2024-11-19 kl. 20.24.25.png

Just his the second button (subtract) and It should now only be one layer with a hole in it.

Sorry if I stated something obvious and did not help you at all, English isn't my first language and when I use Affinity I just do what I do, and don't know the name for what I do. :lol: (self taught is well taught they say. But I wish I knew the terminology for things as well :lol:)
 

Similar threads

daan
  • Sticky
GT7 SVG request thread.
182 183 184
Replies
6K
Views
393K
p78
p78

Latest Posts

Back