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

[Devenhill]

I'll have a crack at if you like I've been doing text logos on Inkscape.

Very kind, but I don't want someone else to do it for me. I just want to know which of the 3 steps is making the very simple thing invisible in GT! I can't even get one word to appear, even though it shows fine in the uploader

 

[ghostrider135]

Very kind, but I don't want someone else to do it for me. I just want to know which of the 3 steps is making the very simple thing invisible in GT! I can't even get one word to appear, even though it shows fine in the uploader

Try
Path - Object to Path
Object - Ungroup
Path - Combine

That oughta work.

 

[graveltrap]

Very kind, but I don't want someone else to do it for me. I just want to know which of the 3 steps is making the very simple thing invisible in GT! I can't even get one word to appear, even though it shows fine in the uploader

Make sure you set the page size to be the same as the drawing as well can be done via Ctrl+shift+D which opens the page settings menu.

 

[Devenhill]

Try
Path - Object to Path
Object - Ungroup
Path - Combine

That oughta work.

Many thanks - I'll try tonight or I'll be late for work. By about 4 hours :-)

 

[the Interceptor]

Hey guys, I'm having some trouble with a logo I'd like to use. I have it as a SVG which looks fine on my computer as well as in the gran-turismo.com uploader:

(please note the color gradient from red/top to black/bottom within the segmented arrow)

This is what the game makes of it:

As you can see, the color gradient is gone. Instead, the arrow is fully red on the left side and fully black on the right side. The gradient's progress as well as its top-to-bottom direction have been lost.

Is this a general issue with using color gradients within decals in the game, or is it possible that the gradient code in the SVG is faulty to begin with? Thanks for your input!

EDIT: I'm using Adobe Illustrator CS6 in case it's relevant...

EDIT #2: Update:

Okay, I've tried to wrap my head around what a gradient looks like in code. I found that there are several ways to describe this gradient in code. I saw that this SVG files uses a quite complex way to describe the gradient by coordinates and a matrix:
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="118.0474" y1="497.665" x2="119.0474" y2="497.665" gradientTransform="matrix(-1.746667e-005 400.334 -400.334 -1.746667e-005 199630.3281 -47258.6445)">
<stop offset="0" style="stop-color:#EB222C"/>
<stop offset="0.736" style="stop-color:#231F20"/>
<stop offset="1" style="stop-color:#231F20"/>
</linearGradient>

In contrast, most code examples I found in the Internet use a more simple way with percentages:
<linearGradient id="SVGID_1_" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#EB222C"/>
<stop offset="73.6%" style="stop-color:#231F20"/>
<stop offset="100%" style="stop-color:#231F20"/>
</linearGradient>

So I manually changed the code of this SVG accordingly and double-checked it in Illustrator as well as in several browsers. It still opens fine and looks good. All browsers display the gradient just fine (with the previous file version, the gradient was broken in IE). Tomorrow I will try this manually adjusted SVG in the game and see whether this solves the issue. Belifant has reported that the support of gradients in the game is somewhat dodgy. My hope is that this 'simplest of gradient solutions' can solve this.

 

[Devenhill]

Try
Path - Object to Path
Object - Ungroup
Path - Combine

That oughta work.

Many thanks - it does! now if only I knew why :-) I don't like not knowing the theory. Should there only ever be one path in a svg?

 

[graveltrap]

Struggling with gradients as well, trying to get the Blancpain GT series UK flag into the game, it has 2 linear gradients and they just show up as black Looks like it will be a simple version with out the gradients that I use on the car...

 

[ghostrider135]

Many thanks - it does! now if only I knew why :-) I don't like not knowing the theory. Should there only ever be one path in a svg?

I couldn't say why because to me it makes zero sense to ungroup something to then combine it again. Thankfully im getting the hang of inkscape now so I won't be limited to just doing text only 👍

 

[MatskiMonk]

Struggling with gradients as well, trying to get the Blancpain GT series UK flag into the game, it has 2 linear gradients and they just show up as black Looks like it will be a simple version with out the gradients that I use on the car...

