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

[jdavison]

I found an online converter here, but so far, all but one came out black... no color. I have used .jpg and .bmp with same results. You guys are way more knowledgeable about this stuff than I am... hoping someone steer me in the right direction.

Thanks!

 

[vinnyvangough]

Really could have made this a little easier.
Trying Inkscape and just can't seem to get the files small enough. Done a text one no problem. Any image or logo just seems to large.

 

[Belifant]

@Belifant

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

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

Yeah that's a good idea. For me it just works to do a double subtraction, but good to keep this method in mind too.

I am now struggling with gradients. Has anybody upload gradients successfully? Either I get the gradient to show up, but it messes with the geometry, or I get good geometry and no gradient.

 

[zzz_pt]

Yeah that's a good idea. For me it just works to do a double subtraction, but good to keep this method in mind too.

I am now struggling with gradients. Has anybody upload gradients successfully? Either I get the gradient to show up, but it messes with the geometry, or I get good geometry and no gradient.

I've uploaded at least a logo with a gradient from reddish orange to purple/blue and I had no issues. Are you creating a mask / shape for the gradient or applying it directly to the shape? I think the first method doesn't work. I've tried once and I would get a bank black shape with no mask/gradient whatsoever.

I think you have to aply the gradient to the shape itself and avoid masks.

VSD logo

 

[Magdelayna]

guys,im getting 'invalid svg file' when i try to upload..anyone know why?? Ive saved from Illustrator as an SVG file - is there any one of the options i need to change when saving it??

Type : SVG or convert to outline?
Images : Embed or Link?

 

[Belifant]

I've uploaded at least a logo with a gradient from reddish orange to purple/blue and I had no issues. Are you creating a mask / shape for the gradient or applying it directly to the shape? I think the first method doesn't work. I've tried once and I would get a bank black shape with no mask/gradient whatsoever.

I think you have to aply the gradient to the shape itself and avoid masks.

VSD logo

I applied the gradient directly to the shape. As simple as it can get. I do sometime get the gradient in the game, but that usually comes with some messed up geometry. It seems totally random at the moment which gradients work and which not.

Btw, great livery!

guys,im getting 'invalid svg file' when i try to upload..anyone know why?? Ive saved from Illustrator as an SVG file - is there any one of the options i need to change when saving it??

Type : SVG or convert to outline?
Images : Embed or Link?

I noticed that "Save as" in Illustrator is producing invalid svg, seems like an Illustrator bug. Instead, try Export - Export as.

 

[Magdelayna]

I applied the gradient directly to the shape. As simple as it can get. I do sometime get the gradient in the game, but that usually comes with some messed up geometry. It seems totally random at the moment which gradients work and which not.

Btw, great livery!



I noticed that "Save as" in Illustrator is producing invalid svg, seems like an Illustrator bug. Instead, try Export - Export as.

When i go to Export,theres no SVG option?

 

[CptMadBean]

I at a loss I've now got Adobe Photoshop and AI trails running, Go to upload and it tells me invalid SVG format?

 

[syntex123]

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

If you read all posts you would’ve seen me asking for more tutorials, Inkscape and CorelDraw in particular. I will add more stuff when I get more stuff, so far noone has done exactly that.

When i go to Export,theres no SVG option?

Look in OP, there you’ll see the SVG export tab.

 

[CptMadBean]

I've also tried Inkscape same thing, could this be a PC sort of bug?

Found an option to change it to SVG 1.0 or 1.1 and the same thing grrrrrr

 

[syntex123]

I've also tried Inkscape same thing, could this be a PC sort of bug?

Could be it isn’t in the SVG 1.0 or 1.1 format. I don’t know.

 

[CptMadBean]

Could be it isn’t in the SVG 1.0 or 1.1 format. I don’t know.

Tried both 1.0 and 1.1 in Adobe AI just get the same thing, Also tried uploading on firefox and windows IE

 

[Belifant]

I at a loss I've now got Adobe Photoshop and AI trails running, Go to upload and it tells me invalid SVG format?

see answer just above, 334

 

[CptMadBean]

