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

[JamCar0ne]

So my decals keep coming up in the game like incomplete or look like they been partially erased with an online eraser... Can someone PLEASE help me? I'm trying to make custom made logos of my own design and put em in the game (Like made up racing team logos) but they keep appearing incomplete and unfinished.. I'm using Illustrator btw.

Not certain what you mean by partially erased, but here are a couple of things to check. If the image is too large (dimension wise) when saved, the upload will clip or crop one side of the image. Simply rescaling a little smaller and resaving/uploading has worked for me. The icon preview is helpful for this (I use Inkscape, but Illustrator should have a similar function). The other thing to check is if the missing bits are not a standard color and the background color is a similar shade, then the two shades are rendered as the same color and one layer appears to disappear. Someone else here may be able to shed more light on this, but that's what I think is happening.

 

[Mush_nz]

Strange, doesn't seem to be anything really wrong with them. There are some tiny shapes in there though which are not part of the design, but I don't see why they would be the problem. Maybe it's just how your software exports the svg?

Anyway, I did a quick clean up with two of them and saved them again. Try and see if they show up correct now.

Thanks, those two went through fine.

The only software I used was Adobe Illustrator as most of them were just hi-res bitmaps I found which I then ran through the SVGOMG website afterwards to optimise them all. :/

 

[Belifant]

maybe that website caused the problem. Illustrator should output a perfectly fine svg for GTS.

 

[fikridroid]

Wanna ask some question, can newer AI and EPS files be opened with other vector designing software such as Inkscape? I've already had the Illustrator CS6 but felt too lazy to spend money on timed/subscription CC version licenses lol

EDIT: AI files opens just fine in inkscape 0.92 but EPS files just thrown an error message
EDIT AGAIN: Download the Ghostscript extension here to open EPS files properly in inkscape https://www.ghostscript.com/download/gsdnld.html, select version that matches your current OS version. More concise guide to install below (from the Inkscape FAQ page)

How to open EPS files in Windows
Initially you need to find out where ps2pdf is on your machine or install it. It's in the Ghostscript lib directory, which is probably something like C:\Program Files\gs\gs9.09\lib.

If it is not installed you may find a current release of Ghostscript for Windows on their download page here.

Then you need to add this to the system Path in Environment Variables. To navigate there on Win XP, Vista, 7: Start button > Control Panel > System > Advanced > Environment Variables. In Windows 8.1/10, right-click on This PC, choose Properties > Advanced system settings > Advanced tab > Environment Variables. Scroll through the System variables in the bottom panel, and select Path, click Edit. In the ridiculously small edit box provided add a semicolon to the end of whatever is there at the moment, and then add C:\Program Files\gs\gs9.16\lib (or whatever it is on your machine). Note — There should be no space between the semicolon and C (the start of the path).

You will also need to add the Ghostscript bin directory after another semicolon to the system Path. (This will be the same as the lib directory, but ending in bin rather than lib — for example: C:\Program Files\gs\gs9.16\bin)

Note that updating to a new version of Ghostscript will install to a new \gs directory, but will not erase the old version subdirectory or update the Environment Variables.You'll need to delete the old directories and Environmental Variable paths if you want to make use of the newly installed version (with the new directory and paths). Also note that if you have a 64-bit system, and you install the 32-bit version of Ghostscript, the paths will be C:/Program Files (x86)/...etc., instead of C:/Program Files/...etc.

 

[Mush_nz]

maybe that website caused the problem. Illustrator should output a perfectly fine svg for GTS.

So do I have to run them through Illustrator again?

 

[syntex123]

Sorry for my absence.

maybe that website caused the problem. Illustrator should output a perfectly fine svg for GTS.

Not the auto trace, I noticed distorted logos too, with the ones I made first with the auto trace. Some were fine.. others were.. well. Distorted. I’m kinda happy I moved away from Illustrator.

 

[MatskiMonk]

So, finally got a PS4 yesterday, plugged it in, loaded up GTS, spent 3 hours downloading updates, then a couple of hours playing.. then gave the decal uploaded a whirl...

... only to find out the 120+ SVG's I have pre-made don't work!

... however, the solution to all my problems so far seems just to be to remove one of the tags that Corel puts in ( <CDATA[[ ]]>), which counters the Server Error problem. And removing all layer grouping seems to solve problems with them not showing up correctly. Fingers crossed, this weekend I should be able to crack on with the 40 or so liveries I've got planned!

