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

  • Thread starter Thread starter daan
  • 1,529 comments
  • 450,737 views
Been a while since I've had the time to be doing anything with liveries and decals, but, I'm taking it as a positive that people are still struggling with the uploader, it means new people are still trying it!.
 
Seebsma
According to inkscape, the fill color in all the paths available was undefined. After setting it to black and optimizing the file through SVGOMG, it finally appears in the game.
Click to expand...
thank you, but I am a Mac user and i dont know if Inkscape is compatible and SVGOMG either...
 
jrbabbitt
thank you, but I am a Mac user and i dont know if Inkscape is compatible and SVGOMG either...
Click to expand...
You can get the Mac dmg file for Inkscape HERE. SVGOMG can be used from your browser HERE.
By only using your file with SVGOMG and toggling on the option Prefer viewBox to width/height it then worked in GTSPORT. The left image was with the Prefer viewBox off (default for SVGOMG).
omg.png
 
Hey guys, any idea why the gradient in my decal just comes out as a solid black?

Looks like this in the uploader and in Inkscape:
Screenshot_20210518-170006_Chrome.jpg


But then like this in the editor:
20210517_210352.jpg
 
MidnightRun85
Hey guys, any idea why the gradient in my decal just comes out as a solid black?

Looks like this in the uploader and in Inkscape:


But then like this in the editor:
Click to expand...
1- make sure you are doing a save as and pick optimized svg in Inkscape. Needed for any gradients.
2-check that each gradient is separate. You can't make one and copy and flip it. If you did you can cut it then paste in place. To make sure it is treated as a separate gradient you can pick a color point and drop one of the color values down one then back up one.
Gradients should look like the right hand side and not the left.
grads.png


Because the gradients are symmetrical you could make one and clone it [alt] [D] . The clone can be flipped and moved, but do not push the clone below the original path or they become invisible.
 
Last edited:
Maninashed
1- make sure you are doing a save as and pick optimized svg in Inkscape. Needed for any gradients.
2-check that each gradient is separate. You can't make one and copy and flip it. If you did you can cut it then paste in place. To make sure it is treated as a separate gradient you can pick a color point and drop one of the color values down one then back up one.
Gradients should look like the right hand side and not the left.
View attachment 1011825

Because the gradients are symmetrical you could make one and clone it [alt] [D] . The clone can be flipped and moved, but do not push the clone below the original path or they become invisible.
Click to expand...
They are definitely two separate paths. I wanted to practice gradient manipulation so did them both manually. I'll try the optimised svg save option. Didn't know that was a thing!
 
As there doesn't seem to be a way to get the gaussian blur filter to work, I've found a pretty decent way to approximate the effect from https://css-tricks.com/how-to-add-a-double-border-to-svg-shapes/ which works pretty well with drop shadows (and the technique will probably come in handy elsewhere). However, it renders ok in a web browser, but I can't seem to get it to work properly in game (GT's SVG parser is pretty funky :confused:). Hopefully someone can take a look and come up with a solution.

Anyway, the trick is move the definition of your main "outline" shape to the <defs> region of the svg, and then reuse the same shape applying increasing stroke-widths to get a blur effect. Here's an example:

Code: 
<svg id="Pacman" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
  <defs>
    <path id="Outline" d="M399.069,348.739a170.626,170.626,0,1,1,0-185.48L256,256Z"/>
  </defs>
  <g id="DropShadow" fill="black" stroke="black" transform="translate(12 12)">
    <use xlink:href="#Outline" opacity="0.1" stroke-width="3"/>
    <use xlink:href="#Outline" opacity="0.1" stroke-width="6"/>
    <use xlink:href="#Outline" opacity="0.1" stroke-width="9"/>
    <use xlink:href="#Outline" opacity="0.1" stroke-width="12"/>
    <use xlink:href="#Outline" opacity="0.1" stroke-width="15"/>
    <use xlink:href="#Outline" opacity="0.1" stroke-width="18"/>
  </g>
  <g id="Pacman">
    <use xlink:href="#Outline" fill="#ffde00"/>
    <path id="Eye" fill="black" d="M260.641,127.822a21.085,21.085,0,1,1-21.105,21.084A21.095,21.095,0,0,1,260.641,127.822Z"/>
  </g>
</svg>

I'm not sure if someone has came up with the same solution previously, I'm new to the forums, so apologies if this is a duplicate post.

Cheers.
 

Attachments

Maninashed
1- make sure you are doing a save as and pick optimized svg in Inkscape. Needed for any gradients.
2-check that each gradient is separate. You can't make one and copy and flip it. If you did you can cut it then paste in place. To make sure it is treated as a separate gradient you can pick a color point and drop one of the color values down one then back up one.
Gradients should look like the right hand side and not the left.
View attachment 1011825

Because the gradients are symmetrical you could make one and clone it [alt] [D] . The clone can be flipped and moved, but do not push the clone below the original path or they become invisible.
Click to expand...
I tried to upload it again after saving as an "Optimized SVG" as suggested, but had the same problem. Any ideas?
 
