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

  • Thread starter daan
  • 1,494 comments
  • 390,865 views
Did you trace it manually or automatically? Did you group some layers together? Have you considered breaking the decal into two parts? What site did you use? Did you try SVGOMG in the OP?

Sorry about all questions and no answers. It's useful to know beforehand.
I was tracing it automatically and no layers were grouped together. Since it seemed impossible for me to get the decal size under 15kb I just ended up tracing it manually.

Also i'm working on one text file and for some reason the text isn't showing up when I go to upload it on the Gran Turismo site. And its only like around 2kb. Am I suppose to trace the text out too or is there something else wrong that i'm doing?
 
@pokemonfan58

Yeah auto tracing really kicks the size up drastically. Always smart to do "complex" designs manually. :)

Yeah text is funny. You need to convert text to curves too. Since I don't know which program you're using I can't say what to press to do this. (if you're using Affinity Designer you just select the text layer and hit CTRL (or the Command key on Mac) + Enter.)
 
@pokemonfan58

Yeah auto tracing really kicks the size up drastically. Always smart to do "complex" designs manually. :)

Yeah text is funny. You need to convert text to curves too. Since I don't know which program you're using I can't say what to press to do this. (if you're using Affinity Designer you just select the text layer and hit CTRL (or the Command key on Mac) + Enter.)
I'm using inkscape to do all the work. How do you convert text to curves anyways?

*EDIT* Was finally able to get the text to show up. Apparently, it seems like either converting it to text did the work and it updated the changes of the image on the site or I had to wait. Now onto finally manually tracing Spawn himself which this is going to be interesting to see how this will turn out. Have a feeling I will probably run into some size limits issues but if I do, ill report them here.

*EDIT AGAIN* Nvm. Game fooled me. :boggled:
 
Last edited:
So since my text file is over 15kb I got rid of some nodes to hopefully reduce file size and its going over 20kb. What the heck? The last decal I uploaded looked way more complicated then this and was only 12kb. Even tried simplifying it and its still over 15kb.
 
@pokemonfan58
Yeah. Text always brings a lot of unneccessary anchor points/nodes. And that is what makes it big in size :P
Pretty much. Either I used a very complicating font *even though I cleared out most of the unnecessary nodes* or I'm gonna have to manually trace this out. If manually tracing it is the case, I'm probably going to save finishing the text file till I'm done tracing the character.

Another somewhat quicker method of getting rid of the nodes I tried doing was simplifying the paths to eliminate some of the nodes, though that didn't drastically bring the kb size down to my favor.
 
I don't know what to use. I haven't gotten that far.
If you're using Inkscape, then maybe I could help you on that as i'm using Inkscape, especially since i'm also currently having a bit of trouble myself with text files.

Also I heard some people mentioned that saving svg files as plain svg reduces the file size. I think i've tried that once but when I tried to upload the plain svg file on the website, it wouldn't let me. Might give that another shot later on.
 
Also I heard some people mentioned that saving svg files as plain svg reduces the file size. I think i've tried that once but when I tried to upload the plain svg file on the website, it wouldn't let me. Might give that another shot later on.

Plain SVG is the way to go for smaller file sizes, and it shouldn't give you any problems with the uploader.

upload_2018-5-28_21-6-21.png


SVG code is XML that can be opened in Notepad.

In this screenshot the text on the left is Inkscape SVG, the text on the right is plain SVG. Put simply, there's less text in the plain SVG on the right, so it will be a smaller file.
 
Plain SVG is the way to go for smaller file sizes, and it shouldn't give you any problems with the uploader.

View attachment 739262

SVG code is XML that can be opened in Notepad.

In this screenshot the text on the left is Inkscape SVG, the text on the right is plain SVG. Put simply, there's less text in the plain SVG on the right, so it will be a smaller file.
I've seen people able to upload some pretty complex decals under 15kb but the complex decal im working on is nearing 15kb. How can I fix that?
 
How does one make generic typed word SVGs?
For anyone wanting to do a text SVG. in a few steps. Totally free and no programs to download.
1 Go to Let me Font. Type in your text and pick a font. Click on the text on the right and download as a .eps file
2 Go to Convert eps to svg. upload your .eps file and download a .svg file.
3 Go to SVGOMG. load your .svg and adjust settings so file is under 15kb (may not need shrinking but can help to stop invisible decals). Then save .svg
4 Go to GT Sport website. Login with PSN settings. Click Decal uploader. Load svg
5 Load GTSport on your PS4 and use your new decal.

If you still have problems at least you can provide decal makers with an esp file or very minimum a Font name.
 
Holy crap WindowsXP is such garbage. I can't even load the text boxes on LetMeFont...

Can someone please make one that's DesertPenguin09 in a basic font similar to the one in-game for your driver name?
 
Holy crap WindowsXP is such garbage. I can't even load the text boxes on LetMeFont...

Can someone please make one that's DesertPenguin09 in a basic font similar to the one in-game for your driver name?

17 year old operating system.... :confused:
 

Attachments

  • dp09.zip
    2.5 KB · Views: 19
