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

  • Thread starter daan
  • 1,462 comments
  • 350,809 views
Belifant
you could delete a lot of the nodes and adjust the curves to bring the file size down. What I do is create a copy of all the curves, put them on a layer below and lock it. Then I work in the outline view, delete as many points as possible and adjuste the altered curves to fit the underlying original curves.
Click to expand...
I'm still a massive noob at these things at the moment but will keep persevering and keep that in mind
 
Islaygaz
I'm still a massive noob at these things at the moment but will keep persevering and keep that in mind
Click to expand...

Like so for example. The amount of points (and file size) cut in half and the curve look pretty much the same.
points.jpg


points.jpg
 
So I've been trying to make an svg version of my logo (my profile picture) to use in the game. I used the same file that I used here (with transparency) and I changed the file extension to .svg. On all my other svg files it worked perfectly (albeit I had to open it in Chrome to see it) but on this one, it says something on the lines of 'this XML file has no style attributes' and doesn't show up. Am I doing something wrong.

I also attached my logo in it's png form with transparency and it's broken svg version to see if you can find the problem.

EDIT
It seems that svgs cannot be attached and it changed it back to png.
 

Attachments

  • emblem_128.png
    emblem_128.png
    1.2 KB · Views: 12
  • emblem_128.png
    emblem_128.png
    1.2 KB · Views: 11
Doomotron
So I've been trying to make an svg version of my logo (my profile picture) to use in the game. I used the same file that I used here (with transparency) and I changed the file extension to .svg. On all my other svg files it worked perfectly (albeit I had to open it in Chrome to see it) but on this one, it says something on the lines of 'this XML file has no style attributes' and doesn't show up. Am I doing something wrong.

I also attached my logo in it's png form with transparency and it's broken svg version to see if you can find the problem.

EDIT
It seems that svgs cannot be attached and it changed it back to png.
Click to expand...

Simply changing the file extension doesn't work.

See here for an explanation of bitmap vs vector images:

http://www.gran-turismo.com/us/gtsport/news/00_4307308.html
 
Doomotron
Well, seems like I won't be able to use my logo...
Click to expand...