If anyone else has had problems with Corel, I can explain further.

Lovin' GTS BTW... definitely has its limitations but as a base to expand on I think it's great.

 

[Belifant]

Just added a few of them here from that screenshot.

So do I have to run them through Illustrator again?

Could be worth a try. Or don't run it through those optimisation sites in the first place, I'm not sure what they do exactly, I avoid using them.

Not the auto trace, I noticed distorted logos too, with the ones I made first with the auto trace. Some were fine.. others were.. well. Distorted. I’m kinda happy I moved away from Illustrator.

Interesting. I wonder if the canvas size plays a role in this.

... however, the solution to all my problems so far seems just to be to remove one of the tags that Corel puts in ( <CDATA[[ ]]>), which counters the Server Error problem. And removing all layer grouping seems to solve problems with them not showing up correctly.

Yeah that's what I try to do before export, ungroup everything and combine as many layers as possible. Seems good practice, and also helps file size I noticed.

Do you see anything in this code that seems unnecessary and could be removed? And are you, by any chance, an expert in the "Even-odd / non-zero" problematic?

this is the svg I exported. It's a simple donut, meaning it has a large circle, and a smaller circle subtracted from it, so the small circle becomes a transparent hole in the big circle. In GTS, both circles are filled, so the hole is not there anymore:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M240,47.177C346.422,47.177 432.823,133.578 432.823,240C432.823,346.422 346.422,432.823 240,432.823C133.578,432.823 47.177,346.422 47.177,240C47.177,133.578 133.578,47.177 240,47.177ZM240,168.995C279.188,168.995 311.005,200.812 311.005,240C311.005,279.188 279.188,311.005 240,311.005C200.812,311.005 168.995,279.188 168.995,240C168.995,200.812 200.812,168.995 240,168.995Z" style="fill:rgb(187,78,78);"/>
</svg>

 

[MatskiMonk]

Yeah that's what I try to do before export, ungroup everything and combine as many layers as possible. Seems good practice, and also helps file size I noticed.

Do you see anything in this code that seems unnecessary and could be removed? And are you, by any chance, an expert in the "Even-odd / non-zero" problematic?

this is the svg I exported. It's a simple donut, meaning it has a large circle, and a smaller circle subtracted from it, so the small circle becomes a transparent hole in the big circle. In GTS, both circles are filled, so the hole is not there anymore:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M240,47.177C346.422,47.177 432.823,133.578 432.823,240C432.823,346.422 346.422,432.823 240,432.823C133.578,432.823 47.177,346.422 47.177,240C47.177,133.578 133.578,47.177 240,47.177ZM240,168.995C279.188,168.995 311.005,200.812 311.005,240C311.005,279.188 279.188,311.005 240,311.005C200.812,311.005 168.995,279.188 168.995,240C168.995,200.812 200.812,168.995 240,168.995Z" style="fill:rgb(187,78,78);"/>
</svg>

I'm far from an expert full stop! But, that looks pretty clean - the only thing I'd remove is DOCTYPE, I don't bother cleaning the SVG tag unless I'm desperate for bytes and it's too easy to delete something important by mistake.

As for why the fill isn't working as expected... I suspect it comes down to the way GTS interprets the path. In your example above I think the co-ordinates that generate the curves are absolute references. If I draw the same thing in Corel, for example, I believe it uses relative co-ordinates... so it tells the curve where to go from the last point. I suspect that this has a bearing on how GTS interprets the path, and therefore how it applies the even-odd rule. I suspect where peoples SVG's get confused, is an off shoot of GTS mixing up relative and abosolute co-ordinates... but that is a guess.

I haven't yet performed enough trial and error to guess more precisely, and I probably won't bother assuming Corel keeps behaving! My guess is GTS isn't as flexible at reading SVG 1.0 or 1.1 as it could be, but at the same time, looking at some of the SVG code people have posted here, some of them add some really messed up code, and there's clear differences in the way the code is formatted. Corel includes a style sheet in the file to avoided repeated use of the same formatting elements, for instance.

 

[Belifant]

I'm far from an expert full stop! But, that looks pretty clean - the only thing I'd remove is DOCTYPE, I don't bother cleaning the SVG tag unless I'm desperate for bytes and it's too easy to delete something important by mistake.

