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

  • Thread starter daan
  • 1,460 comments
  • 349,034 views
AntonPinigin
Good day to all. A question. Is it possible in inkscpape to set a different style for the stroke between two points?
Click to expand...
If you mean between two nodes on a path with more than two nodes then no. You could try a gradient on the stroke, or. Duplicate the object, turn off the fill color. Highlight the nodes you don't want the new stroke to be on and click this green highlighted button (below). Need to do it in two partial deletes if leaving only one segment. Change new stroke path style to suit.
segment.png

If you post a picture of what you are trying to make there maybe other suggestions to help.
 
Maninashed
If you mean between two nodes on a path with more than two nodes then no. You could try a gradient on the stroke, or. Duplicate the object, turn off the fill color. Highlight the nodes you don't want the new stroke to be on and click this green highlighted button (below). Need to do it in two partial deletes if leaving only one segment. Change new stroke path style to suit.
View attachment 940481
If you post a picture of what you are trying to make there maybe other suggestions to help.
Click to expand...

Clear. Sadness. Thanks for the answer.
 
I'm in need of some help. I've noticed that my custom decals are not true black on game. Searching a bit about it, I have found this.

So, if it isn't possible to get true black on custom decals, what would be the correct HSV for a black level that matches what the game maps to a SVG?

Or is there any way to get custom decals to show correctly?
 

Attachments

  • 1.png
    1.png
    70.6 KB · Views: 20
wowbaggerBR
I'm in need of some help. I've noticed that my custom decals are not true black on game. Searching a bit about it, I have found this.

So, if it isn't possible to get true black on custom decals, what would be the correct HSV for a black level that matches what the game maps to a SVG?

Or is there any way to get custom decals to show correctly?
Click to expand...
Nothing I know of can truly match the in game black. Either cut out the black in your decal so car paint shows. Or make a second decal of just the black showing, then recolor decal with livery select-able black.
One way to do the second method if your black is a single path.
1 delete all colors and paths below the black.
2 select all other paths above the black then use [path] [union] If you have any strokes, convert them to path before union.
3 The new single shape should still be highlighted, hold shift and select black as well. Use [path] [difference] Just the visible black should remain.
 
Maninashed
Nothing I know of can truly match the in game black. Either cut out the black in your decal so car paint shows. Or make a second decal of just the black showing, then recolor decal with livery select-able black.
One way to do the second method if your black is a single path.
1 delete all colors and paths below the black.
2 select all other paths above the black then use [path] [union] If you have any strokes, convert them to path before union.
3 The new single shape should still be highlighted, hold shift and select black as well. Use [path] [difference] Just the visible black should remain.
Click to expand...

In the end, I made new mask SVGs with the minimum black surface as possible because I realised it wouldn't be possible to match colors in the editor. With the new masks applied, covered the car with shapes from the game without too much issue. PD should fix this though, the difference between the blacks is really jarring, specially with gloss and matte decals.
 
Last edited:
This is just a little tutorial for using clones to make a logo with multiple stroke colors. Also handy if lettering overlaps the stroke area and if you have allot of lettering that requires the original lettering thickness. Sometimes using a copy and placing below it will make the file to big. This can also be used for shadow effects or multiple gradient effects like carbon fiber. This is for Inkscape but I assume other programs can clone.

Using the Lego logo as an example. Final result below if you want a look at it.
fin.png


1 Trace the white letters only or scan and keep just the white parts. Make sure it is ungrouped and combined into a single path.

2 Set both the fill and stroke colors to undefined. It should appear black. If either color is set the clone will keep that color and can't be changed. Do not move or resize original path after clones are made.

3 Make a clone of the lettering and set the stroke color to yellow. Increase to desired thickness. Set fill to none or black. *

4 Make another clone of original path (not the previous clone). Clones need to be above the original, so open the objects view box to make sure you select original path. All clones should show as a "use" object rather than a "path" object. The clones can be moved but original should stay put.

5 Set stroke to black and fill none or black. Set black stroke thickness to what you require.

6 Yet again make a clone of original path. Set fill to white and stroke to none.

7 Select all. Resize page and save. Use SVGOMG if required. ** and ***

* If your clone does not add stroke make sure your original path has a stroke thickness set above zero before making stroke color undefined.

** If the stroke appears corrupt in SVGOMG. Toggle the setting Round/rewrite paths.
stoke corrupt.png


*** ALL clones need to be above the original path to work in GTSPORT . So make sure the setting "Round/rewrite number lists" remains off.
crucial.png

The clones can be moved around resized stretched etc. Even with gradients. However try not to mess around with the original path as GTSPORT is very fussy.
The final file size may be larger than using just 3 colored paths in this example. But if you had 30 letters instead of 4 the file would still remain only slightly larger than just the original 30. Anything under 30-40 nodes for a clone may not save much.

