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

[eclipsee]

So far, any repeating gradient fills I've added in Inkscape have not shown up in game.

If you upload a file here maybe we could help.

 

[akira3d]

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.

 

[Pat_f40]

Guys... I'm becoming crazy/mad trying to lower the weight of an SVG. It's 20Kb and I can't go below this, even with compressors. Any tips? I'm uploading SVG and Ai files so you can check 🤬 thanks!
https://file.io/i4ivEP
https://file.io/1hMebp

 

[MatskiMonk]

Guys... I'm becoming crazy/mad trying to lower the weight of an SVG. It's 20Kb and I can't go below this, even with compressors. Any tips? I'm uploading SVG and Ai files so you can check 🤬 thanks!
https://file.io/i4ivEP
https://file.io/1hMebp

File not found in both cases.

 

[inri]

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?

 

[eclipsee]

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?

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.

 

[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 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.

 

[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?

 

[Maninashed]

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?

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

 

[MatskiMonk]

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 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.

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.

 

[Pat_f40]

File not found in both cases.

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

 

[MatskiMonk]

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

If you cut and paste the XML we might be able to explain why... don't suppose it matters that much if it works. 👍

 

[daan]

I've noticed that sometimes the uploader won't show the image

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

This one is the Autoclub logo

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

And this is the BGT number plate

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

Spoiler: More pics

View attachment 709781

View attachment 709775 View attachment 709776 View attachment 709778
View attachment 709779 View attachment 709780

 

[Matty28]

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

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.

 

[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,

 

[Max_HP]

For those wanting to quickly shrink their file size in a jiffy,try this site https://kraken.io/web-interface
File size shrinking differs from 20-40% savings.

 

[Maninashed]

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,

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.

 

[MatskiMonk]

For those wanting to quickly shrink their file size in a jiffy,try this site https://kraken.io/web-interface
File size shrinking differs from 20-40% savings.

A quick test gave a more compact file than SVGOMG. Seems Kraken will re-write some paths where SVGOMG doesn't. Would have to try it on some more complex files to be sure.

 

[daan]

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.

And remember to delete the original.

 

[inri]

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.

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

 

[lancia delta hf]

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.

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.

 

[MatskiMonk]

Remember that you'll need two different gradients, one for each eye, otherwise an eye (or both) will appear black in game.

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]

Not necessarily. I don't know the equivalent function in inkscape, but if you 'weld' the two paths together

In Inkscape it's Path > Combine

 

[eclipsee]

I've noticed that sometimes the uploader won't show the image

Looks like there are three different renderers, the decal uploader, the one of your gallery and the one in game.

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)

You're right again. 👍

In Inkscape it's Path > Combine

Yep, with Path>Union you get the same results in this case too, although Combine and Union are slightly different.

 

[GTFan24]

im trying to upload this but its over 15kb. Help pls?

 

[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!

 

[MatskiMonk]

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!

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

 

[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)?

 

[MatskiMonk]

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)?

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)

 

[Pat_f40]

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

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..