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

  • Thread starter daan
  • 1,460 comments
  • 346,639 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!.
 
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...
 
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
 
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
 
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:
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!
 
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: 29
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?
 
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.
 
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!
 
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

 
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: 18
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: 17
  • template.svg
    2 KB · Views: 17
  • Menlo.svg
    4.5 KB · Views: 15
  • Menlo_white_inline test.svg
    5 KB · Views: 15
Last edited:
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!
 
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
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. 🤷‍♂️
 
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.
 
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!
 
Back