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

  • Thread starter daan
  • 1,494 comments
  • 387,075 views
Custom878
Tried Inkscape and Plain SVGs and it gave me the same thing.
Click to expand...

Plain SVG will most likely give you smaller files and less chance of it doing something in the XML that the Uploader doesn't like. Have you got a raster image embedded in the Inkscape file, or text?
 
To be specific, what I have is essentially a .dds file that's been chopped up, converted into a .png, compressed, and converted into an .svg in Inkscape. Not sure if there's anything in there that the uploader doesn't like.

I'll check the image again to see if anything weird is going on.
 
Custom878
To be specific, what I have is essentially a .dds file that's been chopped up, converted into a .png, compressed, and converted into an .svg in Inkscape. Not sure if there's anything in there that the uploader doesn't like.

I'll check the image again to see if anything weird is going on.
Click to expand...
Check out if you have a layer with that png image, you should remove it before saving the svg file.
 
Any of you got any advice on how to make gradients work in GT Sport through Inkscape?
Gradients just turn a flat black when uploaded, which is rather inconvenient for what I'm currently working on.

The only tutorial I've seen is for Illustrator, which doesn't really help my situation much.

Edit: Going through the pages here and there doesn't seem to be a surefire way to make gradients work with inkscape

2nd Edit: I Got it to work thanks to page 21.
 
Last edited:
I'm getting a real headache trying to figure out the gradient stuff myself, even after reading through the pages here. I definitely need help with this file.
 
syntex123
It just shows up as black with no gradient.. Meh.

Ah nice, thanks. I'll use yours then ;) I tried searching for it before beginning to make it but only one showed up and it looked like crap in-game. :P
Click to expand...

There's a number of ultimate reasons why it shows up black, but it's a consequence of the same thing. GTS doesn't understand the way the gradients are written in the XML and ignores them.
 
I've had mixed luck with gradients...basic ones associated with a shape seem to work fine even opacity. I was hoping to use spreadMethod "Repeat" or "Mirror" to tile gradients for higher detail patterns, but haven't been successful getting one that renders in game.

I've also been exploring svg symbols, but the game doesn't seem to support them either. File sizes would come down a LOT if we can use repeating symbols, patterns, and gradients in our files.
 
Hello guys,

I would be very gratefl f ayone can write step by step what to do to upload SVG file to GT Sport community. I upload thourgh the website my svg file and I can see it there but when I try to open it in the game there is only empty background.

I was trying to use SVGOMG but looks I do something wrong, maybe choosing something what should not be choosen.
 
Damianoo874
Hello guys,

I would be very gratefl f ayone can write step by step what to do to upload SVG file to GT Sport community. I upload thourgh the website my svg file and I can see it there but when I try to open it in the game there is only empty background.

I was trying to use SVGOMG but looks I do something wrong, maybe choosing something what should not be choosen.
Click to expand...

It's not the uploading that's causing you a problem, it's how you're making the file, and there's a number of things that might cause the problem. So it's really not that easy to tell you step by step. What program are you using to make the SVG files? Are you drawing them yourself, or are you using a trace function?

Edit: If it's the two logos you posted in the Request thread, I've posted the SRC one over in that thread. See if that works for you.
 
Last edited:
akira3d
I've had mixed luck with gradients...basic ones associated with a shape seem to work fine even opacity. I was hoping to use spreadMethod "Repeat" or "Mirror" to tile gradients for higher detail patterns, but haven't been successful getting one that renders in game.
Click to expand...
Repeat and mirror do work with gradients, at least with Inkscape, that's how I do the carbon pattern.

I've also been exploring svg symbols, but he game doesn't seem to support them either. File sizes would come down a LOT if we can use repeating symbols, patterns, and gradients in our files.
Click to expand...
If you mean svg symbols as font characters you need to convert them to path.
Repeating symbols and patterns will increase the file size a lot if you put a lot of them, it isn't the case of gradients though because there aren't more nodes.
 
eclipsee
If you mean svg symbols as font characters you need to convert them to path.
Repeating symbols and patterns will increase the file size a lot if you put a lot of them, it isn't the case of gradients though because there aren't more nodes.
Click to expand...