MidnightRun85
I tried to upload it again after saving as an "Optimized SVG" as suggested, but had the same problem. Any ideas?
Click to expand...
Inkscape and gradients can be very quirky. Needs to be 100% opacity before adding a gradient. Make sure color blend mode is normal. If anything is moved after adding a gradient it can break. Either return color to a single one and reapply gradient, or select both gradients and use menu to copy. Delete them then use paste in place. Even sometimes I have had to remove gradients then replace with copies and finally give them new gradients. I think it was using the Exclusion option in paths that could wreak havoc.
If that does not work post your svg and I'll take a look at it.
 
Maninashed
Inkscape and gradients can be very quirky. Needs to be 100% opacity before adding a gradient. Make sure color blend mode is normal. If anything is moved after adding a gradient it can break. Either return color to a single one and reapply gradient, or select both gradients and use menu to copy. Delete them then use paste in place. Even sometimes I have had to remove gradients then replace with copies and finally give them new gradients. I think it was using the Exclusion option in paths that could wreak havoc.
If that does not work post your svg and I'll take a look at it.
Click to expand...
Okay thanks, I'll try work through those workflows and see if I can find a solution! So frustrating!
 
don't know if this is the right place to leave it but i recorded the process of how i optimize the decals i use. beginner friendly without too many shortcuts.^^

maybe some of you find it helpful. leave a like and i'll keep creating more in-depth tutorials. cheers

 
Maninashed
Inkscape and gradients can be very quirky. Needs to be 100% opacity before adding a gradient. Make sure color blend mode is normal. If anything is moved after adding a gradient it can break. Either return color to a single one and reapply gradient, or select both gradients and use menu to copy. Delete them then use paste in place. Even sometimes I have had to remove gradients then replace with copies and finally give them new gradients. I think it was using the Exclusion option in paths that could wreak havoc.
If that does not work post your svg and I'll take a look at it.
Click to expand...
Okay I've tried a bunch of things now and just can't get the gradients to process at all. Any chance you could take a look and let me know if you can spot what I've done wrong?
 

Attachments

MidnightRun85
Okay I've tried a bunch of things now and just can't get the gradients to process at all. Any chance you could take a look and let me know if you can spot what I've done wrong?
Click to expand...

To get a working decal I rebuilt it. Made it more simple so no shapes with the same color and multiple shared node positions are on top of each other. Maybe the optimization was corrupting something .

Check this post especially the last part on scale. Not sure if any part of the problem but I've had fewer hiccups since using it.

Included a working file and a raw pre Inkscape optimized one. I always work with non optimized file for adjustments and only use the optimized for use in GTSPORT. Also a template file that I use as default for a new document. This has the recommended document settings.
The gradient, Inkscape, GTSPORT combo can be a pig of a thing.

Edit: It was bugging me so I had another look. Using your file I selected 1 gradient. Raised opacity of the object to 100% (yours was 39.9%). Made the endpoint of gradient 39% opacity. Repeated for the other gradient. The file you uploaded was also sharing a gradient definition for both objects.
 

Attachments

Last edited:
Maninashed
To get a working decal I rebuilt it. Made it more simple so no shapes with the same color and multiple shared node positions are on top of each other. Maybe the optimization was corrupting something .

Check this post especially the last part on scale. Not sure if any part of the problem but I've had fewer hiccups since using it.

Included a working file and a raw pre Inkscape optimized one. I always work with non optimized file for adjustments and only use the optimized for use in GTSPORT. Also a template file that I use as default for a new document. This has the recommended document settings.
The gradient, Inkscape, GTSPORT combo can be a pig of a thing.

Edit: It was bugging me so I had another look. Using your file I selected 1 gradient. Raised opacity of the object to 100% (yours was 39.9%). Made the endpoint of gradient 39% opacity. Repeated for the other gradient. The file you uploaded was also sharing a gradient definition for both objects.
Click to expand...
I couldn't work out how to make the gradients separate. I thought they were separate, clearly not! I'm still learning, seems like I have a long way to go! Thank you so much for your help. Hopefully I'll be able to get my head around these little intricacies some day soon!
 
Hello guys. Does anyone know the best font match for the GTWC numbers? I want to make some custom versions using the same font but can't work out the best font match.

1625043282285.png
 
In Inkscape, how can you convert text into a format which allows you to subtract it from a background to turn it into a negative?? I've been able to convert logos and shapes into negatives, but can't work out how to get text to do the same thing.
 
Don't hesitate to insist, sometimes it needs to be done 2 times. I've juste tried to be sure, it works.

Menu Path > Object to path
 
Lomic
Don't hesitate to insist, sometimes it needs to be done 2 times. I've juste tried to be sure, it works.

Menu Path > Object to path
Click to expand...
Unsure what I'm doing wrong. I can make it into a path but then that won't subtract from anything to make a negative. 🤷‍♂️
 
MidnightRun85
Unsure what I'm doing wrong. I can make it into a path but then that won't subtract from anything to make a negative. 🤷‍♂️
Click to expand...
don't select the groups to subtract, select the paths. And before, don't forget to combine all the letters in one path.
 
Lomic
Convert to a path, ungroup, select all, and unite to obtain a single path that you will be able to substraI
Click to expand...
I think that's the issue - didn't know you needed to ungroup and unite into a single path. I'll try that out today!
 

Latest Posts

Back