Gradients will work, I struggled with one, and in all fairness to GTS, it was because of the way Corel was writing the SVG files on export. I had to tweak the code manually in Notepad. If you post up the text from the file we can have a look to see if it's anything obvious.

 

[the Interceptor]

I can only speculate, but the deeper I dig into how an SVG works it looks to me like it is the interpretation of the file's text that does the trick. After all, an SVG file basically just is a string of XML commands. There are several ways to go (see my gradient example a few posts ago) for most of the things you see on the screen. I suppose that Gran Turismo Sport "speaks a quite specific language" in terms of XML, so any command which is not formatted the right way will be discarded by the game. And since XML is flexible, any passages not to be understood simply are ignored, so the file will still go through and technically be correct. Only it cannot be fully understood by the game.

That said, it seems that the different tools which we use to create, alter and save our SVG decals solve the desired tasks in different ways. So what you do in one software works in the game, doing the same thing with a different software fails in the game. The result may look the same to you, but the underlying code may be different because your software choses to do it in a different way.

If this is true, the goal is to figure out which commands do work in the game. This way we could make sure that our SVG files contain only these commands. Additionally, Polyphony might patch the livery editor to be a little more versatile in a future update, so we could meet in the middle. You never know...

 

[Belifant]

Struggling with gradients as well, trying to get the Blancpain GT series UK flag into the game, it has 2 linear gradients and they just show up as black Looks like it will be a simple version with out the gradients that I use on the car...

I get gradients working with no problem, but only when I create the gradient in and save it from Illustrator.

 

[graveltrap]

Gradients will work, I struggled with one, and in all fairness to GTS, it was because of the way Corel was writing the SVG files on export. I had to tweak the code manually in Notepad. If you post up the text from the file we can have a look to see if it's anything obvious.

No problem, the one I have been trying to upload has of course be optimised, as the file was a little too big, attached is the optimised code and the what inkscape exports as a plain SVG.

Easier to attach than post the text as SVGO version is just one long line I think...

Edit gradient Defs added.


id="defs2989">
<linearGradient
id="linearGradient4710">
<stop
id="stop4712"
style="stop-color:#000030;stop-opacity:1"
offset="0" />
<stop
id="stop4714"
style="stop-color:#0000c8;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4702">
<stop
id="stop4704"
style="stop-color:#000030;stop-opacity:1"
offset="0" />
<stop
id="stop4706"
style="stop-color:#0000c8;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4519">
<stop
id="stop4521"
style="stop-color:#090000;stop-opacity:1"
offset="0" />
<stop
id="stop4523"
style="stop-color:#090000;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4377">
<stop
id="stop4379"
style="stop-color:#ff0000;stop-opacity:1"
offset="0" />
<stop
id="stop4381"
style="stop-color:#000000;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient4371">
<stop
id="stop4373"
style="stop-color:#ff0000;stop-opacity:1"
offset="0" />
<stop
id="stop4375"
style="stop-color:#8c0000;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="281.7175"
y1="69.370384"
x2="546.93512"
y2="314.9996"
id="linearGradient4387"
xlink:href="#linearGradient4371"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0.04623504,1.0996987)" />
<linearGradient
x1="281.7175"
y1="69.370384"
x2="546.93512"
y2="314.9996"
id="linearGradient4389"
xlink:href="#linearGradient4377"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0.04623504,1.0996987)" />
<linearGradient
x1="605.71075"
y1="839.53845"
x2="520.0932"
y2="384.37079"
id="linearGradient4643"
xlink:href="#linearGradient4519"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.11498545,1.10756)" />
<linearGradient
x1="342.58643"
y1="551.81128"
x2="803.43024"
y2="551.81128"
id="linearGradient4708"
xlink:href="#linearGradient4702"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.16122049,0.00786134)" />
<linearGradient
x1="784.5777"
y1="417.59341"
x2="1081.98"
y2="417.59341"
id="linearGradient4716"
xlink:href="#linearGradient4710"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.16122049,0.00786134)" />
<linearGradient
x1="281.7175"
y1="69.370384"
x2="546.93512"
y2="314.9996"
id="linearGradient4718"
xlink:href="#linearGradient4377"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.11498545,1.10756)" />
<linearGradient
x1="281.7175"
y1="69.370384"
x2="546.93512"
y2="314.9996"
id="linearGradient4720"
xlink:href="#linearGradient4371"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.11498545,1.10756)" />

 