Edit: Just checked - my original text is 56 nodes. SVGOMG precision3 = 3.54kb . With original lettering and no clones 3.18kb.
At precision1 in SVGOMG 3.52 and 3.16 . Roughly adds 0.12kb per clone.
 

Attachments

  • legofin.svg
    6 KB · Views: 28
Last edited:
MatskiMonk
edit: Ah, not sure about embedding.. hmmm...

Well, it looks like this... :D, not sure about how to post it here...



docs.google.com/spreadsheets/d/1LqpndUMCiVagQ67hkvi-GKhMZTt2650RpYGHC1kB4rA/edit?usp=sharing

Go to File menu and "make a copy" to use.
Click to expand...


Hi @MatskiMonk I can't thank you enough for that sheet.
It gives me the (false) impression of being good enough at doing gradients.
So I was going to use it to make a radial gradient but of course it can't work.

For a simple radial gradient:

<svg width="100%" height="100%" viewBox="0 0 1000 1000" 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:2;">

<defs>
<radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(253.635,5.76698e-14,-5.76698e-14,253.635,530.951,469.592)"><stop offset="0" style="stop-color:rgb(106,13,131);stop-opacity:0.85"/><stop offset="1" style="stop-color:rgb(191,35,233);stop-opacity:0.1"/></radialGradient>
</defs>

<g transform="matrix(1.97134,0,0,1.97134,-546.685,-425.726)">
<circle cx="530.951" cy="469.592" r="253.635" style="fill:url(#_Radial1);"/>
</g>

</svg>

I'm lost again, like the first time with linear gradients. I tried to copy/paste the coordinates cx/cy/r from the circle but it was a long shot. It worked in iEditor but not in GTS. I was probably not even close.
Is there any chance some equivalent sheet for radial gradients could be done without taking you too much time?
Or if it's easy to fix manually that would be perfect too.
 
krisduv
Hi @MatskiMonk I can't thank you enough for that sheet.
It gives me the (false) impression of being good enough at doing gradients.
So I was going to use it to make a radial gradient but of course it can't work.

For a simple radial gradient:

<svg width="100%" height="100%" viewBox="0 0 1000 1000" 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:2;">

<defs>
<radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(253.635,5.76698e-14,-5.76698e-14,253.635,530.951,469.592)"><stop offset="0" style="stop-color:rgb(106,13,131);stop-opacity:0.85"/><stop offset="1" style="stop-color:rgb(191,35,233);stop-opacity:0.1"/></radialGradient>
</defs>

<g transform="matrix(1.97134,0,0,1.97134,-546.685,-425.726)">
<circle cx="530.951" cy="469.592" r="253.635" style="fill:url(#_Radial1);"/>
</g>

</svg>

I'm lost again, like the first time with linear gradients. I tried to copy/paste the coordinates cx/cy/r from the circle but it was a long shot. It worked in iEditor but not in GTS. I was probably not even close.
Is there any chance some equivalent sheet for radial gradients could be done without taking you too much time?
Or if it's easy to fix manually that would be perfect too.
Click to expand...

I think the calculations are the same, it's basically just making sure it's doing things in the right order. I'll have a look later tonight.
 
Maninashed
This is just a little tutorial for using clones to make a logo with multiple stroke colors. Also handy if lettering overlaps the stroke area and if you have allot of lettering that requires the original lettering thickness. Sometimes using a copy and placing below it will make the file to big. This can also be used for shadow effects or multiple gradient effects like carbon fiber. This is for Inkscape but I assume other programs can clone.

Using the Lego logo as an example. Final result below if you want a look at it.
View attachment 949533

1 Trace the white letters only or scan and keep just the white parts. Make sure it is ungrouped and combined into a single path.

2 Set both the fill and stroke colors to undefined. It should appear black. If either color is set the clone will keep that color and can't be changed. Do not move or resize original path after clones are made.

3 Make a clone of the lettering and set the stroke color to yellow. Increase to desired thickness. Set fill to none or black. *

4 Make another clone of original path (not the previous clone). Clones need to be above the original, so open the objects view box to make sure you select original path. All clones should show as a "use" object rather than a "path" object. The clones can be moved but original should stay put.

5 Set stroke to black and fill none or black. Set black stroke thickness to what you require.

6 Yet again make a clone of original path. Set fill to white and stroke to none.

7 Select all. Resize page and save. Use SVGOMG if required. ** and ***

* If your clone does not add stroke make sure your original path has a stroke thickness set above zero before making stroke color undefined.

** If the stroke appears corrupt in SVGOMG. Toggle the setting Round/rewrite paths.
View attachment 949535

