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

  • Thread starter daan
  • 1,491 comments
  • 375,181 views
My latest test proved that pretty much any gradient I create in Illustrator and edit in a text editor (just to add spread methods and modify the x1, y1, x2, y2 transforms for repeating or reflecting gradients) definitely render properly within GT Sport (modifying them to create off angle values are tricky though). I was able to modify the unedited Illustrator gradient in Inkscape to apply a more specific scale and rotation to my repeating gradient...and it still worked in game even though it laid out the code very differently (which is interesting considering if I tried creating the gradient in Inkscape, it would not render in game at all).

That all said, it's always possible that last night's GT Sport update changed things in to improve svg support in game. I didn't get a chance to look at my tests until this morning after the update.
 
Hi.. I just want to thank the people in this thread for the info they've provided, it helped me find my way around inkscape and upload my first decal. I actually didn't run into too many obstacles but the subject ended up being a lot of work (manually redrawn and 5 separate parts .__.). even so I'm happy with the results

here's the finished decal on the side of a samba bus: https://i.imgur.com/yez4m1o.jpg

and the original image I used for reference: https://i.imgur.com/VWaWX1w.jpg

I also have a question: is it at all possible to emulate the screen tone style of dithering effect seen in the reference picture and keep a low file size?
 
inri
I also have a question: is it at all possible to emulate the screen tone style of dithering effect seen in the reference picture and keep a low file size?
Click to expand...
Basic linear gradients with only two stops don't increase the file size a lot, if you use a lot of gradients and stops you'll reach quickly the 15 kb limit, even with few nodes, it depends on what you use.

In your decal, if you add a gradient in the eyes, the file size will incresase only few bytes.
Remember that you'll need two different gradients, one for each eye, otherwise an eye (or both) will appear black in game.
 
I'm not sure if this has been written here already, but I just figured out one simple way to make file sizes smaller without losing quality at all.

You can reduce the file size actually by making things bigger :eek: I scaled everything in my svg by 10000% and got the file size down by about 25% and zero change in quality. This is because there is no need for decimal separators in the svg file anymore. So scaling by 10000% means ".01" becomes "1", ".69" becomes "69" etc. :cool:
 
Hey guys, I've got the ol' blank decal problem. I've tried multiple SVG creators online, I've tried OMGSVG or whatever it's called, found that the game can't read <text> so tried converting JPEG into SVG via an online tool which made <path>. All result in the same thing. All I want is some text. Can't see any difference in the code compared to an SVG someone else posted. What's going on?
 
Matty28
Hey guys, I've got the ol' blank decal problem. I've tried multiple SVG creators online, I've tried OMGSVG or whatever it's called, found that the game can't read <text> so tried converting JPEG into SVG via an online tool which made <path>. All result in the same thing. All I want is some text. Can't see any difference in the code compared to an SVG someone else posted. What's going on?
Click to expand...
If you download Inkscape (free) you can create text with any fonts you have
then convert text to path then save use SVGOMG to shrink file if too big
Also remember to select all and resize page to selection
plenty of youtube video tutorials for inkscape that is where I started
 
routasielu
I'm not sure if this has been written here already, but I just figured out one simple way to make file sizes smaller without losing quality at all.

You can reduce the file size actually by making things bigger :eek: I scaled everything in my svg by 10000% and got the file size down by about 25% and zero change in quality. This is because there is no need for decimal separators in the svg file anymore. So scaling by 10000% means ".01" becomes "1", ".69" becomes "69" etc. :cool:
Click to expand...

Think I've touched on it in other threads - It definitely works in theory, but I've not really been able to put it into practice. If you can't scale things up enough to make the decimal redundant, and your application isn't smart enough to ignore superfluous decimals, this technique will simply make files bigger.

I've tested it before in CorelDraw - which granted I think I'm the only one here using it - the optimum combination was to draw the file within the bounds of an A4 page, then save with 1:1 drawing precision; with a test pattern this gave me a file size of 1.33kb, scaling up by 10000% gave a file size of 2.67kb... and adjusting the drawing precision to 1:100000 (which is the closest thing to decimal manipulation Corel), gave a file size of 3.06kb.
 
MatskiMonk
File not found in both cases.
Click to expand...
Damnit! Well don't ask me why, this morning I opened the 22Kb SVG file, noticed it was in layer + group, moved all the layer outside the group, and got a 8Kb file... this is madness, literally :banghead::irked::lol:
 