Glyph and Pattern tags can save code, but GTS doesn't support them.
 
MatskiMonk
There's a number of ultimate reasons why it shows up black, but it's a consequence of the same thing. GTS doesn't understand the way the gradients are written in the XML and ignores them.
Click to expand...

akira3d
I've had mixed luck with gradients...basic ones associated with a shape seem to work fine even opacity. I was hoping to use spreadMethod "Repeat" or "Mirror" to tile gradients for higher detail patterns, but haven't been successful getting one that renders in game.

I've also been exploring svg symbols, but the game doesn't seem to support them either. File sizes would come down a LOT if we can use repeating symbols, patterns, and gradients in our files.
Click to expand...

GTS appears to struggle with anything other than a simple 0 or 90 degree gradient. I've been trying to recreate the ARC Magic logo which has a 60 degree three colour gradient (Red-White-Green or [R-W-G]) accross the letters 'ARC'. I can recreate the logo fine on the computer and it shows up fine on the GT website but in the game results are mixed:

The first problem is that the game reverses the angle of the gradient so it shows up [G-W-R] - Easy fix, reverse the gradient from 60 deg to -60deg (sure it looks wrong in the library, but as long as its good in the game no problem).

Next it appears to set the origin point of the gradient wrong, cutting off most of the first colour (regardless of direction above) and having a bigger amount of the final colour resulting in [-W-GGG] or [-W-RRR] etc.