[Belifant]

Gradients will work, I struggled with one, and in all fairness to GTS, it was because of the way Corel was writing the SVG files on export. I had to tweak the code manually in Notepad. If you post up the text from the file we can have a look to see if it's anything obvious.

Would you mind looking at this one too? Simple box with a simple gradient from blue to red. GTS will only show black.

 

[the Interceptor]

Would you mind looking at this one too? Simple box with a simple gradient from blue to red. GTS will only show black.

Sorry for interfering, I hope this is okay for you!

I modified your demo file in two variants. Would you please try both in GT Sport and see if any of them works?

The "rgb" one is like the one you posted, but I deleted some commands within the gradient which shouldn't be necessary for the game. The "hex" one was cleaned up in the same way, but the color coding is in hex format instead of rgb. This may also be relevant.

 

[MatskiMonk]

@graveltrap @Belifant

I'll try and have a proper look later and I can't test anything at the moment.... but I'm wondering if it's got something to do with them containing gradientTransform instructions. I'm only suggesting this as all the successful gradients I've uploaded don't contain this element.

@Belifant if you changed

<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(167.692,0,0,167.692,7.10543e-15,83.846)">

to

<linearGradient id="_Linear1" x1="0" y1="0" x2="168" y2="0" gradientUnits="userSpaceOnUse">

and see if that works any better... (I'd also put the <defs></defs> after <!Doctype>, before you start defining objects... but that's just me.)

@graveltrap

There's so much going on with that, I don't know where to start. Looking at the optimised file it's using xlink elements and gradientTransform elements, so that might not help... it's also got a load of formatting in there for text. It's like you are applying lots of styles to all the objects that it doesn't need. I don't know how inkscape works, but it almost looks like a gradient is applied first, then tweaked to get it to look how it should. I know that's how you might work in the application, but it's like that workflow is being preserved in the SVG code.

In the SVGO the defs look like this:

<defs>

<linearGradient id="e"><stop offset="0" stop-color="#000030"/><stop offset="1" stop-color="#0000c8" stop-opacity="0"/></linearGradient>
<linearGradient id="d"><stop offset="0" stop-color="#000030"/><stop offset="1" stop-color="#0000c8" stop-opacity="0"/></linearGradient>
<linearGradient id="c"><stop offset="0" stop-color="#090000"/><stop offset="1" stop-color="#090000" stop-opacity="0"/></linearGradient>
<linearGradient id="b"><stop offset="0" stop-color="red"/><stop offset="1" stop-opacity="0"/></linearGradient>
<linearGradient id="a"><stop offset="0" stop-color="red"/><stop offset="1" stop-color="#8c0000" stop-opacity="0"/></linearGradient>

<linearGradient xlink:href="#c" id="f" x1="605.711" y1="839.538" x2="520.093" y2="384.371" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.115 1.108)"/>
<linearGradient xlink:href="#d" id="g" x1="342.586" y1="551.811" x2="803.43" y2="551.811" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.16 .008)"/>
<linearGradient xlink:href="#e" id="h" x1="784.578" y1="417.593" x2="1081.98" y2="417.593" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.16 .008)"/>
<linearGradient xlink:href="#b" id="i" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.115 1.108)" x1="281.717" y1="69.37" x2="546.935" y2="315"/>
<linearGradient xlink:href="#a" id="j" gradientUnits="userSpaceOnUse" gradientTransform="translate(-.115 1.108)" x1="281.717" y1="69.37" x2="546.935" y2="315"/>

</defs>

So it's defining a, b, c, d, e... then it's modifying them and calling them f, g, h, i, j. It's then only referring to the later ones in the style, this could be causing a problem if it doesn't work with xlink or gradientTransform.... in that case it simply might not think it has a style to apply to those elements.

Then.. nearly all the paths include styles for text, e.g.

style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Sans"