Pat_f40
Damnit! Well don't ask me why, this morning I opened the 22Kb SVG file, noticed it was in layer + group, moved all the layer outside the group, and got a 8Kb file... this is madness, literally :banghead::irked::lol:
Click to expand...

If you cut and paste the XML we might be able to explain why... don't suppose it matters that much if it works. 👍
 
I've noticed that sometimes the uploader won't show the image

upload_2018-2-12_13-53-54.png


bgt.PNG


But if you go ahead and upload it anyway, the game displays it fine.

This one is the Autoclub logo

mrkipling
Something a bit different. Ashley Force 2010 Funny Car livery. Big thanks to @daan for the Auto club logo.
View attachment 712222 View attachment 712223 View attachment 712224
Click to expand...

And this is the BGT number plate

Cytoria
May I say this one is a teamwork ? @daan helped me with the Abba decals and had already done the British GT badge and number plate. Thanks again !

View attachment 709774

This is the #88 Team Abba with Rollcentre AMG GT3 from the 2017 season. As the good shade of green chrome is not available yet, the closest I can use for the body is the liquid metallic green. Then started a long journey of masking, to recreate the black parts of the car and the thin grey outline. The result is a pretty bold and fun livery !

Link : https://www.gran-turismo.com/gb/gtsport/user/notifications/livery/1276435/1/8430840837091361800

View attachment 709781

View attachment 709775 View attachment 709776 View attachment 709778
View attachment 709779 View attachment 709780
Click to expand...
 
Maninashed
If you download Inkscape (free) you can create text with any fonts you have
then convert text to path then save use SVGOMG to shrink file if too big
Also remember to select all and resize page to selection
plenty of youtube video tutorials for inkscape that is where I started
Click to expand...
Thanks mate! Inkscape created one that worked and one that was still blank. I'll see if I can get the other to work but clearly you've pointed me on the right path!

Edit: found out what it was :)

transform="scale(0.96603955,1.0351543)

If anyone has blank svgs find & delete that and see if it appears.
 
Last edited:
I downloaded Inkscape. When i click Path, then click trace to bitmap, absolutley nothing happens.i reinstalled it and same thing happens. Any ideas? really annoying this is. Spent hours doing nothing,
 
lancia delta hf
I downloaded Inkscape. When i click Path, then click trace to bitmap, absolutley nothing happens.i reinstalled it and same thing happens. Any ideas? really annoying this is. Spent hours doing nothing,
Click to expand...
make sure the picture you want traced is selected (should show sizing arrows around what you need traced)then do your path. trace bitmap . tick the live preview box it will show the quality you will get. after clicking ok drag the scanned image off of your original.
 
Maninashed
make sure the picture you want traced is selected (should show sizing arrows around what you need traced)then do your path. trace bitmap . tick the live preview box it will show the quality you will get. after clicking ok drag the scanned image off of your original.
Click to expand...
And remember to delete the original.
 
eclipsee
Basic linear gradients with only two stops don't increase the file size a lot, if you use a lot of gradients and stops you'll reach quickly the 15 kb limit, even with few nodes, it depends on what you use.

In your decal, if you add a gradient in the eyes, the file size will incresase only few bytes.
Remember that you'll need two different gradients, one for each eye, otherwise an eye (or both) will appear black in game.
Click to expand...

Thank you for the advice. For some reason I imagined gradients would make the file size huge but I suppose theres no reason why it would
 
Maninashed
make sure the picture you want traced is selected (should show sizing arrows around what you need traced)then do your path. trace bitmap . tick the live preview box it will show the quality you will get. after clicking ok drag the scanned image off of your original.
Click to expand...
Thanks, but i did all of that. First time i loaded it up and ticked live box it gave me no preview. After that it simply would no longer open the diologue. Even after reinstalling it. I'm at a loss.

Edit: got it to work some how. When saving the the file size increases. Thats a battle i will have win after a good sleep.
 
Last edited:
eclipsee
Remember that you'll need two different gradients, one for each eye, otherwise an eye (or both) will appear black in game.
Click to expand...

Not necessarily. I don't know the equivalent function in inkscape, but if you 'weld' the two paths together (this doesn't change them visually), then apply the gradient, you only need to do it once for it to work on both (assuming you want the same gradient in both objects obviously)
 