*** ALL clones need to be above the original path to work in GTSPORT . So make sure the setting "Round/rewrite number lists" remains off.
View attachment 949532
The clones can be moved around resized stretched etc. Even with gradients. However try not to mess around with the original path as GTSPORT is very fussy.
The final file size may be larger than using just 3 colored paths in this example. But if you had 30 letters instead of 4 the file would still remain only slightly larger than just the original 30. Anything under 30-40 nodes for a clone may not save much.

Edit: Just checked - my original text is 56 nodes. SVGOMG precision3 = 3.54kb . With original lettering and no clones 3.18kb.
At precision1 in SVGOMG 3.52 and 3.16 . Roughly adds 0.12kb per clone.
Click to expand...
Added to the first post.
 
krisduv
Hi @MatskiMonk I can't thank you enough for that sheet.
It gives me the (false) impression of being good enough at doing gradients.
So I was going to use it to make a radial gradient but of course it can't work.

For a simple radial gradient:

<svg width="100%" height="100%" viewBox="0 0 1000 1000" 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:2;">

<defs>
<radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(253.635,5.76698e-14,-5.76698e-14,253.635,530.951,469.592)"><stop offset="0" style="stop-color:rgb(106,13,131);stop-opacity:0.85"/><stop offset="1" style="stop-color:rgb(191,35,233);stop-opacity:0.1"/></radialGradient>
</defs>

<g transform="matrix(1.97134,0,0,1.97134,-546.685,-425.726)">
<circle cx="530.951" cy="469.592" r="253.635" style="fill:url(#_Radial1);"/>
</g>

</svg>

I'm lost again, like the first time with linear gradients. I tried to copy/paste the coordinates cx/cy/r from the circle but it was a long shot. It worked in iEditor but not in GTS. I was probably not even close.
Is there any chance some equivalent sheet for radial gradients could be done without taking you too much time?
Or if it's easy to fix manually that would be perfect too.
Click to expand...

Okay, so, might not be as simple as I first thought. The Matrix transform calculations in the spreadsheet provided move co-ordinates. The r value in the gradient def is not a co-ordinate, it's just a value.. so I don't know how the maths works.

Secondly, in the code you provided, the circle is part of a group that also has a matrix transform... this is matrix transform-ception as far as I'm concerned, and even testing it is a PITA for me unless you get rid of that 2nd transform.

Thirdly... the co-ordinates given include exponents. I'm not sure if this affects the result the sheet will give.


... having said all that... I've added a section on the sheet to try it... it works like before. I've had to assume that the radius of the gradient is equal to the width of the circle the gradient occupies, this gives me an r value ignoring it's not a co-ordinate... but that might not work.

Try it, let me know how you get on. I suspect I might be missing an easy trick, I also suspect there might be something more complex I'm missing.
 
Thank you for taking the time! I'll try it tomorrow. PS4 is off and I need some rest before reading 10 times your post :)
 
MatskiMonk
Okay, so, might not be as simple as I first thought. The Matrix transform calculations in the spreadsheet provided move co-ordinates. The r value in the gradient def is not a co-ordinate, it's just a value.. so I don't know how the maths works.

Secondly, in the code you provided, the circle is part of a group that also has a matrix transform... this is matrix transform-ception as far as I'm concerned, and even testing it is a PITA for me unless you get rid of that 2nd transform.

Thirdly... the co-ordinates given include exponents. I'm not sure if this affects the result the sheet will give.


... having said all that... I've added a section on the sheet to try it... it works like before. I've had to assume that the radius of the gradient is equal to the width of the circle the gradient occupies, this gives me an r value ignoring it's not a co-ordinate... but that might not work.

Try it, let me know how you get on. I suspect I might be missing an easy trick, I also suspect there might be something more complex I'm missing.
Click to expand...

Now I feel bad for wasting your time.
I'm sorry for the file I shared. I don't know where the 2nd matrix comes from.
I've tried your sheet (btw, it's on view only but I understand how you reported coordinates) and it didn't work unless I delete the 2nd matrix, but then the gradient was smaller.
So I've saved again the (same) file and I didn't get the same code at all. I don't know what box I've checked yesterday to get that.
No 2nd matrix, and much simpler coordinates (500,500,500). Of course, didn't have to use your sheet and I don't know for more complex radial gradients, but for easy ones, editing directly is not beyond my reach.
Thank you again :)
 
Hi guys if someone has the time for some advise it would be appreciated.

Is it possible to use the pattern effect on a shape. Ive applied a strip pattern to shape and removed stroke but when uploaded to GTSport its shows as a full shape.

Is it a feature supported or is there a trick I'm missing?

Cheers.
 
Azabear6
Hi guys if someone has the time for some advise it would be appreciated.

Is it possible to use the pattern effect on a shape. Ive applied a strip pattern to shape and removed stroke but when uploaded to GTSport its shows as a full shape.

Is it a feature supported or is there a trick I'm missing?

Cheers.
Click to expand...