As GTS doesn't support text this could be confusing things too.

Also, it's got no viewBox elements... this might be because of optimisation, but on the odd occasion I've removed them, it's not displayed correctly... this could be having a problem too.


..... none of which answers your problems I know, but it could be because inkscape is just making a mess of the export. One of the possible benefits of using CorelDrawX3 as I do, is it's old so it doesn't try and do anything too clever with the SVG (but that doesn't always work either )

 

[graveltrap]

Thanks for taking a look,@MatskiMonk the code literally means nothing to me, I have no idea where the text stuff has come from it is not lI have used any is in the drawing!

It was a traced PNG, that I then removed a lot of layers and nodes, including several other gradients, it is probably a case of me doing something wrong, but hey that is learning for you

Maybe I also posted an “Inkscape SVG” file by mistake!

I shall try Vacuum Defs option in Inkscape again and see if that removes the unused stuff!

To be fair, the simple version in the game does the job well enough but it would be nice to be a little closer to the real thing

 

[Belifant]

Sorry for interfering, I hope this is okay for you!

I modified your demo file in two variants. Would you please try both in GT Sport and see if any of them works?

The "rgb" one is like the one you posted, but I deleted some commands within the gradient which shouldn't be necessary for the game. The "hex" one was cleaned up in the same way, but the color coding is in hex format instead of rgb. This may also be relevant.

@Belifant if you changed

<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(167.692,0,0,167.692,7.10543e-15,83.846)">

to

<linearGradient id="_Linear1" x1="0" y1="0" x2="168" y2="0" gradientUnits="userSpaceOnUse">

and see if that works any better... (I'd also put the <defs></defs> after <!Doctype>, before you start defining objects... but that's just me.)

Thank you both for checking. Unfortunately, all of these came in black in GTS. I didn't change the <defs></defs> though, I wasn't quite sure what to do there.

If it's of any use, this is the same gradient and box created in Illustrator, and this loads fine into GTS:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50.5" y1="500.5" x2="950.5" y2="500.5">
<stop offset="0" style="stop-color:#0000FF"/>
<stop offset="1" style="stop-color:#FF0000"/>
</linearGradient>
<rect x="50.5" y="50.5" style="fill:url(#SVGID_1_);" width="900" height="900"/>
</svg>

 

[Twstcrv]

I dont have system requirements for the adobe app. Is there another free app you can recommend?

 

[MatskiMonk]

Okay, sorry fellas. Just trying a few more things now I'm home and I can't really find a pattern yet that works consistently.

 

[Belifant]

I dont have system requirements for the adobe app. Is there another free app you can recommend?

My personal recommendation is Affinity Designer. Not free, but very reasonable and very good in my opinion.

 

[graveltrap]

Removed all the text garbage from the my SVG file by hand and it still displays the gradient as solid black. I was actually a little shocked it displayed anything TBH!!

 

[BarryB]

Is there an easy, low file size way of uploading text? Anything with 3 words (or more) seems to be impossible for me to get under 15kb without looking like it was written by a 2 year old.

 

[eclipsee]

I only could upload one decal with a gradient made in Inscape, and this only was successful using the "save as" -> "optimized SVG" option, it's the attached zip file, anyway, if you compare the SVG file in the zip with the one in GT Sport link it doesn't look exactly the same.

Now I'm drawing a BMW M logo with gradient colors but in GT Sport some parts are shown OK and others are black, this gradient issue is getting me mad.

 

[apple34]

Guys, I'm new to this stuff so pardon my ignorance. Do I have to find a picture that's 15kb or less and then convert it into .svg or is there an easy way to reduce size of a picture I want to use?

 

[the Interceptor]

Thank you both for checking. Unfortunately, all of these came in black in GTS. I didn't change the <defs></defs> though, I wasn't quite sure what to do there.

If it's of any use, this is the same gradient and box created in Illustrator, and this loads fine into GTS:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50.5" y1="500.5" x2="950.5" y2="500.5">
<stop offset="0" style="stop-color:#0000FF"/>
<stop offset="1" style="stop-color:#FF0000"/>
</linearGradient>
<rect x="50.5" y="50.5" style="fill:url(#SVGID_1_);" width="900" height="900"/>
</svg>

Thanks for your feedback on this!

The logo I manually changed earlier does work in the game, its gradient appears flawlessly now. I'll try some things with your demo gradient to see if I can find what makes it work.

EDIT #2:
So I've played around a lot with what works and what doesn't. I've found two issues with your original decal that always came out black. The first one is pretty simple once you've seen it. Here's a part of your code:

(...)
<rect x="0" y="0" width="167.692" height="167.692" style="fill:url(#_Linear1);"/>

<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(167.692,0,0,167.692,7.10543e-15,83.846)">
<stop offset="0" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="1" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
(...)

Check out the bolded parts. "rect" defines your rectangle in width and height, "style" asks to fill it with the gradient "_Linear1". But this gradient is only defined after this. It seems that the game works off the SVG files strictly line by line. So because the gradient you call for the rectangle has not been defined at this point, the game ignores this and gives you a fully default-colored = a black box. To solve this, simply move the complete "rect" line down below the complete "<defs>" block. Now when the rect is defined, "_Linear1" will be known so the filling will work (after fixing the second issue as well).

The second issue I found is a little trickier. To be honest I haven't fully absorbed the details of that yet. It has to do with the definition of the gradient:

<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(167.692,0,0,167.692,7.10543e-15,83.846)">
<stop offset="0" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="1" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>

There are several ways how to define where a greadient starts, where it stops and which direction it takes. All of this is in the bolded line. The issue is that the bolded code is a wild mix of using multipliers and space coordinates. Browsers can understand this, but the game can't, and I tend to agree because it is an unnecessarily complex solution to a simple issue. Here are some cleaned-up versions which will work in the game:

<linearGradient id="_Linear1" x1="0" y1="0" x2="167.692" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="1" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
(Matrix removed. The transformation the matrix was supposed to do was put into the fixed bolded value, these are user space coordinates)

<linearGradient id="_Linear1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
(The use of "user space" was removed. The previously used coordinates were replaced by more universal percentage values)

This latest simplified version of the file is attached.


EDIT:

Guys, I'm new to this stuff so pardon my ignorance. Do I have to find a picture that's 15kb or less and then convert it into .svg or is there an easy way to reduce size of a picture I want to use?

The resulting SVG file of whichever picture you'd like to use must be 15kb or less. How large your original file was is irrelevant. However, it is crucial to understand that SVG is a vector format. Basically, an SVG will describe the content of a picture in text. This text defines several types of lines, shapes, colors and gradients. If your picture is not very suitable to be easily described in this text format (XML), it can easily become larger than 15kb. If it is easy to describe (for example a single circle with one color), it will become very small. There are ways to simplify the description to bring down the file size of more complex shapes, but this can only do so much before the picture in SVG format starts to look odd.

 

[apple34]

Is there any reason why sometimes I get "failed reading file" error? I'm using adobe cc, the svgs I'm trying to upload are 15kb or less.

 

[Belifant]

Thanks for your feedback on this!

The logo I manually changed earlier does work in the game, its gradient appears flawlessly now. I'll try some things with your demo gradient to see if I can find what makes it work.

EDIT #2:
So I've played around a lot with what works and what doesn't. I've found two issues with your original decal that always came out black. The first one is pretty simple once you've seen it. Here's a part of your code:

(...)
<rect x="0" y="0" width="167.692" height="167.692" style="fill:url(#_Linear1);"/>

<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(167.692,0,0,167.692,7.10543e-15,83.846)">
<stop offset="0" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="1" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
(...)

Check out the bolded parts. "rect" defines your rectangle in width and height, "style" asks to fill it with the gradient "_Linear1". But this gradient is only defined after this. It seems that the game works off the SVG files strictly line by line. So because the gradient you call for the rectangle has not been defined at this point, the game ignores this and gives you a fully default-colored = a black box. To solve this, simply move the complete "rect" line down below the complete "<defs>" block. Now when the rect is defined, "_Linear1" will be known so the filling will work (after fixing the second issue as well).

The second issue I found is a little trickier. To be honest I haven't fully absorbed the details of that yet. It has to do with the definition of the gradient:

<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(167.692,0,0,167.692,7.10543e-15,83.846)">
<stop offset="0" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="1" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>

There are several ways how to define where a greadient starts, where it stops and which direction it takes. All of this is in the bolded line. The issue is that the bolded code is a wild mix of using multipliers and space coordinates. Browsers can understand this, but the game can't, and I tend to agree because it is an unnecessarily complex solution to a simple issue. Here are some cleaned-up versions which will work in the game:

<linearGradient id="_Linear1" x1="0" y1="0" x2="167.692" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="1" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
(Matrix removed. The transformation the matrix was supposed to do was put into the fixed bolded value, these are user space coordinates)

<linearGradient id="_Linear1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
(The use of "user space" was removed. The previously used coordinates were replaced by more universal percentage values)

This latest simplified version of the file is attached.

Fantastic, thank you so much! We are getting closer to solving gradient issues.

Question. I assume the coordinates are related to the artboard, and not the object? x1y1 is left bottom corner, and x2y2 is top right corner? In my sample, the gradient box is the same size as the artboard, so the coordinates are the same, but if the gradient object is somewhere else on the artboard, I guess it becomes quite difficult to figure out the correct coordinates? Or am I wrong?

 

[the Interceptor]

Fantastic, thank you so much! We are getting closer to solving gradient issues.

Question. I assume the coordinates are related to the artboard, and not the object? x1y1 is left bottom corner, and x2y2 is top right corner? In my sample, the gradient box is the same size as the artboard, so the coordinates are the same, but if the gradient object is somewhere else on the artboard, I guess it becomes quite difficult to figure out the correct coordinates? Or am I wrong?

Yes, the coordinates are in reference to the artboard (= user space), not in reference to the object. In your example both have the same size, but if you were to create a larger artboard around your rectangle, move the rectangle away from the original coordinates but keep the gradient the same, the gradient will change for the rectangle. Basically, the gradient is locked to the artboard. That said, I suppose there are ways to connect a gradient to an object instead.

One correction of your assumption: the reference point x1/y1 is the top left corner, x2/y2 is the bottom right corner.

EDIT:
Found it!

In the XML definition of the gradient, you can either bind the gradient to the artboard (user space) ...
<linearGradient id="_Linear1" x1="0" y1="0" x2="168" y2="0" gradientUnits="userSpaceOnUse">

... or to the object to which you then apply the gradient ...

<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">

However, I found that this change also requires different types of coordinates (as you can already see above. Using the artboard I can use pixel coordinates like "x2=168". Using the object as a reference, I had to use factors like "x2=1" (which means x2 = 100%) instead.

 

[dmcdonald]

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?

I may have found a solution (using Illustrator) that was causing my SVGs to look all scrambled. Instead of exporting as an SVG, I found I could "Save As..." an SVG and choose SVG 1.0 as the profile. That worked for me, maybe it will work for you too!

 

[Belifant]

Yes, the coordinates are in reference to the artboard (= user space), not in reference to the object. In your example both have the same size, but if you were to create a larger artboard around your rectangle, move the rectangle away from the original coordinates but keep the gradient the same, the gradient will change for the rectangle. Basically, the gradient is locked to the artboard. That said, I suppose there are ways to connect a gradient to an object instead.

One correction of your assumption: the reference point x1/y1 is the top left corner, x2/y2 is the bottom right corner.

EDIT:
Found it!

In the XML definition of the gradient, you can either bind the gradient to the artboard (user space) ...
<linearGradient id="_Linear1" x1="0" y1="0" x2="168" y2="0" gradientUnits="userSpaceOnUse">

... or to the object to which you then apply the gradient ...

<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">

However, I found that this change also requires different types of coordinates (as you can already see above. Using the artboard I can use pixel coordinates like "x2=168". Using the object as a reference, I had to use factors like "x2=1" (which means x2 = 100%) instead.

Hm I feel with real decals with gradients this will quickly become too complicated to edit manually. Or would you be able to solve this one, or even more complex than this?