Tried save as, tried export as

 

[Belifant]

export works for me, svg 1.1

 

[CptMadBean]

export works for me, svg 1.1

Why nothing easy for me?

 

[MatskiMonk]

Yeah that's a good idea. For me it just works to do a double subtraction, but good to keep this method in mind too.

I am now struggling with gradients. Has anybody upload gradients successfully? Either I get the gradient to show up, but it messes with the geometry, or I get good geometry and no gradient.

Tried a gradient today. Corel royally ef's up the SVG, it seems to try and write a style for each object (in my case it was the letters E D G E), except it would only keep the gradient data for one of the object... I went in a cleaned it manually... this is how it looks now...

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="9000px" height="1800px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-renderingptimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 104252 19322.6"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

here it defines a fill, and specifies to use gradient id0

<style type="text/css">
.fil2 {fill:url(#id0)}
</style>

here it defines the gradient id0

<linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="64839.6" y1="19322.6" x2="64839.6" y2="194.425">
<stop offset="0" style="stop-color:#D6A763"/>
<stop offset="1" style="stop-color:white"/>
</linearGradient>

</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>

And here is where is applies it to the object

<path class="fil2" d="M30447.7 10.6528l-5104.32 19305.8 17337.6 6.12436c2875.22,0 5117.74,-2414.79 6243.14,-4850.52 68.391,-149.876 126.757,-356.304 177.047,-514.406 116.336,-365.825 225.728,-734.392 333.416,-1102.85 299.848,-1025.89 584.856,-2057.2 861.803,-3089.5 329.392,-1227.76 656.794,-2467.94 934.19,-3708.44 115.831,-518.088 187.386,-1003.36 187.386,-1535.54 0,-1984.72 -1486.3,-3373.86 -3173.57,-4162.18 -971.905,-454.171 -2071.63,-348.502 -3113.28,-348.502l-14683.4 0zm10578.4 15435.9l-9370.6 -12.3306 3227.46 -12282.6 8716.6 0c1011.61,0 2104.71,613.364 2104.71,1737.2 0,710.576 -138.542,1523.71 -269.499,2221.63 -186.95,996.211 -428.46,1991.55 -715.214,2963.65 -456.967,1549.15 -1652.24,5372.44 -3693.45,5372.44z"/>
<path class="fil2" d="M23449.4 3150.53l3622.92 -3139.87 -15601.8 0 -2351.06 167.281c-1533.64,147.899 -3107.94,535.752 -4082.36,1823.22 -554.875,733.137 -877.339,1671.36 -1136.83,2544.17 -350.685,1179.56 -631.969,2367.35 -1023.61,3537.28l-2876.72 11240 18674.1 0 4328.86 -3692.28 -16284.7 0 1143.73 -4577.07 9162.17 0.10912 3745 -3140.97 -12068 0 1381.5 -4809.71 13366.9 47.8491z"/>
<path class="fil2" d="M78165.5 3151.62l625.435 -2957.19 -17917.8 0c-1697.06,0 -3915.81,833.895 -5031.05,2143.54 -872.019,1023.97 -1520.41,4162.36 -1858.03,5536.66 -259.119,1054.74 -542.149,2100.04 -841.766,3143.88 -347.247,1209.76 -704.902,2415.4 -1040.58,3628.64 -429.401,1551.99 -829.912,3111.57 -1213.35,4675.45l17151.4 0c541.399,0 1084.31,-45.1348 1618.89,-130.385 1797.89,-286.686 4605.27,-1309.85 5125.75,-3298.93 697.454,-2665.38 1480.81,-5305.93 2140.42,-7980.89l-8954.79 0 -3745 3140.97 5806.65 0 -73.7651 886.273c-22.6288,271.968 -51.9139,543.595 -94.0069,813.285 -224.201,1436.46 -883.081,2877.4 -2559.18,2877.4l-9693.34 0 1736.18 -6722.71 1.06392 -3.96924c91.579,-340.468 165.972,-691.766 246.652,-1035.36 120.278,-512.223 245.493,-1023.48 387.144,-1530.26 135.541,-484.916 286.058,-972.451 471.712,-1440.67 515.442,-1299.81 999.949,-1745.73 2427.59,-1745.73l15283.7 0z"/>
<path class="fil2" d="M100629 3150.53l3622.94 -3139.87 -15601.8 0 -2351.06 167.281c-1533.64,147.899 -3107.94,535.752 -4082.36,1823.22 -554.875,733.137 -877.339,1671.36 -1136.83,2544.17 -350.685,1179.56 -631.969,2367.35 -1023.61,3537.28l-2876.72 11240 18674.1 0 4328.86 -3692.28 -16284.7 0 1143.73 -4577.07 9162.17 0.10912 3745 -3140.97 -12068 0 1381.5 -4809.71 13366.8 47.8491z"/>
</g>
</svg>

It was for the Castrol Edge logo on this...

 

[MantoHD]

hello can some one make for me an svg file becuse i dont have the programs https://ibb.co/fQ76dR

this is my country number plate

 

[Belifant]

Tried a gradient today. Corel royally ef's up the SVG, it seems to try and write a style for each object (in my case it was the letters E D G E), except it would only keep the gradient data for one of the object... I went in a cleaned it manually... this is how it looks now...

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="9000px" height="1800px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-renderingptimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 104252 19322.6"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

here it defines a fill, and specifies to use gradient id0

<style type="text/css">
.fil2 {fill:url(#id0)}
</style>

here it defines the gradient id0

<linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="64839.6" y1="19322.6" x2="64839.6" y2="194.425">
<stop offset="0" style="stop-color:#D6A763"/>
<stop offset="1" style="stop-color:white"/>
</linearGradient>

</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>

And here is where is applies it to the object

<path class="fil2" d="M30447.7 10.6528l-5104.32 19305.8 17337.6 6.12436c2875.22,0 5117.74,-2414.79 6243.14,-4850.52 68.391,-149.876 126.757,-356.304 177.047,-514.406 116.336,-365.825 225.728,-734.392 333.416,-1102.85 299.848,-1025.89 584.856,-2057.2 861.803,-3089.5 329.392,-1227.76 656.794,-2467.94 934.19,-3708.44 115.831,-518.088 187.386,-1003.36 187.386,-1535.54 0,-1984.72 -1486.3,-3373.86 -3173.57,-4162.18 -971.905,-454.171 -2071.63,-348.502 -3113.28,-348.502l-14683.4 0zm10578.4 15435.9l-9370.6 -12.3306 3227.46 -12282.6 8716.6 0c1011.61,0 2104.71,613.364 2104.71,1737.2 0,710.576 -138.542,1523.71 -269.499,2221.63 -186.95,996.211 -428.46,1991.55 -715.214,2963.65 -456.967,1549.15 -1652.24,5372.44 -3693.45,5372.44z"/>
<path class="fil2" d="M23449.4 3150.53l3622.92 -3139.87 -15601.8 0 -2351.06 167.281c-1533.64,147.899 -3107.94,535.752 -4082.36,1823.22 -554.875,733.137 -877.339,1671.36 -1136.83,2544.17 -350.685,1179.56 -631.969,2367.35 -1023.61,3537.28l-2876.72 11240 18674.1 0 4328.86 -3692.28 -16284.7 0 1143.73 -4577.07 9162.17 0.10912 3745 -3140.97 -12068 0 1381.5 -4809.71 13366.9 47.8491z"/>
<path class="fil2" d="M78165.5 3151.62l625.435 -2957.19 -17917.8 0c-1697.06,0 -3915.81,833.895 -5031.05,2143.54 -872.019,1023.97 -1520.41,4162.36 -1858.03,5536.66 -259.119,1054.74 -542.149,2100.04 -841.766,3143.88 -347.247,1209.76 -704.902,2415.4 -1040.58,3628.64 -429.401,1551.99 -829.912,3111.57 -1213.35,4675.45l17151.4 0c541.399,0 1084.31,-45.1348 1618.89,-130.385 1797.89,-286.686 4605.27,-1309.85 5125.75,-3298.93 697.454,-2665.38 1480.81,-5305.93 2140.42,-7980.89l-8954.79 0 -3745 3140.97 5806.65 0 -73.7651 886.273c-22.6288,271.968 -51.9139,543.595 -94.0069,813.285 -224.201,1436.46 -883.081,2877.4 -2559.18,2877.4l-9693.34 0 1736.18 -6722.71 1.06392 -3.96924c91.579,-340.468 165.972,-691.766 246.652,-1035.36 120.278,-512.223 245.493,-1023.48 387.144,-1530.26 135.541,-484.916 286.058,-972.451 471.712,-1440.67 515.442,-1299.81 999.949,-1745.73 2427.59,-1745.73l15283.7 0z"/>
<path class="fil2" d="M100629 3150.53l3622.94 -3139.87 -15601.8 0 -2351.06 167.281c-1533.64,147.899 -3107.94,535.752 -4082.36,1823.22 -554.875,733.137 -877.339,1671.36 -1136.83,2544.17 -350.685,1179.56 -631.969,2367.35 -1023.61,3537.28l-2876.72 11240 18674.1 0 4328.86 -3692.28 -16284.7 0 1143.73 -4577.07 9162.17 0.10912 3745 -3140.97 -12068 0 1381.5 -4809.71 13366.8 47.8491z"/>
</g>
</svg>

It was for the Castrol Edge logo on this...

I noticed the same thing over here, so it doesn't seem to be just a Corel issue. When you apply the same gradient to multiple objects, GTS seems to see only a gradient for one object. I found if you vary the gradient slightly, it works. In the case of multiple letters, when i compounded them together, it seems to treat it as one object and working too. Unfortunately many different gradients seem to increase file size quite a bit.

 

[vinnyvangough]

Just a quick little one i done earlier.
Really struggling to get images below the 15kb. Hope they up it to maybe 100kb

 

[Magdelayna]

If you read all posts you would’ve seen me asking for more tutorials, Inkscape and CorelDraw in particular. I will add more stuff when I get more stuff, so far noone has done exactly that.


Look in OP, there you’ll see the SVG export tab.

OP?

 

[MatskiMonk]

hello can some one make for me an svg file becuse i dont have the programs https://ibb.co/fQ76dR

this is my country number plate

Done..

Search for

#omannumberplate
#oman
#MantoHD

 

[MantoHD]

Done..

Search for

#omannumberplate
#oman
#MantoHD

thx dude

 

[syntex123]

OP?

Original post. First page.

 

[Belifant]

Did some more testing, and as mentioned before, it does look like if two objects share the same gradient, only one will display with it in GTS. Vary the gradient a bit, and you are good.

Good news is, I tried uploading a logo with transparency in it, and that seems to work without any issues.

 

[CptMadBean]

Nice mate was also looking at doing that one. Added a file of the one I did

 

[Tavilha]

Converting PNG or JPEG images to valid <15kb .svg files is proving too difficult with Inkscape. I'm giving up for now... Still haven't tried Illustrator though, but my hopes are down.

 

[andrew1990]

Currently using Inkscape. Trying to take some text typed into it and save it as an .svg. That part at least is fine, but I'm getting blank boxes when uploading onto the Gran Turismo website.

Have I missed something? Thanks in advance!

 

[ghostrider135]

Currently using Inkscape. Trying to take some text typed into it and save it as an .svg. That part at least is fine, but I'm getting blank boxes when uploading onto the Gran Turismo website.

Have I missed something? Thanks in advance!

I've been specifically doing typed text logos in Inkscape, After typing I do 3 things.
Path - Object to Path
Object - Ungroup
Path - Combine

I have noticed they do come up quite small though but they can easily be made larger in-game.
Hope that helps.

 

[andrew1990]

I've been specifically doing typed text logos in Inkscape, After typing I do 3 things.
Path - Object to Path
Object - Ungroup
Path - Combine

I have noticed they do come up quite small though but they can easily be made larger in-game.
Hope that helps.

Thanks! Will try it later.