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

  • Thread starter daan
  • 1,491 comments
  • 375,042 views
inri
thanks, i had a feeling it would be complicated. well, it's not essential to the design so it's no huge loss either way. i'll give that post a read, thanks
Click to expand...
A workaround in Inkscape (as I cannot code fix) remove gradient copy offending path delete original then paste in place make sure there is 100% opacity before adding new gradient do not even breathe on a node containing gradient after that
Found this when I combined paths of the letters in toyota to do a gradient the first o and a failed but the copied o worked so copied o and a replaced and presto it worked . Did not seem to like a path that had the original exclusion function acted upon it.
 
MatskiMonk
I use CorelDrawX3, it's old, but I'm familiar with it, and it writes simple SVG.
Click to expand...
Ok... did one scratch in Illustrator, weight ok, with white border... and when uploaded in GT server is completely black! hahaha this is madness. What's wrong? :banghead:🤬:mad:
 

Attachments

  • Hublot logo tests.zip
    55.5 KB · Views: 24
Pat_f40
Ok... did one scratch in Illustrator, weight ok, with white border... and when uploaded in GT server is completely black! hahaha this is madness. What's wrong? :banghead:🤬:mad:
Click to expand...

So I looked at "hublot bordo bianco 2.svg"

The issue is simple... there's two ways of sorting it...

1: The Codey Way

If you look in the XML you will see...

<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#FEFEFE;fill-rule:nonzero}
.fil2 {fill:#1D1D1D;fill-rule:nonzero}
.fil1 {fill:#1C1B17;fill-rule:nonzero}
]]>
</style>
</defs>

You need to delete the bits I've bolded... so it looks like this...