I know.... Thanks though. Someone made one once with the US flag next to it too but the flag wasn't lined up properly with the name so I scrapped it. I'll use this and manually put a flag next to it.
 
That was the distance between the two. I'm talking about them being on the same horizontal line, as if to say it was written on lined paper. He edited it to include them separate after and I never knew.
 
For anyone wanting to do a text SVG. in a few steps. Totally free and no programs to download.
1 Go to Let me Font. Type in your text and pick a font. Click on the text on the right and download as a .eps file
2 Go to Convert eps to svg. upload your .eps file and download a .svg file.
3 Go to SVGOMG. load your .svg and adjust settings so file is under 15kb (may not need shrinking but can help to stop invisible decals). Then save .svg
4 Go to GT Sport website. Login with PSN settings. Click Decal uploader. Load svg
5 Load GTSport on your PS4 and use your new decal.

If you still have problems at least you can provide decal makers with an esp file or very minimum a Font name.

I've been trying to get a bunch of text done in Times New Roman, that font isn't on that site and I've no idea what I'm doing with Ink Scape... any ideas????

I have a bunch of .png's and I've read comments in this thread that I've got to basically duplicate it in Inkscape without the png file attached... but if I just remake the text in Inkscape it just creates blank SVG's..
 
I've been trying to get a bunch of text done in Times New Roman, that font isn't on that site and I've no idea what I'm doing with Ink Scape... any ideas????

I have a bunch of .png's and I've read comments in this thread that I've got to basically duplicate it in Inkscape without the png file attached... but if I just remake the text in Inkscape it just creates blank SVG's..
In Inkscape type your text. With text highlighted click [Path] up the top and then click [Object to Path]
 
but if I just remake the text in Inkscape it just creates blank SVG's..

as well as what Maninashed says, you also need to crop the page to fit the text. To do that, just select your text, then go to Edit > Resize page to selection (something like that)... or it's Ctrl+Shift+R. You should see the page fit to your text, then just save as plain SVG and away you go.

Times New Roman is quite an inefficient font. There's lots of nodes on curves that don't need to be there.
 
as well as what Maninashed says, you also need to crop the page to fit the text. To do that, just select your text, then go to Edit > Resize page to selection (something like that)... or it's Ctrl+Shift+R. You should see the page fit to your text, then just save as plain SVG and away you go.

Times New Roman is quite an inefficient font. There's lots of nodes on curves that don't need to be there.

OK I'll try and have a play... trying to rush through as I only have tonight to finish my entry for the competition :scared:
 
Hi Guys, new here, but the thread here has drawn me in. I have seen tons of questions regarding text and file size in general. As to text, it is a horrible 'object' in svg for gts. With that said: GTS does not recognize many fonts, it MUST be outlined, and generally is very inefficient. I use inkscape (but heavily edit text code to keep file sizes small, because 90% of their files contain absolutely useless nonsense that blows up files sizes :) ) My recommendation to be able to uses a lot of text with very small files sized using inkscape:

Use text that is close to the look you like. Convert the text object to path. (Path>Object to Path). Remove the 60% of useless nodes that are not needed for the shape of the letters LOL. (Often I just create paths over a text object and use it simply as a reference and then delete the text completely) Very important, remove stroke from the path, and use just a fill color. (The stroke definition takes up a LOT of text, file size, in the actual svg file which is just text). Then edit the paths to alter text if you'd like to change its look. Perhaps the most important relating to file size is the placement of nodes in the editor. If you work in a large scale pixel wise in the editor, it is very easy to snap each node to an exact pixel location, which make the file size MUCH smaller, sometimes just 500% smaller than leaving nodes at fractional positions between pixels. I usually work in at LEAST 1024x1024 pixel resolution in the editor so this is very easy without destroying the sharpness or precision of curves. 4K resolution is best to work in because it will be pixel perfect at the highest resolution that most people will ever see the decal. So in brief, to make the most efficient svg file for text:

Type text. (either trace this with your own paths and delete original text object or...) Convert to path. Remove stroke and just use fill color. Remove ALL unnecessary nodes (which will be a large number LOL) Place each node (you can use snapping for simplicity or type in exact coordinates in top bar of editor) on an exact pixel location. Finally, "clean up document" in the file drop down, view zoom to 1:1, save as plain svg.

Of course there are ways to make the file much smaller than even that as inkscape still places a lot of useless definitions and references in the svg text file. And all of the "whitespace" in the svg file uses up a LOT of memory as well. If anyone would like to see the actual difference between optimized svg and an inkscape "plain" svg. I can put up a sample...But in general all editors have waaaaay too much text in their files and waaay too much whitespace which is completely unnecessary for a decal. (We are not coding svg in a text editor, no reason for it to be "readable" or "coder friendly" at all LOL)