As for why the fill isn't working as expected... I suspect it comes down to the way GTS interprets the path. In your example above I think the co-ordinates that generate the curves are absolute references. If I draw the same thing in Corel, for example, I believe it uses relative co-ordinates... so it tells the curve where to go from the last point. I suspect that this has a bearing on how GTS interprets the path, and therefore how it applies the even-odd rule. I suspect where peoples SVG's get confused, is an off shoot of GTS mixing up relative and abosolute co-ordinates... but that is a guess.

I haven't yet performed enough trial and error to guess more precisely, and I probably won't bother assuming Corel keeps behaving! My guess is GTS isn't as flexible at reading SVG 1.0 or 1.1 as it could be, but at the same time, looking at some of the SVG code people have posted here, some of them add some really messed up code, and there's clear differences in the way the code is formatted. Corel includes a style sheet in the file to avoided repeated use of the same formatting elements, for instance.

thanks for your answer. It's all very mysterious at this point. In the software I use (Affinity Designer) I have the option to export with relative co-ordinates, but that didn't make a difference. Another possible solution I found was to reverse the curve. But that also didn't work for me. The only real solution I have found so far is to do the subtraction twice. Strangely though, the code doesn't look any different, just with some added co-ordinates for some extra points it created.

 

[MatskiMonk]

thanks for your answer. It's all very mysterious at this point. In the software I use (Affinity Designer) I have the option to export with relative co-ordinates, but that didn't make a difference. Another possible solution I found was to reverse the curve. But that also didn't work for me. The only real solution I have found so far is to do the subtraction twice. Strangely though, the code doesn't look any different, just with some added co-ordinates for some extra points it created.

The coordinates can be expressed in different ways, everytime you see a 'C' in that code it's defining a curve. If it's coded relative, you get one 'c' and then a lot more coordinates, it could be that the game doesn't consider the former as a closed path, and therefore disregards it for evenodd.

I wonder if it could be something as simple as whether the inner path is defined first or second in the code... in Corel the options are 'front minus back', or 'back minus front', and I think it therefore prioritizes one path over the other.... and likely what order it ends up exporting the SVG in. But I am guessing... it's a little finicky...

Logically, it's not closing paths despite the co-ordinates being in the same place... and my feeling is that's something to do with the sequence of the code, and I suspect that sequence is related to what order it's drawn in in the first place.

If I post a more detailed investigation later, it'll be because I've uploaded a bunch more decals today and they didn't work

 

[Belifant]

The coordinates can be expressed in different ways, everytime you see a 'C' in that code it's defining a curve. If it's coded relative, you get one 'c' and then a lot more coordinates, it could be that the game doesn't consider the former as a closed path, and therefore disregards it for evenodd.

I wonder if it could be something as simple as whether the inner path is defined first or second in the code... in Corel the options are 'front minus back', or 'back minus front', and I think it therefore prioritizes one path over the other.... and likely what order it ends up exporting the SVG in. But I am guessing... it's a little finicky...

Logically, it's not closing paths despite the co-ordinates being in the same place... and my feeling is that's something to do with the sequence of the code, and I suspect that sequence is related to what order it's drawn in in the first place.

If I post a more detailed investigation later, it'll be because I've uploaded a bunch more decals today and they didn't work

I hope so then

 

[Juan Domingo]

SVG Format not valid, any help? I edited the image with Illustrator, 14KB.

 

[Nepbox]

Sorry to burst in lads I need a bit of tech support in here.

I've done the following:
Saved with these definitions:
And this is what I get in game:

The decal shows up perfectly on the website's decal upload section, however in game I get a completely different result. Anyone have any ideas why this is happening?

 

[AdamA998]

Trying to recreate this car, have everything except the Naraya Font, I wish I could find it somewhere and upload it. I found some wings using the search, could use better ones but for now it doesn't look too bad.

 

[Flagmo-T]

Hey Guys.

SO i have converted a PNG to SVG, i have resized it, so it.s 12.5kb, it was exepted by the uploader and uploaded, on the PC the tumbnails looks right, and the file is in GT sports on the PS4, But It's empty or transparent, even it looks right on GTS - look at picture.

Do any of you have an idea of what is wrong. I could have done something wrong i just don't see what ?

 

[fikridroid]

Hey Guys.

