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

  • Thread starter daan
  • 1,302 comments
  • 214,105 views

MatskiMonk

Inebriated member
Premium
13,571
United Kingdom
Not so Great Britain
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!.
 

jrbabbitt

Premium
375
United States
Charleston, SC
jimybee
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.
thank you, but I am a Mac user and i dont know if Inkscape is compatible and SVGOMG either...
 
1,196
Australia
Australia
thank you, but I am a Mac user and i dont know if Inkscape is compatible and SVGOMG either...
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
 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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
 
1,196
Australia
Australia
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:
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:
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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.
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!
 
6
England
England
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

  • Pacman.svg
    927 bytes · Views: 9
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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.
I tried to upload it again after saving as an "Optimized SVG" as suggested, but had the same problem. Any ideas?
 
1,196
Australia
Australia
I tried to upload it again after saving as an "Optimized SVG" as suggested, but had the same problem. Any ideas?
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.
 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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.
Okay thanks, I'll try work through those workflows and see if I can find a solution! So frustrating!
 
109
Germany
Germany
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

 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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.
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

  • Menlo_white_inline.svg
    5 KB · Views: 5
1,196
Australia
Australia
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?

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

  • Menlo raw.svg
    9 KB · Views: 5
  • template.svg
    2 KB · Views: 3
  • Menlo.svg
    4.5 KB · Views: 4
  • Menlo_white_inline test.svg
    5 KB · Views: 4
Last edited:
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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.
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!
 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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
 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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.
 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
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
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. 🤷‍♂️
 
776
France
France
krisduv
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. 🤷‍♂️
don't select the groups to subtract, select the paths. And before, don't forget to combine all the letters in one path.
 
2,444
United Kingdom
Druids Bend
Z4E_Midnight85
Convert to a path, ungroup, select all, and unite to obtain a single path that you will be able to substraI
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!