daan
I've noticed that sometimes the uploader won't show the image
Click to expand...
Looks like there are three different renderers, the decal uploader, the one of your gallery and the one in game.

MatskiMonk
Not necessarily. I don't know the equivalent function in inkscape, but if you 'weld' the two paths together (this doesn't change them visually), then apply the gradient, you only need to do it once for it to work on both (assuming you want the same gradient in both objects obviously)
Click to expand...
You're right again. 👍

daan
In Inkscape it's Path > Combine
Click to expand...
Yep, with Path>Union you get the same results in this case too, although Combine and Union are slightly different.
 
Guys... I'm trying to vectorize this file, but the white border it's just disappearing using Inkscape... any guess? I've tried many tutorials and vectorizing options and results are extremely large and complex files or white border of the logo disappearing. Any guesses? Thanks!
 

Attachments

  • Hublot-logo-logotype-1024x728 bordo bianco.png
    Hublot-logo-logotype-1024x728 bordo bianco.png
    8 KB · Views: 21
Pat_f40
Guys... I'm trying to vectorize this file, but the white border it's just disappearing using Inkscape... any guess? I've tried many tutorials and vectorizing options and results are extremely large and complex files or white border of the logo disappearing. Any guesses? Thanks!
Click to expand...

Can't really help with your Inkscape woes, other than to suggest the remove background option might be why you're losing the white line, and depending on what trace method you use, it might be creating a lot of layers you can't see, on top of creating a lot of nodes you don't need.

Anyhow, In fiddling about I ended up redrawing it.. so this should get you going...

https://www.gran-turismo.com/gb/gtsport/user/decal/3518385/6052865456301179912
 
Hi .. I have a problem, this time it's related to gradients. I have a plain svg (or another version saved as an inkscape svg but they both cause the same problem) made in inkscape with 5 linear 2 point gradients in it. the file size is fine and it looks fine in the preview when i upload it to the gran turismo website, but ingame I only get a black silhouette. Looking online and in this thread I can see I'm not the only one with this problem, but all of the solutions seem to involve editing the xml (?) data in notepad. while i have no problem navigating inkscape and editing stuff when i can see the visual result, dealing with the underlying code is a little difficult for me.

here is the svg:

http://svgur.com/s/5_6

its 1 part of a 7 part decal which is why it doesn't look like much. it's about 8kb and i can problably move some of the black outlines to another file. would anyone be able to make this work in gt sport or explain a solution to me as though i've never seen computer code in my life (lol)?
 
inri
Hi .. I have a problem, this time it's related to gradients. I have a plain svg (or another version saved as an inkscape svg but they both cause the same problem) made in inkscape with 5 linear 2 point gradients in it. the file size is fine and it looks fine in the preview when i upload it to the gran turismo website, but ingame I only get a black silhouette. Looking online and in this thread I can see I'm not the only one with this problem, but all of the solutions seem to involve editing the xml (?) data in notepad. while i have no problem navigating inkscape and editing stuff when i can see the visual result, dealing with the underlying code is a little difficult for me.

here is the svg:

http://svgur.com/s/5_6

its 1 part of a 7 part decal which is why it doesn't look like much. it's about 8kb and i can problably move some of the black outlines to another file. would anyone be able to make this work in gt sport or explain a solution to me as though i've never seen computer code in my life (lol)?
Click to expand...

It is to do with the code... editing that would be a nightmare in this instance. Basically it's using x-link, which I believe doesn't work... @eclipse posted some good advice on drawing gradients in inkscape (link below).

User Decals - A Tutorial On How To Make .SVG (Request in separate thread)
 
MatskiMonk
Can't really help with your Inkscape woes, other than to suggest the remove background option might be why you're losing the white line, and depending on what trace method you use, it might be creating a lot of layers you can't see, on top of creating a lot of nodes you don't need.

Anyhow, In fiddling about I ended up redrawing it.. so this should get you going...

https://www.gran-turismo.com/gb/gtsport/user/decal/3518385/6052865456301179912
Click to expand...
Thanks a lot! Did you redraw with Inkscape or Ai? I did some scratch redrawing of non complex logos in Illustrator but I alwaal get over 30kb files..
 

Latest Posts

Back