In general about size of svg files though. All editors by default place many kilobytes of useless defs, attr, styles, and software dependent nonsense in their files and many kb of "blank whitespace". A person who wants to make efficient svgs needs to remove all of this nonsense, use a workspace defined by pixels and not any other measurement, keep all nodes at exact pixel locations, and work at a high enough resolution so that that placement is simple and does not effect image quality. Any person, can make svgs much smaller than an online "optimizer" such as svgomg with a little working knowledge. (Oh, and native objects blow too :) Make everything with paths....)
 
Hi Guys, new here, but the thread here has drawn me in. I have seen tons of questions regarding text and file size in general. As to text, it is a horrible 'object' in svg for gts. With that said: GTS does not recognize many fonts, it MUST be outlined, and generally is very inefficient. I use inkscape (but heavily edit text code to keep file sizes small, because 90% of their files contain absolutely useless nonsense that blows up files sizes :) ) My recommendation to be able to uses a lot of text with very small files sized using inkscape:

Use text that is close to the look you like. Convert the text object to path. (Path>Object to Path). Remove the 60% of useless nodes that are not needed for the shape of the letters LOL.

The number of nodes is defined by the font itself, some fonts are quite efficient, others are rubbish, but when being converted to paths they will, by default, have the same number of nodes whichever application you're using.

You're right though, inkscape produces horrible SVG. The easy way to address most of your other points is to use SVGOMG https://jakearchibald.github.io/svgomg/

Personally, I use an old version of Corel which writes fairly efficient SVG - though it doesn't allow for any control over decimal precision - I much prefer it to either inkscape, illustrator or affinity.

There's a terribly inefficient font I have called EnterSansman, there are way too many nodes. But in both Inkscape and Corel they have virtually the same number of nodes...

upload_2018-6-3_15-7-29.png



I'm guessing it's 2 different because of how it counts the unclosed nodes.

In Corel the Reduce nodes slider even set to just 1 (from zero), takes it down from 595 to 135.
 
The number of nodes is defined by the font itself, some fonts are quite efficient, others are rubbish, but when being converted to paths they will, by default, have the same number of nodes whichever application you're using.

You're right though, inkscape produces horrible SVG. The easy way to address most of your other points is to use SVGOMG https://jakearchibald.github.io/svgomg/

Personally, I use an old version of Corel which writes fairly efficient SVG - though it doesn't allow for any control over decimal precision - I much prefer it to either inkscape, illustrator or affinity.

There's a terribly inefficient font I have called EnterSansman, there are way too many nodes. But in both Inkscape and Corel they have virtually the same number of nodes...

View attachment 740694


I'm guessing it's 2 different because of how it counts the unclosed nodes.

In Corel the Reduce nodes slider even set to just 1 (from zero), takes it down from 595 to 135.
Agree, simply converting text to path does nothing to reduce file size, however, gts demands text objects to have a stroke which does increase file size as the stroke definition, size, etc all require additional code. Whereas, if they are simply a filled path, only a single fill attribute is needed and node coordnates. I have yet to see any well made font, node wise, the majority of them are a horrendous waste of resources. It's like the circle thing, you can make a perfect filled circle with two nodes, yet every editor, I've seen has at least three (if a primitive) and four if primitive is converted to path. Silly things like this are in a way embedded into text objects constantly because font creators are apparently not in any way worried about memory size. We are in a unique situation where our svgs are limited to a measly 15kb. :) Svgomg is okay if you are just looking to downsize a little, but it is far from optimization. Anyway even if you didn't remove nodes after converting to path, file size can be made much smaller simply by working in high resolution pixel wize and then just snapping all nodes to exact pixel location. You are probably aware, but some aren't:
Each node is placed by two coordinates, one in the x or horizontal direction and one in the y or vertical direction. Here is he kicker....consider one inexact node...

757.4567, 987.3214 (the position of the node) Now the same node placed correctly 757, 987

The first is 16bytes, the correct one is 6byes. That one node takes up 2.67x (10 extra bytes for one node) as much memory as the correct node. Multiply that error in an svg with hundreds or even thousands of nodes...Would anyone rather have about 2500 nodes available to them for their next design or be stuck at around 900? :)
 
The number of nodes is defined by the font itself, some fonts are quite efficient, others are rubbish, but when being converted to paths they will, by default, have the same number of nodes whichever application you're using.

You're right though, inkscape produces horrible SVG. The easy way to address most of your other points is to use SVGOMG https://jakearchibald.github.io/svgomg/

Personally, I use an old version of Corel which writes fairly efficient SVG - though it doesn't allow for any control over decimal precision - I much prefer it to either inkscape, illustrator or affinity.

There's a terribly inefficient font I have called EnterSansman, there are way too many nodes. But in both Inkscape and Corel they have virtually the same number of nodes...

View attachment 740694


I'm guessing it's 2 different because of how it counts the unclosed nodes.

In Corel the Reduce nodes slider even set to just 1 (from zero), takes it down from 595 to 135.
Looks a bit like a knock-off of Serpentine and may explain the massive node-count as most 'copied' fonts tend to be badly drawn from what I've seen.

Node count is one of the biggest factors in SVG file size. I'm still amazed at all the complex anime characters that have been uploaded as they often look like they should have more nodes than some of the designs I have difficulties with!
 
Back