SO i have converted a PNG to SVG, i have resized it, so it.s 12.5kb, it was exepted by the uploader and uploaded, on the PC the tumbnails looks right, and the file is in GT sports on the PS4, But It's empty or transparent, even it looks right on GTS - look at picture.

Do any of you have an idea of what is wrong. I could have done something wrong i just don't see what ?

You need to trace it first using illustrator or similar vector design software.

 

[Izain]

Now i have access to the uploader, I have started uploading some decals. My issue is that a lot of them from World Vector Logo have white square boxes around them!!

I have downloaded Inkscape - is there an easy way to get rid of the box or is it simply a case of 'cutting' around the decal??

Same here. Was getting nowhere searching IS tutorial for 'transparency' and the like.

So my decals keep coming up in the game like incomplete or look like they been partially erased with an online eraser... Can someone PLEASE help me? I'm trying to make custom made logos of my own design and put em in the game (Like made up racing team logos) but they keep appearing incomplete and unfinished.. I'm using Illustrator btw.

Am seeing similar things. Some look fine on the car but the preview thumbnails are mush or are cut off along one or more edges.

Almost starting to think this would be easier editing the xml by hand.....

 

[fikridroid]

Batch script to easily convert all vector to svg (not sure about cdr files tho)
https://gist.github.com/cmawhorter/c10cf2e9fd46e0b9fde3
Make sure to add your Inkscape installation path on System Environment variables first
https://community.spiceworks.com/ho...as-an-internal-or-external-command-in-windows

 

[ghostrider135]

Can anyone give me some tips for making just text logos in Inkscape literally just typing text, No matter what I try I can save them as svg and upload them to GT:S but they always come up blank.

 

[Max_HP]

Apologies if this has been asked before!

Now i have access to the uploader, I have started uploading some decals. My issue is that a lot of them from World Vector Logo have white square boxes around them!!

I have downloaded Inkscape - is there an easy way to get rid of the box or is it simply a case of 'cutting' around the decal??

There's an easy way to remove the white box(or any background) background in about 10 seconds if you have Adobe Illustrator.

 

[JamCar0ne]

Can anyone give me some tips for making just text logos in Inkscape literally just typing text, No matter what I try I can save them as svg and upload them to GT:S but they always come up blank.

You have to convert the text to outlines first. Select the text object and choose "Path / Object to Path" from the path menu.

 

[ghostrider135]

You have to convert the text to outlines first. Select the text object and choose "Path / Object to Path" from the path menu.

Holy crap thankyou so much it actually worked 👍

 

[Flagmo-T]

You need to trace it first using illustrator or similar vector design software.

Thanks Mate. I search Google on what Tracing svg is, and i found a solution. Hope it works, But thank you for clearing it up, i would never have found out myself..

 

[Doomotron]

What is the best free program for this?

Also, can someone send me a link to it?

 

[JamCar0ne]

What is the best free program for this?

Also, can someone send me a link to it?

Many are using Inkscape. You would have to read through the thread to see what other free programs folks are using. Maybe a list of programs would be a good addition to the OP @syntex123

 

[Belifant]

Sorry to burst in lads I need a bit of tech support in here.

I've done the following:
Saved with these definitions:
And this is what I get in game:

The decal shows up perfectly on the website's decal upload section, however in game I get a completely different result. Anyone have any ideas why this is happening?

Not so far, this seems to be a common problem and I don't think anybody has really figured out yet what causes it.

 

[Nepbox]

Not so far, this seems to be a common problem and I don't think anybody has really figured out yet what causes it.

Thank you for your response, it's reassuring to know that its not just me experiencing this issue. Maybe I should contact Polyphony directly about it.

 

[Belifant]

from the looks of if, the problem in your case could be clipping masks. Try to turn them into actual geometry.

 

[MatskiMonk]

@Belifant

So, I had a logo which sternly refused to render properly with regards to evenodd... I re-edited it, re-draw it, tried a few things an just could not get it to work... now I'm using a work around rather than messing around. For instance, in that doughnut shape you drew, instead of drawing it as an O, I'd draw it as a C, but just make sure the two open ends touched each other. Still looks like on O, but it means the inside is still technically recognised as part of the outside.

It's not ideal, but it only takes a few seconds, and it feels more productive that sitting and trying to figured out meaningless co-ordinates!