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

  • Thread starter daan
  • 1,491 comments
  • 375,181 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: 4
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: 4
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 | Now Six Months, 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 nano.svg
    9.8 KB · Views: 2
  • Sequential Gold 2 v3.svg
    11.4 KB · Views: 3
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:

Latest Posts

Back