<defs>
<style type="text/css">
.fil0 {fill:#FEFEFE;fill-rule:nonzero}
.fil2 {fill:#1D1D1D;fill-rule:nonzero}
.fil1 {fill:#1C1B17;fill-rule:nonzero}
</style>
</defs>

GTS doesn't recognise CDATA tags, so it ignores everything in between... and every in between is the information for the colours of fills and lines... so it ends up just looking black.

2: The Easy Way

I notice you are using Corel 2017, but I'm going to assume it's mostly similar to my old version.... somewhere you'll see a Styling options Menu. In Corel X3 it comes up when you export as SVG... it looks like this in X3...

Coral.png


You need to make sure it's set to "Presentation Attributes", not Internal Style Sheet.

This means it won't use the CDATA tags at all, so you don't have to remove them in XML.

I personally actually always do the CDATA removal by hand because with more complex files, using internal stylesheets help keep the filesize down a bit. And I find the XML neater to look at... which matters to me!

edit: Ignore the bit where it says UTF-16, that should be UTF-8... and if you don't know what I'm on about now, ignore this too!
 
MatskiMonk
So I looked at "hublot bordo bianco 2.svg"

The issue is simple... there's two ways of sorting it...

1: The Codey Way

If you look in the XML you will see...

<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#FEFEFE;fill-rule:nonzero}
.fil2 {fill:#1D1D1D;fill-rule:nonzero}
.fil1 {fill:#1C1B17;fill-rule:nonzero}
]]>
</style>
</defs>

You need to delete the bits I've bolded... so it looks like this...

<defs>
<style type="text/css">
.fil0 {fill:#FEFEFE;fill-rule:nonzero}
.fil2 {fill:#1D1D1D;fill-rule:nonzero}
.fil1 {fill:#1C1B17;fill-rule:nonzero}
</style>
</defs>

GTS doesn't recognise CDATA tags, so it ignores everything in between... and every in between is the information for the colours of fills and lines... so it ends up just looking black.

2: The Easy Way

I notice you are using Corel 2017, but I'm going to assume it's mostly similar to my old version.... somewhere you'll see a Styling options Menu. In Corel X3 it comes up when you export as SVG... it looks like this in X3...

View attachment 714849

You need to make sure it's set to "Presentation Attributes", not Internal Style Sheet.

This means it won't use the CDATA tags at all, so you don't have to remove them in XML.

I personally actually always do the CDATA removal by hand because with more complex files, using internal stylesheets help keep the filesize down a bit. And I find the XML neater to look at... which matters to me!

edit: Ignore the bit where it says UTF-16, that should be UTF-8... and if you don't know what I'm on about now, ignore this too!
Click to expand...
Thanks a lot! This was really helpful! I'll try both ways and keep my noob trials :cheers::bowdown:
 
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...

Saving your file using "File>Save As>Optimized SVG" avoided the black shapes, anyway it only shows one gradient so maybe you scaled the other paths after the gradient was applied, maybe you didn't, who knows.
As workaround you need to reaply the gradient, make solid color the path you have problems with, later apply a gradient, if you need to apply the same gradient to another path, see this post.

Check it out in the gradients menu that all of them are unique, the # column shows how many times that gradient is used, if you see a 2 or a bigger number you'll have problems in GTS, the gradients # column should look like this one (marked in green)



Once you are done with the gradients and want to upload your file to GTS, first clean up your document, you can find it at "File>Clean up document", and now the most important, in order to be succesful, save your file using "save as optimized SVG", you can find it at "File>Save As>Optimized SVG", use these settings:



I see you used mm for the canvas size units and a scale different to 1, try to avoid that and use these page settings in red, you can find them at "File>Document Properties>Page



You can use 512x512 for square view, 1024x512 for landscape or 512x1024 for portrait orientation, these sizes are not mandatory but they are recommendable.

One last note, part of one of your paths is outside the canvas, you won't see in GTS anything that is outside the canvas.

I've attached the working file in a zip.
 

Attachments

  • 5_6 TEST.zip
    1.7 KB · Views: 57
eclipsee
Saving your file using "File>Save As>Optimized SVG" avoided the black shapes, anyway it only shows one gradient so maybe you scaled the other paths after the gradient was applied, maybe you didn't, who knows.
As workaround you need to reaply the gradient, make solid color the path you have problems with, later apply a gradient, if you need to apply the same gradient to another path, see this post.

Check it out in the gradients menu that all of them are unique, the # column shows how many times that gradient is used, if you see a 2 or a bigger number you'll have problems in GTS, the gradients # column should look like this one (marked in green)



Once you are done with the gradients and want to upload your file to GTS, first clean up your document, you can find it at "File>Clean up document", and now the most important, in order to be succesful, save your file using "save as optimized SVG", you can find it at "File>Save As>Optimized SVG", use these settings:



I see you used mm for the canvas size units and a scale different to 1, try to avoid that and use these page settings in red, you can find them at "File>Document Properties>Page



You can use 512x512 for square view, 1024x512 for landscape or 512x1024 for portrait orientation, these sizes are not mandatory but they are recommendable.

One last note, part of one of your paths is outside the canvas, you won't see in GTS anything that is outside the canvas.

I've attached the working file in a zip.
Click to expand...

understood this perfectly, thank you so much!

edit: here is a (low quality for some reason) scape example of the full complete decal in gt sport. I gave thanks for the help in the description ingame :-]

https://s3.amazonaws.com/gt7sp-prod/photo/92/70/57/6197617274023577092_0.jpg
 
Last edited:
I'm finding this all really really irritating. All I want is someone to say "go to this site and you can convert for free"
 
thefraggle
I'm finding this all really really irritating. All I want is someone to say "go to this site and you can convert for free"
Click to expand...
That site doesn't exist. There are sites you can pay for but, unless it's a really simple decal, you still need to edit it down to size, or remove the background, or edit it in some other way.
 
I'm going to start crying soon!!
It is starting to seem like this is only available to a few. Your everyday GTS player clearly isn't who was in mind when this was done.
 
Last edited:
thefraggle
I'm going to start crying soon!!
It is starting to seem like this is only available to a few. Your everyday GTS player clearly isn't who was in mind when this was done.
Click to expand...

There are limitations, but if you have access to a computer, it's functionality is available to all.

What type of thing do you want to create?
 
thefraggle
I'm going to start crying soon!!
It is starting to seem like this is only available to a few. Your everyday GTS player clearly isn't who was in mind when this was done.
Click to expand...
This image is a 67kb jpg and will go pixellated if you make it bigger.
Ecurie_Ecosse_Logo_(M-Car).jpg


This image is under 15kb and can go as big as you like with no loss in quality.


upload_2018-2-17_18-46-46.png


It is a bit of a no brainer to go vector. Better quality and saves on server space. And if there's something you want or need, you can always ask in the request thread. There are a lot of helpful people there.
 
thefraggle
I'm finding this all really really irritating. All I want is someone to say "go to this site and you can convert for free"
Click to expand...

there's a learning curve and depending on how complicated the logos you want to make are it can take a lot of time and effort but it's not so difficult in practise. I only decided I was going to learn how to do this stuff maybe 3 or 4 days ago myself. you just need a free program (inkscape), and maybe a youtube video to explain the basics. this was the one i watched

 
Greetings.
Well, I have a little problem using Inkscape. For the first time, I used it this morning, creating some easy text decals.
The problem is that they appear correctly on the gran turismo website:
a3dHZfb.png


But they are blank when I open My Library in-game:
DRwsGay.jpg


Any help?
 
Last edited:
Litchi
Greetings.
Well, I have a little problem using Inkscape. For the first time, I used it this morning, creating some easy text decals.
The problem is that they appear correctly on the gran turismo website:
a3dHZfb.png


But they are blank when I open My Library in-game:
DRwsGay.jpg


Any help?
Click to expand...

use Object to Path on the text. or alternatively take a screenshot of the text you want to use (this is good if you wanna use different fonts or something from a text generator website), paste it into inkscape and use trace bitmap and then delete the image you pasted in, either way works fine
 
Yeah !

got a little hang of it ! Downloaded inkscape at got started.

https://www.gran-turismo.com/nl/gts.../activities/decal/3918491/5044595711712166424
https://www.gran-turismo.com/nl/gts.../activities/decal/3918491/5053602900230570520
https://www.gran-turismo.com/nl/gts.../activities/decal/3918491/5053039961014568464

5053053157252268548_0.jpg


Really feeling like a boss now :yuck:. Allthough I am trying to tackle that eru prestige logo wich was over 500kb, found out about the layers, and did allready strip it a lot, but still... not quite done
 
Koutch_Pro
Yeah !

got a little hang of it ! Downloaded inkscape at got started.

https://www.gran-turismo.com/nl/gts.../activities/decal/3918491/5044595711712166424
https://www.gran-turismo.com/nl/gts.../activities/decal/3918491/5053602900230570520
https://www.gran-turismo.com/nl/gts.../activities/decal/3918491/5053039961014568464

5053053157252268548_0.jpg


Really feeling like a boss now :yuck:. Allthough I am trying to tackle that eru prestige logo wich was over 500kb, found out about the layers, and did allready strip it a lot, but still... not quite done
Click to expand...

Glad you're making progress.

Don't forget, it's not all about auto-trace.. somethings make for much crisper, more detailed decals, with smaller file sizes, when they're redrawn from a blank screen.
 
Just out of curiosity. This is to the ones of you out there who makes svgs with gradient. What applications are you using? I find that every time I try to add gradient to a decal it just ends up black in-game. Frustrating.
 
MatskiMonk
Glad you're making progress.

Don't forget, it's not all about auto-trace.. somethings make for much crisper, more detailed decals, with smaller file sizes, when they're redrawn from a blank screen.
Click to expand...

You are absolutely right, the "simple" logo's like diadora and usag is easy to just auto trace and done. The eru prestige one is very hard to do, thats probably something to draw from scratch (will have to learn that still).

That red dot logo looked easy to just auto trace, but had a lot of useles points in another layer, spotted that and deleted about 80% of them and tadaa. Its good fun learning the program and actually giving/sharing to other users is very satisfying.

That Sahlen logo is also layerd with a 3 colors, really have to learn how to manipulate all points etc so some colors can be erased.
 
Hi all,
I am using Inkscape, and each time I draw something with the pentool and make it larger in the livery editor, it becomes pixelated.
In Inkscape I can make it as big as I want, but once in GTS, its messed up. It only happens with things I draw with the pentool. Anyone knows why ?

Example :

ZRIxlq2.jpg
 
RealJaySee
Hi all,
I am using Inkscape, and each time I draw something with the pentool and make it larger in the livery editor, it becomes pixelated.
In Inkscape I can make it as big as I want, but once in GTS, its messed up. It only happens with things I draw with the pentool. Anyone knows why ?

Example :

ZRIxlq2.jpg
Click to expand...

If you take the photo in a Scape vs. the Livery Editor, does the same thing happen?
 
It happens if the decal is very long/big. It’s normal.

Still waiting for a reply on which program you guys are using for gradients! Still no success, they show as solid color in-game.
 
syntex123
It happens if the decal is very long/big. It’s normal.

Still waiting for a reply on which program you guys are using for gradients! Still no success, they show as solid color in-game.
Click to expand...

CorelDrawX3, with styles set to presentation attributes. Works all day, every day.
 

Latest Posts

Back