Did you even try dude?

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="52.3702mm" height="52.3702mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 403.824 403.824"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
    .fil0 {fill:#1F1A17}
    .fil1 {fill:#2F8FC4}
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" d="M201.912 0c111.494,0 201.912,90.4171 201.912,201.912l0 201.912 -201.912 0c-111.494,0 -201.912,-90.4171 -201.912,-201.912l0 -201.912 201.912 0z"/>
  <path class="fil1" d="M201.912 9.13826c106.448,0 192.774,86.3249 192.774,192.774l0 192.774 -192.774 0c-106.448,0 -192.774,-86.3249 -192.774,-192.774l0 -192.774 192.774 0z"/>
  <path class="fil0" d="M201.912 21.3015c99.8399,0 180.807,80.9658 180.807,180.807l0 180.807 -180.807 0c-99.8399,0 -180.807,-80.9658 -180.807,-180.807 0,-99.8407 80.9666,-180.807 180.807,-180.807z"/>
  <path class="fil1" d="M285.548 202.108c46.1832,0 83.6361,37.4529 83.6361,83.6361l0 83.6361 -83.6361 0c-46.1832,0 -83.6361,-37.4529 -83.6361,-83.6361 0,-46.1832 37.4529,-83.6361 83.6361,-83.6361z"/>
 </g>
</svg>
 

Attachments

  • doomotron.zip
    743 bytes · Views: 17
MatskiMonk
Did you even try dude?

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="52.3702mm" height="52.3702mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 403.824 403.824"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
    .fil0 {fill:#1F1A17}
    .fil1 {fill:#2F8FC4}
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" d="M201.912 0c111.494,0 201.912,90.4171 201.912,201.912l0 201.912 -201.912 0c-111.494,0 -201.912,-90.4171 -201.912,-201.912l0 -201.912 201.912 0z"/>
  <path class="fil1" d="M201.912 9.13826c106.448,0 192.774,86.3249 192.774,192.774l0 192.774 -192.774 0c-106.448,0 -192.774,-86.3249 -192.774,-192.774l0 -192.774 192.774 0z"/>
  <path class="fil0" d="M201.912 21.3015c99.8399,0 180.807,80.9658 180.807,180.807l0 180.807 -180.807 0c-99.8399,0 -180.807,-80.9658 -180.807,-180.807 0,-99.8407 80.9666,-180.807 180.807,-180.807z"/>
  <path class="fil1" d="M285.548 202.108c46.1832,0 83.6361,37.4529 83.6361,83.6361l0 83.6361 -83.6361 0c-46.1832,0 -83.6361,-37.4529 -83.6361,-83.6361 0,-46.1832 37.4529,-83.6361 83.6361,-83.6361z"/>
 </g>
</svg>
Click to expand...
I don't have the software or time to do it.
 
MatskiMonk
For something simple like that there are online 'converters' I believe.

You should find the Zip file I attached contains a suitable SVG file however.
Click to expand...
I wasn't just referring to the file itself. Even in it's SVG form, it will have a lower resolution and for me to fix it I would need to literally remake the logo. Around the edges, there is fading which was made when making it in the Rockstar Social Club (this was my crew logo) and when I tried getting rid of it, the image looked like it was off a dot matrix display.
 
Doomotron
I wasn't just referring to the file itself. Even in it's SVG form, it will have a lower resolution and for me to fix it I would need to literally remake the logo. Around the edges, there is fading which was made when making it in the Rockstar Social Club (this was my crew logo) and when I tried getting rid of it, the image looked like it was off a dot matrix display.
Click to expand...

proper vector svg, like MatskiMonk did for you, are resolution independent and look perfect at any size.
 
Any good settings for SVGOMG ?
Or any online svg compress recommend?
it use to be the best svg online compress
But now, all the file looks fine online
But all get scramble in the game
Did I miss something wrong, or SVGOMG change something?
 
If your SVG is simple enough, turn off 'round/rewrite paths' - only then should you go below precision level 2...but at that point you don't need to. 'Round/rewrite paths' seems to be the big factor in file size vs precision on SVGOMG.

It seems if there is a long file segment with no node the line gets a little lost when translated into the GTS engine - the solution I've found in Inkscape - and this may just be coincidental so don't take this as gospel - is to select all the nodes of an object using a selection rectangle, then hit the button 'make selected nodes corner' Do this for all the objects in the file - after zeroing out your document as shown on the previous page of this thread - I think I'm finally putting blobby decals in my rear view mirror. :scared:
 
I have no idea what I'm doing but someone posted an svg that I downloaded so I have the svg file on my computer. How do I upload it to the game so we can all use it?
 
Not sure what these red boxes are? Only on some of the decals in "discover" Anyone? Thanks!
 
Last edited by a moderator:
Got another blobby, added more nodes, made sure they were all corner nodes - wasn't working. Because of added nodes the decal went over the 15KB limit. Ended up reducing precision to 0...but that was the only thing that worked. I dunno anymore. :banghead:
 
CWR63
Got another blobby, added more nodes, made sure they were all corner nodes - wasn't working. Because of added nodes the decal went over the 15KB limit. Ended up reducing precision to 0...but that was the only thing that worked. I dunno anymore. :banghead:
Click to expand...

You can manually delete nodes, zoom helps. Also sections of nodes can be deleted. There is also simplify, but only do that once - and manually deletion after as well. Same for individual areas that are better accessed after a "break apart", but make sure to "combine" before save. However if recombining smashes colors than don't and just save without. A few nodes could be a few kb.
 
Last edited:
CWR63
Got another blobby, added more nodes, made sure they were all corner nodes - wasn't working. Because of added nodes the decal went over the 15KB limit. Ended up reducing precision to 0...but that was the only thing that worked. I dunno anymore. :banghead:
Click to expand...
Just upload your file, maybe we can find some workaround.
I don't set less than 3 precision decimals in Inkscape, otherwise sometimes things get misplaced.
 
Nepbox
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?
Click to expand...


Having exactly same issue here. Any fix to that? I briefly read through this thread and couldn't find an answer. Shall I ditch the auto trace and do everything by hand? What is causing this issue? I used both corel draw and ilustrator and none of them worked. I don't have much expirence in these programs so I'd appreciate any help.

//EDIT: saving the graphic as a svg insted of exporting it resolved that issue.
 
Last edited:
eclipsee
Just upload your file, maybe we can find some workaround.
I don't set less than 3 precision decimals in Inkscape, otherwise sometimes things get misplaced.
Click to expand...

Well, the thing is, it DID work in the game - I'm just aggravated that I don't know WHY it does. When I save an optimized SVG in Inkscape, the 'number of significant digits for coordinates' option is set to 6 - is that what you're referring to? Here's the file as it came out of Inkscape, and the same file after SVGOMG. It's the uppermost black line layer of the logo.
 

Attachments

  • SACtraceUp.zip
    56.1 KB · Views: 13
I honestly can't for the life of me work out how to optimize decal files
I remove blur, reduce the colours, increase the grouping, and run the file through several optimization/minimization tools

So far I can get a shape in one single colour to be JUST under 15kb, but I see huge 64+ colour images on the website. Like... how? Seriously, how?
 
VanessaMagick
I honestly can't for the life of me work out how to optimize decal files
I remove blur, reduce the colours, increase the grouping, and run the file through several optimization/minimization tools

So far I can get a shape in one single colour to be JUST under 15kb, but I see huge 64+ colour images on the website. Like... how? Seriously, how?
Click to expand...
It is real odd how png's and jpegs can be way smaller in size and svg from raw png r jpegs turn massive.
 
VanessaMagick
I honestly can't for the life of me work out how to optimize decal files
I remove blur, reduce the colours, increase the grouping, and run the file through several optimization/minimization tools

So far I can get a shape in one single colour to be JUST under 15kb, but I see huge 64+ colour images on the website. Like... how? Seriously, how?
Click to expand...

Sounds like you might be embedding a raster/bitmap in the files. What application are you using to make the SVGs?

Mysticblaze21
It is real odd how png's and jpegs can be way smaller in size and svg from raw png r jpegs turn massive.
Click to expand...

If using a tracing feature, the bigger the dimensions of the original image file, the more nodes likely will be created, leading to bigger files.
 
Can I simply use a file converter to make image files .svg and then upload them on the website? Otherwise how do I go about this? I have some images I wanna upload.
 

Latest Posts

Back