As I only needed the logo to appear small on the chosen car I ended up compromising (including losing some small text that doesn't even show up at the scale I require) and going with a simple 90 deg angle. This shows up exactly as intended and doesn't even require reversing for the game. Proving (??) one theory that GTS can't handle anything other than 0, 90 or 45 deg gradients.
 
BLiTZ
GTS appears to struggle with anything other than a simple 0 or 90 degree gradient. I've been trying to recreate the ARC Magic logo which has a 60 degree three colour gradient (Red-White-Green or [R-W-G]) accross the letters 'ARC'. I can recreate the logo fine on the computer and it shows up fine on the GT website but in the game results are mixed:

The first problem is that the game reverses the angle of the gradient so it shows up [G-W-R] - Easy fix, reverse the gradient from 60 deg to -60deg (sure it looks wrong in the library, but as long as its good in the game no problem).

Next it appears to set the origin point of the gradient wrong, cutting off most of the first colour (regardless of direction above) and having a bigger amount of the final colour resulting in [-W-GGG] or [-W-RRR] etc.

As I only needed the logo to appear small on the chosen car I ended up compromising (including losing some small text that doesn't even show up at the scale I require) and going with a simple 90 deg angle. This shows up exactly as intended and doesn't even require reversing for the game. Proving (??) one theory that GTS can't handle anything other than 0, 90 or 45 deg gradients.
Click to expand...

This would be an incorrect conclusion. GTS, in my experience, will work fine with linear gradients at any angle, as well as radial and linear gradients with padding or different mid-points.... but GTS does need it written cleanly and simply in the code. It doesn't like it when certain 'ways' of writing the code are used, and this depends more on the application you're using than anything else, though the tips posted earlier do help.

I'm still using Corel which does a good job of keeping the code simple, except for one minor thing - so every gradient I make I have to change a couple of little things in the code. It's only a 30 second job though.

The angle, and sequence, of a gradient should (in my experience) be set simply by the start and finish co-ordinates, with midpoints and colour changes set as colour stops. the resultant angle of the gradient is therefore simply only defined by differences in x and y values.

Edit, to clarify, your app is writing the co-ordinates of the gradient as it is initially applied. It then applies transformations to this to get it to look how you want. GTS doesn't work with these transformations, and so ignores them (if it relates to co-ordinates), or shows them as black (if it relates to styles). The result of that is that it applies a gradient, almost in its default state.

If you look at the SVG and you've got an x-link tag anywhere in the fill styles, it's a good sign your app is taking shortcuts that GTS won't like.
 
MatskiMonk
This would be an incorrect conclusion. GTS, in my experience, will work fine with linear gradients at any angle, as well as radial and linear gradients with padding or different mid-points.... but GTS does need it written cleanly and simply in the code. It doesn't like it when certain 'ways' of writing the code are used, and this depends more on the application you're using than anything else, though the tips posted earlier do help.

I'm still using Corel which does a good job of keeping the code simple, except for one minor thing - so every gradient I make I have to change a couple of little things in the code. It's only a 30 second job though.

The angle, and sequence, of a gradient should (in my experience) be set simply by the start and finish co-ordinates, with midpoints and colour changes set as colour stops. the resultant angle of the gradient is therefore simply only defined by differences in x and y values.

Edit, to clarify, your app is writing the co-ordinates of the gradient as it is initially applied. It then applies transformations to this to get it to look how you want. GTS doesn't work with these transformations, and so ignores them (if it relates to co-ordinates), or shows them as black (if it relates to styles). The result of that is that it applies a gradient, almost in its default state.

If you look at the SVG and you've got an x-link tag anywhere in the fill styles, it's a good sign your app is taking shortcuts that GTS won't like.
Click to expand...

I'll have a look at the code tonight and see if I can spot anything. Can the xlink tag be removed?

Still doesn't really explain why the same gradient applied at 60deg gets reversed and at 90deg is ok (thats the only change not moving shapes or anything else)??
 
Last edited:
BLiTZ
I'll have a look at the code tonight and see if I can spot anything. Can the xlink tage be removed?

Still doesn't really explain why the same gradient applied at 60deg gets reversed and at 90deg is ok (thats the only change not moving shapes or anything else)??
Click to expand...

xlink can't be removed without adding code in elsewhere, and that's varies between being tricky and impossible.

I promise it will be because of the way the XML is written to alter the angle of the gradient.

https://www.gran-turismo.com/gb/gts...llery/decal/decal/3518385/4972620505833046528

Two gradients at 180°, but the central one is tilted to whatever random angle matches the slant of the flag, they also all have non-default midpoints. I can post up the XML that makes that file tonight, hopefully that might show how simple the code should be.
 
I'll have a play tonight, I've just had a look at the code for the decal I've uploaded with the 90deg gradient. there is an xlink code but also a gradient transform code. I suspect neither are helping. What I'll try and do is apply the 60deg gradient in the software then remove the transform code and adjust the co-ordinates manually.

Edit: Just had a play at code level, took out the transform controls and adjusted the coordinates manually using % values. I'm still yet to get my head around each coordinate's function as entering obvious values didn't give the desired results and I can't seem to find a visual representation online, but with some trial and error I've managed to match the gradient I want. I've uploaded and will test the file in-game when I get home.

I did briefly drop the SVG into Illustrator and saw that angles are handled differently what was a 60deg angle in Autodesk Graphic was only a 30deg in Illustrator.
 
Last edited:
BLiTZ
I'll have a play tonight, I've just had a look at the code for the decal I've uploaded with the 90deg gradient. there is an xlink code but also a gradient transform code. I suspect neither are helping. What I'll try and do is apply the 60deg gradient in the software then remove the transform code and adjust the co-ordinates manually.

Edit: Just had a play at code level, took out the transform controls and adjusted the coordinates manually using % values. I'm still yet to get my head around each coordinate's function as entering obvious values didn't give the desired results and I can't seem to find a visual representation online, but with some trial and error I've managed to match the gradient I want. I've uploaded and will test the file in-game when I get home.

I did briefly drop the SVG into Illustrator and saw that angles are handled differently what was a 60deg angle in Autodesk Graphic was only a 30deg in Illustrator.
Click to expand...

Handling co-ordinates yourself is difficult, I've not really bothered to get my head around it fully.

The co-ordinates are X1, X2, Y1, Y2, with 1's being the start and 2's being the finish so, 0, 1, 0, 1 would give you a 45° line, with it's zero point colour in the bottom left, and it's final colour in the top right.... the gradient is then of course rendered perpendicular to that line, and the colour changes as the gradient travels along the line and reaches its defined 'stops'.

This is simple enough to comprehend, but once you start dealing with the long sequences of numbers in most SVG files, it becomes a nightmare.. Using percentages might make it more intuitive, but even then - to be honest I'm not sure when the co-ordinates are relative to the document, or the shape you're trying to apply it to --- I believe both can happen, depending on where/how the gradient is defined - but I've not tested that.
 
So this is the code from the Blancpain belgium flag...

4972620505833046528_1.png


Code: 
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32.6619mm" height="18.5551mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 11.4115 6.48283"
 xmlns:xlink="http://www.w3.org/1999/xlink">

 <defs>

  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="3.1733" y1="6.50159" x2="3.26198" y2="-0.0596746">
   <stop offset="0" style="stop-color:#1F1A17"/>
   <stop offset="0.180392" style="stop-color:#3F3B39"/>
   <stop offset="1" style="stop-color:#605D5C"/>
  </linearGradient>

  <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="7.60201" y1="6.53307" x2="7.69089" y2="-0.0450354">
   <stop offset="0" style="stop-color:#5A0000"/>
   <stop offset="0.180392" style="stop-color:#AC0000"/>
   <stop offset="1" style="stop-color:red"/>
  </linearGradient>

  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="7.80577" y1="4.1914" x2="3.45085" y2="2.24269">
   <stop offset="0" style="stop-color:yellow"/>
   <stop offset="0.94902" style="stop-color:#8F8D0B"/>
   <stop offset="1" style="stop-color:#1F1A17"/>
  </linearGradient>

 </defs>

  <path fill="url(#id1)" d="M9.47641 0.00524074l1.93509 0 -2.35215 5.08823c-0.268466,0.603489 -0.812489,1.25456 -1.87846,1.38936 -0.873736,0 -2.42863,-0.0238279 -3.2995,-0.0300818l2.91811 -6.44751 2.6769 0z"/>

  <path fill="url(#id0)"  d="M4.03792 6.45275c-1.07718,-0.00772136 -1.62725,0.00104815 -2.71439,-0.00918876 -1.68776,-0.0192859 -1.43586,-1.10045 -1.00531,-2.13333l1.13109 -2.71355c0.424186,-1.01768 1.27577,-1.60856 1.96727,-1.59144l3.38293 0 -2.76159 6.44751z"/>

  <path fill="url(#id2)" d="M6.81464 0.0011879c-0.97656,0.0534905 -1.74279,0.510343 -2.29869,1.37052 -0.602545,1.17298 -1.11778,2.37479 -1.69625,3.64242 -0.308994,0.926074 0.0444415,1.39526 1.07159,1.41993 1.04514,-0.0329118 1.83195,-0.530922 2.34673,-1.48163 0.754981,-1.59284 1.52341,-3.23909 2.30648,-4.95124 -0.655512,-0.00412272 -1.28604,0.00412272 -1.72986,0z"/>

</svg>

@BLiTZ it sounds like you might have sorted out your problem, but I said I'd post this, so I may as well for anyone who's interested.

3 bars on the flag, each with its own colour, and therefore it's own gradient.

Each gradient is defined in the code, between the <defs> tags (a.k.a. the definitions).

Each gradient has a horizontal and vertical start point, and end point (x1, x2, y1, y2). This is the line along which the gradient will follow. In the example above these positions are relative to the whole image, not just the bars of the flag.

The starting colour is stop offset="0", the final colour is stop offset="1"... you can add as many colours in between as you like... the positions may as well be percentages, 0 = 0% of the way along the gradient, 1 = 100% of the way along the gradient line... 0.180392 is basically 18% of the way along the gradient line.

4837446546786123792_1.png


This image (https://www.gran-turismo.com/gb/gts...gallery/all/decal/3518385/4837446546786123792) is made by this code...

Code: 
<svg width="12" height="4" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="G">
        <stop offset="0%" style="stop-color:red"/>
        <stop offset="20%" style="stop-color:brown"/>
        <stop offset="40%" style="stop-color:yellow"/>
        <stop offset="60%" style="stop-color:blue"/>
        <stop offset="80%" style="stop-color:green"/>
        <stop offset="100%" style="stop-color:purple"/>
      </linearGradient>
  </defs>
  <rect fill="url(#G)" x="0" y="0" rx="0" ry="0" width="12" height="4"/>
</svg>

So then when the defs are done, and the code starts detailing the curves/paths/lines/shapes, we just refer back to them as "fills"... this means you have to have something that says

Code: 
fill="url(#THEGRADIENTNAME)"

Where the gradient name is whatever its linearGradient id was.... in the flag example the gradient might be called id0... so we say fill="url(#id0)". Ignore the fact that the gradient call starts with URL... it's not like it's actually a URL.

note.png



If your gradients look like that in notepad... (because you can just use notepad to look at these things), then they will work, all day, every day...
 
Thanks for posting this. From what you said earlier and reading the SVG details on the W3 site I think I've got my head round it, and managed to get the logo as I want. (only issue I had at home was Mac OS's 'smart quotes' that kept put speech marks instead of a double apostrophe which corrupts the file)
 
eclipsee
Just come to the Inkscape side, you don't need to edit the XML code for gradients there, if I had to edit the XML code in this example ...

https://www.gran-turismo.com/es/gtsport/user/notifications/decal/3536029/6134567904076660752

... it would be a nightmare, but first I would need to know how to edit the XML code because I have no idea.
Click to expand...

Nice work.

Editing my old Corel XML is only a 30 second job, and strictly speaking I don't need to do it. It falls over because GTS decal uploader doesn't seem to like gradients being defined in embedded style sheets which is what Corel does by default. I could switch it to write the style into each path, which means I then wouldn't need to edit the XML -- but that leads to bigger file sizes, so I'm just used to doing it this way.

I'd actually assumed @BLiTZ was already using Inkscape?

I like the way inkscape handles tracing, and I like the way you have direct control over decimal accuracy, but I don't find it that easy to use and in my limited experience, the XML it chucks out is a mess - this shouldn't really bother me so long as it works, but it does :D
 
MatskiMonk
Nice work.

Editing my old Corel XML is only a 30 second job, and strictly speaking I don't need to do it. It falls over because GTS decal uploader doesn't seem to like gradients being defined in embedded style sheets which is what Corel does by default. I could switch it to write the style into each path, which means I then wouldn't need to edit the XML -- but that leads to bigger file sizes, so I'm just used to doing it this way.

I'd actually assumed @BLiTZ was already using Inkscape?

I like the way inkscape handles tracing, and I like the way you have direct control over decimal accuracy, but I don't find it that easy to use and in my limited experience, the XML it chucks out is a mess - this shouldn't really bother me so long as it works, but it does :D
Click to expand...

No, I'm currently using Autodesk Graphic (formally iDraw) on Mac OS. It's not great especially at combining shapes (circles seem to lose their shape very easily) but it was only £25 and at the time for the little vector stuff I actually made it did the job.

I learnt Macromedia FreeHand at uni and had a working copy until the year before last when my Snow Leopard MacBook Pro died (Freehand relies on Rosetta to run PowerPC emulation and wont run on newer Mac OS's without running versions of Snow Leopard Server on VMWare etc). I can't justify the money for Illustrator on my home computer at the moment and haven't been blown away by Affinity Designer (perhaps when then allow handles to snap to grid I might, bloody basic thing that they refuse to add), though for the money it's not a bad alternative. Gravit is another option but is online-only for the most part. EDIT: Tell a lie, Gravit has now released the desktop version of the app (its FREE too!!) for most platforms so I'll be giving that a try at some point!
 
MatskiMonk
Nice work.

Editing my old Corel XML is only a 30 second job, and strictly speaking I don't need to do it. It falls over because GTS decal uploader doesn't seem to like gradients being defined in embedded style sheets which is what Corel does by default. I could switch it to write the style into each path, which means I then wouldn't need to edit the XML -- but that leads to bigger file sizes, so I'm just used to doing it this way.

I'd actually assumed @BLiTZ was already using Inkscape?

I like the way inkscape handles tracing, and I like the way you have direct control over decimal accuracy, but I don't find it that easy to use and in my limited experience, the XML it chucks out is a mess - this shouldn't really bother me so long as it works, but it does :D
Click to expand...
Thanks. 👍

Everyone uses the software he/she is used to, and it's not easy to shift to another software due to the learning curve and the time spent on it, anyways once get used to, it becomes second nature, just like heel and toe downshifting as analogy.
The most counterintuitive graphic software I've used are Blender (shifting from 3DS Max) and Photoshop, both in another league and not specifically vector editor related, there's no steep learning curve with Inkscape if you compare to them.

Sweet days were those with Deluxe Paint for a Commodore Amiga where everything was easy but not so powerfull. :D

I'm still amazed on how freeware like Inkscape, Blender or Gimp can be so powerfull up to a point to rivalize with Illustrator, 3DS Max or Photoshop.

BLiTZ
No, I'm currently using Autodesk Graphic (formally iDraw) on Mac OS. It's not great especially at combining shapes (circles seem to lose their shape very easily) but it was only £25 and at the time for the little vector stuff I actually made it did the job.

I learnt Macromedia FreeHand at uni and had a working copy until the year before last when my Snow Leopard MacBook Pro died (Freehand relies on Rosetta to run PowerPC emulation and wont run on newer Mac OS's without running versions of Snow Leopard Server on VMWare etc). I can't justify the money for Illustrator on my home computer at the moment and haven't been blown away by Affinity Designer (perhaps when then allow handles to snap to grid I might, bloody basic thing that they refuse to add), though for the money it's not a bad alternative. Gravit is another option but is online-only for the most part. EDIT: Tell a lie, Gravit has now released the desktop version of the app (its FREE too!!) for most platforms so I'll be giving that a try at some point!
Click to expand...
@BLiTZ, there's Inkscape for OS X if you want to give it a try.
 
eclipsee
Thanks. 👍

Everyone uses the software he/she is used to, and it's not easy to shift to another software due to the learning curve and the time spent on it, anyways once get used to, it becomes second nature, just like heel and toe downshifting as analogy.
The most counterintuitive graphic software I've used are Blender (shifting from 3DS Max) and Photoshop, both in another league and not specifically vector editor related, there's no steep learning curve with Inkscape if you compare to them.

Sweet days were those with Deluxe Paint for a Commodore Amiga where everything was easy but not so powerfull. :D

I'm still amazed on how freeware like Inkscape, Blender or Gimp can be so powerfull up to a point to rivalize with Illustrator, 3DS Max or Photoshop.
Click to expand...

Got about 10 years using this same version of Corel, so like you say, not an easy shift to make.

For 3D, I went from Sketchup to Blender... that was a steep learning curve, so steep in fact that I've now not touched it in 18 months... just been too busy!

Still... a step up from OCP art studio on my C64! ;)
 
I just started using Illustrator CC (figured I'd use GT Sport as the excuse to finally learn it as I've had Adobe software going back to very early versions of Photoshop and have access to the full CC suite via work)...so I'm still trying to figure out native ways to generate optimal svg files from Illustrator to reduce my reliance upon svgomg. I also had a lot of fun learning svg code. The combination of outputting what seemed optimal from Illustrator and then making final edits in a text editor made me really excited until I saw that my edits didn't translate in game. Most of the gradients I have created in Illustrator have shown up as expected in game as long as I apply the gradient directly to the shape (in general, I have found that any fills I have applied to groups or layers has not translated in game). I'm pretty sure the gradient angle set in Illustrator has come across correctly. I can't say the same about my other attempts.

Thinking I might have more control over gradients in Inkscape, I started playing around with it with the idea I might be able to take something I already worked out in Illustrator and apply the relevant gradient tweaks (primarily repeating or reflecting fills, which I couldn't figure out how to do in Illustrator) in Inkscape (to minimize my need for editing the svg code directly). So far, any repeating gradient fills I've added in Inkscape have not shown up in game.
 
akira3d
Thinking I might have more control over gradients in Inkscape, I started playing around with it with the idea I might be able to take something I already worked out in Illustrator and apply the relevant gradient tweaks (primarily repeating or reflecting fills, which I couldn't figure out how to do in Illustrator) in Inkscape (to minimize my need for editing the svg code directly). So far, any repeating gradient fills I've added in Inkscape have not shown up in game.
Click to expand...

I suspect because they end up being coded with xlink attributes, which as far as I'm aware, don't work.
 

Similar threads

daan
  • Sticky
GT7 SVG request thread.
182 183 184
Replies
6K
Views
396K
ikon_313
ikon_313

Latest Posts

Back