It would be "easier" to help with the svg ;)
 
krisduv
It would be "easier" to help with the svg ;)
Click to expand...

Hi mate thank you for responding. Its not a specific svg I need help with. I'm trying to get together a collection of them for a design idea. Still learning inkscape My issue is I can apply the pattern as opposed to the gradient or fill option but does not work in game. I'm trying to get a striped shape much like the reflected gradient option but straight lines.

Cheers
 
Last edited:
Azabear6
Hi mate thank you for responding. Its not a specific svg I need help with. I'm trying to get together a collecting of them for a design idea. Still learning inkscape My issue is I can apply the pattern as opposed to the gradient or fill option but does not work in game. I'm trying to get a striped shape much like the reflected gradient option but straight lines.

Cheers
Click to expand...

I don't really use Inkscape but I tried to create a simple shape filled with a pattern and I can't even open it in another vector software.
I think it's a job for @MatskiMonk and/or @Maninashed :)
 
Hello everyone, I am having some issues transferring a decal I made into GTS. There is a gradient on the decal and it appears correct in the preview box when uploading the decal:
Screenshot (357).png


However, when I open up personal decals in the game, there is no gradient. Instead, the shape is filled with black (though the white stroke still remains). Does anyone know why this is occurring, and how I can fix it?

I made the decal in Inkscape by hand-tracing, but this is my first time using gradients, so I might have made a mistake or poor design. I've attached the file below, too.
 

Attachments

  • Fern_Outline_Gradient.svg
    8 KB · Views: 13
LEGODUDE2017
Hello everyone, I am having some issues transferring a decal I made into GTS. There is a gradient on the decal and it appears correct in the preview box when uploading the decal:
View attachment 960988

However, when I open up personal decals in the game, there is no gradient. Instead, the shape is filled with black (though the white stroke still remains). Does anyone know why this is occurring, and how I can fix it?

I made the decal in Inkscape by hand-tracing, but this is my first time using gradients, so I might have made a mistake or poor design. I've attached the file below, too.
Click to expand...
Did you try before saving your file to cut/paste the gradients? And did you save it using "optimized svg" (or something like that)?
I don't use Inkscape so I don't know exactly what you did "wrong" but there's a lot of lines in the code.
Just in case, I corrected it.
 

Attachments

  • Fern_Outline_Gradient(2).svg
    3.5 KB · Views: 17
krisduv
Did you try before saving your file to cut/paste the gradients? And did you save it using "optimized svg" (or something like that)?
I don't use Inkscape so I don't know exactly what you did "wrong" but there's a lot of lines in the code.
Just in case, I corrected it.
Click to expand...

Wow, thanks for doing that @krisduv! I think the issue might be in either grouping objects or in the layers I used. Either way, thanks so much for fixing it!
 
hairless_ape
A pair of simple text SVG's made in inkscape and run through SVGOMG are showing up blank in game...solutions?
Click to expand...
Are you using the correct SVGOMG? This one is the right one. https://xerocho.github.io/svgomg/

Note also that this SVGOMG can sometimes make the svg appear blank in the uploader but they appear fine in game.

After putting the text in Inskcape, did you do Path > Object to path? I also find it helps to select all the text (of the same colour) and combine it. (Path > combine.)
 
daan
Are you using the correct SVGOMG? This one is the right one. https://xerocho.github.io/svgomg/

Note also that this SVGOMG can sometimes make the svg appear blank in the uploader but they appear fine in game.

After putting the text in Inskcape, did you do Path > Object to path? I also find it helps to select all the text (of the same colour) and combine it. (Path > combine.)
Click to expand...

Yup, wrong SVGOMG. Thank you, kind sir. 👍
 
Ok,guys.

Realy appreciate some help.
Hope you can explain things to me,like to a kid that's five years old.

I want to have the "Schyns" part of this pic

Logo-Peugeot-Schyns-transparent.png



so i've cropped it using photoshop.

When i select trace bitmap the result is this.

YCaW8Xq.png



How can i keep the original color and have the logo complete?

already tried to do a simple trick using an online converter to svg but got this as result

http://www.mediafire.com/file/bdf2j1t6owghtg8/schyns_transparent.rar/file
 
Last edited:
i'll PM you

altho it has a fade in it, and that's not my best point in Inkscape
 
Last edited:
So i noticed, Inkscape is now at version 1.01 is it worth upgrading (0.92.3 is what i'm running)?
or should i get 0.92.5?

tnx for looking
 
Last edited:
Hello everyone. I decided to make a drawing with a transparent gradient in Inkscape and then optimized it in OMGSVG. It looks good, but when added to the game, the gradient turns into a black fill. What am I doing wrong?
 

Attachments

  • Пилигрим (9).svg
    5.3 KB · Views: 17

Latest Posts

Back